react中监听props的改变方式
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
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循环轮播
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。
相关文章
关于react ant 组件 Select下拉框 值回显的问题
这篇文章主要介绍了关于react ant 组件 Select下拉框 值回显的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08react国际化化插件react-i18n-auto使用详解
这篇文章主要介绍了react国际化化插件react-i18n-auto使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-03-03React Native基础入门之初步使用Flexbox布局
React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案,下面这篇文章主要给大家介绍了关于React Native基础入门之初步使用Flexbox布局的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2018-07-07react-native ListView下拉刷新上拉加载实现代码
本篇文章主要介绍了react-native ListView下拉刷新上拉加载实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-08-08
最新评论