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 Native使用百度Echarts显示图表的示例代码
本篇文章主要介绍了React Native使用百度Echarts显示图表的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了如何应用 SOLID 原则整理 React 代码之单一原则,今天，我们将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React 组件，需要的朋友可以参考下2022-07-07
react中使用echarts,并实现tooltip循环轮播方式
这篇文章主要介绍了react中使用echarts,并实现tooltip循环轮播方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
React-hook-form-mui基本使用教程(入门篇)
react-hook-form-mui可以帮助开发人员更轻松地构建表单,它结合了React Hook Form和Material-UI组件库,使用react-hook-form-mui,开发人员可以更快速地构建表单,并且可以轻松地进行表单验证和数据处理,本文介绍React-hook-form-mui基本使用,感兴趣的朋友一起看看吧2024-02-02
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧2023-01-01
这篇文章主要为大家介绍了react编写可编辑标题示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
eslint的配置引入比较简单，网上有比较多的教程，而stylelint的教程大多语焉不详。在这里，我会介绍一下我在引入stylelint所遇到的坑，以及解决方法2021-11-11
React Hook Form是一个轻量、高性能、无依赖的表单库,它通过 React Hooks 提供简单直观的 API 来处理表单状态和验证,本文将详细介绍 React Hook Form 的功能、使用方法及其最佳实践,感兴趣的朋友一起看看吧2025-05-05
当我们要求渲染时间尽量快、页面响应速度快时就会用到服务端渲染，本篇文章主要介绍了React服务端渲染，有兴趣的可以了解一下2017-07-07
本文主要介绍了React应用中通过后端接口获取路由授权,实现动态和灵活的权限管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
最新评论