【react】---17新增的生命周期
一、废除的生命周期
官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug
,尤其是对于异步渲染的版本
由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数
componentWillMount
componentWillRecieveProps
componentWIllUpdate
二、新增的生命周期
static getDerivedStateFromProps(nextProps, prevState) {}
[dɪ'raɪvd]
用于替换componentWillReceiveProps,可以用来控制 props 更新 state 的过程;它返回一个对象表示新的 state;如果不需要更新,返回 null 即可
在每次渲染之前都会调用,不管初始挂载还是后面的更新都会调用,这一点和componentWillReceiveProps
不同(只有当父组件造成重新渲染时才调用),每次都应该返回一个对象作为
getSnapshotBeforeUpdate() {}
[ˈsnæpʃɑ:t]
用于替换 componentWillUpdate,该函数会在update后 DOM 更新前被调用,用于读取最新的 DOM 数据,返回值将作为 componentDidUpdate 的第三个参数
在最新的渲染数据提交给DOM前会立即调用,它让你在组件的数据可能要改变之前获取他们
componendDidCatch(error, info)
如果一个组件定义了componentDidCatch
生命周期,则他将成为一个错误边界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误,
就像使用了try catch
,不会将错误直接抛出了,保证应用的可用性)
三、基本使用
class A extends React.Component {
// 用于初始化 state
constructor() {}
// 用于替换 `componentWillReceiveProps` ,该函数会在初始化和 `update` 时被调用
// 因为该函数是静态函数,所以取不到 `this`
// 如果需要对比 `prevProps` 需要单独在 `state` 中维护
static getDerivedStateFromProps(nextProps, prevState) {}
// 判断是否需要更新组件,多用于组件性能优化
shouldComponentUpdate(nextProps, nextState) {}
// 组件挂载后调用
// 可以在该函数中进行请求或者订阅
componentDidMount() {}
// 用于获得最新的 DOM 数据
getSnapshotBeforeUpdate() {}
// 组件即将销毁
// 可以在此处移除订阅,定时器等等
componentWillUnmount() {}
// 组件销毁后调用
componentDidUnMount() {}
// 组件更新后调用
componentDidUpdate() {}
// 渲染组件函数
render() {}
}
【react】---17新增的生命周期的更多相关文章
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- react实战 系列 —— React 的数据流和生命周期
其他章节请看: react实战 系列 数据流和生命周期 如何处理 React 中的数据,组件之间如何通信,数据在 React 中如何流动? 常用的 React 生命周期方法以及开源项目 spug 中使 ...
- reactjs入门到实战(七)---- React的组件的生命周期
React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他 getInitia ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
- 【RN - 基础】之React Native组件的生命周期
下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...
- React Native 中 component 生命周期
React Native 中 component 生命周期 转自 csdn 子墨博客 http://blog.csdn.net/ElinaVampire/article/details/518136 ...
- react 16.3+ 新生命周期 作业
1.有哪些⽣命周期被舍弃(3个),哪些⽣命 周期是新增(2个)? componentWillMount().componentWillReceiveProps().componentWillUpdat ...
- React(v16.8.4)生命周期详解
当前版本v16.8.4 装载过程(组件第一次在DOM树中渲染的过程): constructor(常用) -> getInitialState(v16.0已废弃) -> getDefault ...
随机推荐
- windows 2012 如何设置取消禁拼ping
直接上操作方法: 开始——搜索——高级安全windows防火墙——入站规则找到“文件和打印机共享(回显请求-ICMPv4-in)”右击……选择“启用规则”就OK了! 如果用到IPV6.后面也有 “文件 ...
- WPF 10天修炼 第四天- WPF布局容器
WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...
- vue请求网络图片403错误,图片有占位但是显示不出来解决办法
在index.html 增加一个meta标签 <meta name="referrer" content="no-referrer" />
- Java软件工程的弹幕调试原则
日期:2019.4.25 博客期:054 星期四 今天是把很久之前的那个相关程序——一维数组的最大和的子数组的求取信息,我们今天的任务就是把每一步的信息都要进行输出查看! 如下图: package p ...
- centos搭建git服务
一.服务器yum -y install git git init --bare test.gitcd test.gitpwd //打印当前目录,假设是:/home/root/git/test.gitg ...
- swoole框架基本总结
框架-Swoole扩展-Swoole文档中心 http://wiki.swoole.com/wiki/page/p-framework.html swoole有两个部分. 一个是PHP扩展,用C开发的 ...
- jQuery的deferred对象解析
参考: jQuery的deferred对象详解:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_defe ...
- day19其他模块
collections模块 详细内容 http://www.cnblogs.com/Eva-J/articles/7291842.html 1.namedtuple: 生成可以使用名字来访问元素内容的 ...
- org.springframework.web.context.ContextLoaderListener 解决方案
tomcat启动项目报错,没找到这个类 我直接下了一个spring-web-4.3.8.RELEASE.jar 的 jar 包方到web-inf目录下.问题解决. 补充: 如果在检查了项目 jar 环 ...
- 史上最全的select加锁分析(Mysql)
引言 大家在面试中有没遇到面试官问你下面六句Sql的区别呢 select * from table where id = ? select * from table where id < ? s ...