一、废除的生命周期

  官网文档指出使用这些生命周期的代码会在未来版本的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新增的生命周期的更多相关文章

  1. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  2. react实战 系列 —— React 的数据流和生命周期

    其他章节请看: react实战 系列 数据流和生命周期 如何处理 React 中的数据,组件之间如何通信,数据在 React 中如何流动? 常用的 React 生命周期方法以及开源项目 spug 中使 ...

  3. reactjs入门到实战(七)---- React的组件的生命周期

    React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他     getInitia ...

  4. react native组件的生命周期

    react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...

  5. Android React Native组件的生命周期及回调函数

    熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...

  6. 【RN - 基础】之React Native组件的生命周期

    下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...

  7. React Native 中 component 生命周期

    React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/518136 ...

  8. react 16.3+ 新生命周期 作业

    1.有哪些⽣命周期被舍弃(3个),哪些⽣命 周期是新增(2个)? componentWillMount().componentWillReceiveProps().componentWillUpdat ...

  9. React(v16.8.4)生命周期详解

    当前版本v16.8.4 装载过程(组件第一次在DOM树中渲染的过程): constructor(常用) -> getInitialState(v16.0已废弃) -> getDefault ...

随机推荐

  1. 第一章 初识Mysql

    Mysql是一个开放源代码的数据库管理系统(DBMS),它是由MySQL AB 公司开发.发布并支持的. 登录 -- mysql #本地登录,默认用户root,空密码,用户为root@127.0.0. ...

  2. [SDOI2009]HH的项链-树状数组/线段树

    树状数组: #include<bits/stdc++.h> using namespace std; ; int id[maxn],tree[maxn],vis[maxn],num[max ...

  3. goland 文件头自动注释

    1 代码 /** * @Author: ${USER} * @Description: * @File: ${NAME} * @Version: 1.0.0 * @Date: ${DATE} ${TI ...

  4. 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 ...

  5. Nodejs安装(npm、cnpm、webpack)

    1.nodejs官网对应下载(我的电脑对应的是64位的).https://nodejs.org/en/download/ 2.下载之后开始安装: 点击next按钮 点击next 点击next,进入下边 ...

  6. python之可变长参数

    参数组:*args,**kwargs 实参有按位置和按关键字两种形式定义,*args和**kwargs 位置参数:按照从左到右的顺序定义的参数 位置形参:必选参数 位置实参:按照位置给形参传值 关键字 ...

  7. python Request模块

    ---恢复内容开始--- Request的五种请求方式: request.get() request.post() request.head() requst.put() request.patch( ...

  8. Javal连接字符串为Json

    public static String concatJson(String[] keys,String[] values,String[] alreadyJsonKeys){ if(keys==nu ...

  9. ASP.NET Core快速入门学习笔记(第1章:介绍与引入)

    课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 任务1:课程介绍 任务2:环境安装 下载地址:https://dotnet.m ...

  10. 20165235 实现pwd功能

    20165235 实现pwd功能 要求 学习pwd命令 2.研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3.实现mypwd 测试mypwd 实现过程 pwd是将当前的文件目录 ...