【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 ...
随机推荐
- 第一章 初识Mysql
Mysql是一个开放源代码的数据库管理系统(DBMS),它是由MySQL AB 公司开发.发布并支持的. 登录 -- mysql #本地登录,默认用户root,空密码,用户为root@127.0.0. ...
- [SDOI2009]HH的项链-树状数组/线段树
树状数组: #include<bits/stdc++.h> using namespace std; ; int id[maxn],tree[maxn],vis[maxn],num[max ...
- goland 文件头自动注释
1 代码 /** * @Author: ${USER} * @Description: * @File: ${NAME} * @Version: 1.0.0 * @Date: ${DATE} ${TI ...
- poj 3268 Silver Cow Party(最短路dijkstra)
描述: One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to attend the bi ...
- Nodejs安装(npm、cnpm、webpack)
1.nodejs官网对应下载(我的电脑对应的是64位的).https://nodejs.org/en/download/ 2.下载之后开始安装: 点击next按钮 点击next 点击next,进入下边 ...
- python之可变长参数
参数组:*args,**kwargs 实参有按位置和按关键字两种形式定义,*args和**kwargs 位置参数:按照从左到右的顺序定义的参数 位置形参:必选参数 位置实参:按照位置给形参传值 关键字 ...
- python Request模块
---恢复内容开始--- Request的五种请求方式: request.get() request.post() request.head() requst.put() request.patch( ...
- Javal连接字符串为Json
public static String concatJson(String[] keys,String[] values,String[] alreadyJsonKeys){ if(keys==nu ...
- ASP.NET Core快速入门学习笔记(第1章:介绍与引入)
课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 任务1:课程介绍 任务2:环境安装 下载地址:https://dotnet.m ...
- 20165235 实现pwd功能
20165235 实现pwd功能 要求 学习pwd命令 2.研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3.实现mypwd 测试mypwd 实现过程 pwd是将当前的文件目录 ...