react中监听props的改变方式

react监听props的改变

componentWillReveiceProps

之前使用componentWillReveiceProps来实现组件更新阶段的通信

class xxx extends Component {
	/** 省略无关代码 **/
	componentWillReceiveProps (nextProps) {
    if (nextProps.sth !== this.props.sth) {
      // sth值发生改变下一步工作
    }
  }
}

此时React13.16.0已经被改成了UNSAFE_componentWillReceiveProps

从名字也能看出来官方是不建议使用这个钩子的，但是你非要用，所以就给你个大写的前缀告诉你这个钩子是UNSAFE不安全的。

UNSAFE_componentWillReceiveProps

使用方法和componentWillReveiceProps一样，只是官方给加了个前缀告诉你尽量不要用。

至于为何被抛弃了呢，是因为

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没有发生任何变化

像我这样，如果官方不建议用，那我肯定是要寻找它的替换方法了

既然官方取消了一个方法，自然会给出一个更推荐的方法。

getDerivedStateFromProps

// 当props发生变化后将值赋给当前组件的state变量
static getDerivedStateFromProps (nextProps, prevState) {
  return {
    curSth: nextProps.sth
  }
}

这里的curSth是定义在子组件内state上的变量，sth是通过在父组件中给子组件传进来的值，而return以后就会将父组件传进来的值赋值给子组件对应的变量上，也就是此时props已经改变了

如果此时进行下一步操作如果做呢？

componentDidUpdate () {
	// 当curSth被sth重新赋值后就可以在这里进行props被改变后的操作了
}

具体的实践案例在之前的一个文章中也有应用到，echarts折线图作为一个组件，当传入的值发生改变后来渲染echarts的绘制

→_→react中使用echarts，并实现tooltip循环轮播

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。