componentWillReceiveProps代替方案
# 简介
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;
getDerivedStateFromProps 不能直接this.xxx。无解了吗?,当然是由解决办法的
componentWillReceiveProps里面直接 this.test(); 而 getDerivedStateFromProps是一个静态方法,调用是先实例化,在调用里面的方法
new TeamScope(nextProps).test();
test 方法里就是平时的写法,ajax ,this.setState, this.props.disptch等等
# 为什么deprecated
官方文档(https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops)有一句是这样说的: Using this lifecycle method often leads to bugs and inconsistencies, and for that reason it is going to be deprecated in the future.
到底有哪些bugs和inconsistencies呢?文档里面有这样一句话: Note that if a parent component causes your component to re-render, this method will be called even if props have not changed. Make sure to compare the current and next values if you only want to handle changes.
即:只要父组件引起了你的组件的 重新render,你的组件就会触发componentWillReceiveProps方法,即使你组件接收的props没有发生任何变化。