componentWillReceiveProps代替方案
componentWillReceiveProps代替方案
componentWillReceiveProps 这个周期函数在最新的react 不建议用了,那么由没有替代方案呢。答案是肯定的。
componentWillReceiveProps 是为了解决props是异步获取的时候使自组件正确获得最新props的方法,一般我们只需要用第一个参数,nextProps(即是最新props)就可以满足需求。
在业务中,由两种场景:
1,props是通过父组件的ajax异步获取,这个时候只需要在componentWillReceiveProps里面拿到最新的props,不过这个时候需要一些判断条件来避免一些不必要的渲染。
2,props是通过父组件的ajax异步获取,这个时候只需要在componentWillReceiveProps里面拿到最新的props,并且根据这个最新的props 来发送ajax 获取数据,来渲染视图。
官方代替方案是用 getDerivedStateFromProps 来代替 componentWillReceiveProps,第一种情况代替如下:
看出区别了吗?代替方案是: 是一个静态方法, 需要把props 用 state 存起来,然后 用 preState来获取上一个props,第二,componentWillReceiveProps 直接 setState而 getDerivedStateFromProps 则是return 一个对象就好,它相当于setState,还有一个细节,后面的 return null;不能少,为什么,自己查api。
第二种场景怎么办呢,getDerivedStateFromProps 不能直接this.xxx。无解了吗?,当然是由解决办法的,下图:
componentWillReceiveProps里面直接 this.test(); 而 getDerivedStateFromProps是一个静态方法,调用是先实例化,在调用里面的方法
new TeamScope(nextProps).test();
test 方法里就是平时的写法,ajax ,this.setState, this.props.disptch等等
好了,从此和 componentWillReceiveProps 说拜拜。