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循环轮播
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
解决React报错Cannot find namespace context
这篇文章主要为大家介绍了React报错Cannot find namespace context分析解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
rematch是对redux的二次封装，简化了redux是使用，极大的提高了开发体验，这篇文章主要介绍了React状态管理器Rematch的使用,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了react项目中使用插件配置路由的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03
在Ant Design Pro登录功能中集成图形验证码组件的方法步骤
这篇文章主要介绍了在Ant Design Pro登录功能中集成图形验证码组件的方法步骤，这里的登录功能其实就是一个表单提交，实现起来也很简单，具体实例代码跟随小编一起看看吧2021-05-05
条件渲染在React里就和js里的条件语句一样。下面这篇文章主要给大家介绍了关于React学习记录之条件渲染的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
React Native全面屏状态栏和底部导航栏适配教程详细讲解
最近在写 React Native 项目，调试应用时发现顶部状态栏和底部全面屏手势指示条区域不是透明的，看起来很难受。研究了一下这个问题，现在总结一下解决方案，这篇文章主要介绍了React Native全面屏状态栏和底部导航栏适配教程2023-01-01
在React类组件中,生命周期方法是非常重要的概念,它们允许我们在组件的不同阶段执行代码,这包括在组件挂载、更新以及卸载时执行的生命周期方法,本文通过介绍React类组件中的生命周期方法,旨在帮助开发者深入理解组件的生命周期管理2024-11-11
写react的时候，踩了几次坑发现setstate之后state不会立刻更新，于是判定setstate就是异步的方法，但是直到有一天，我想立刻拿到更新的state去传参另一个方法的时候，才问自己，为什么setstate是异步的？准确地说，在React内部机制能检测到的地方，setState就是异步的2022-10-10
这篇文章主要为大家介绍了React特征学习Form数据管理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要给大家介绍了关于react项目中@路径简单配置的相关资料,文中还介绍了React配置@路径别名的方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
最新评论