react 16.3版本出现了两个新的生命周期函数,并将逐渐废弃componentWillMount()、componentWillReceiveProps()、componentWillUpdate()

1、static getDerivedStateFromProps(props, state)

注意:

  最常见的误解就是 getDerivedStateFromProps 和 componentWillReceiveProps 只会在 props “改变”时才会调用。实际上只要父级重新渲染时,这两个生命周期函数就会重新调用,不管 props 有没有“变化”。

getDerivedStateFromProps 的存在只有一个目的:让组件在 props 变化时更新 state

名词“受控”“非受控”通常用来指代表单的 inputs,但是也可以用来描述数据频繁更新的组件。用 props 传入数据的话,组件可以被认为是受控(因为组件被父级传入的 props 控制)。数据只保存在组件内部的 state 的话,是非受控组件(因为外部没办法直接控制 state)

设计组件时,重要的是确定组件是受控组件还是非受控组件。在实际应用中,组件一般都会有受控组件和非受控组件。

任何数据,都要保证只有一个数据来源(明确的数据来源),而且避免直接复制它

constructor(props) {
super(props);
// 不要这样做
this.state = { color: props.color };
}
这种情况可能会造成数据来源不只一个(如果使用也setState更新color的话),并且可能会造成父组件props.color改变子组件state里的color并没有改变。解决方法是:(1)完全做成受控组件,不用state,由props进行控制(2)只有在你刻意忽略props更新的时候使用,应将 props.color 重命名为 props.initialColor 或 props.defaultColor非受控组件,后续更新完全由setState控制

不要直接复制(mirror) props 的值到 state 中,而是去实现一个受控的组件,然后在父组件里合并两个值。比如,不要在子组件里被动的接受 props.value 并跟踪一个临时的 state.value,而要在父组件里管理 state.draftValue 和 state.committedValue,直接控制子组件里的值。这样数据才更加明确可预测。

对于不受控的组件,当你想在 prop 变化(通常是 ID )时重置 state 的话,可以选择一下几种方式:

  • 建议: 重置内部所有的初始 state,使用 key 属性(当 key 变化时, React 会创建一个新的而不是更新一个既有的组件
  • 选项一:仅更改某些字段,观察特殊属性的变化(比如 props.userID)。
  • 选项二:使用 ref 调用实例方法

派生状态会导致代码冗余,并使组件难以维护。 确保你已熟悉这些简单的替代方案:

2、getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()

此用法并不常见,但它可能出现在 UI 处理中,如需要以特殊方式处理滚动位置的聊天线程等

react 16.3+ 新生命周期的更多相关文章

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

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

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

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

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

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

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

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

  5. react native组件的生命周期

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

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

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

  7. React Native 中 component 生命周期

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

  8. React 16.x 新特性思维导图

    React 16版本相对于以前的版本做了很大的改动,下面是我整理的React 16.x 新特性的思维导图文件,欢迎围观和指导:

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

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

随机推荐

  1. db2 连接数据库与断开数据库

    连接数据库: connect to db_name user db_user using db_pass 断开连接: connect  resetdisconnect current quit是退出交 ...

  2. 使用extract-text-webpack-plugin处理css文件路径问题

    首先看到我们的文件夹目录如下: webpack.config.js //解析分离cssconst ExtractTextPlugin = require('extract-text-webpack-p ...

  3. 创建Uboot 环境变量 bin 文件

    As we know, the bootloader stores its configuration into an area of the flash called the environment ...

  4. ArrayListMultimap

    遇到这样一个场景,就是要判断传过来的Lists里有几组相邻的元素,然后有多少个单一的元素,比如3,3,3,4,4,4,5,5,5,6,6,6,8,9,10,11 方法有很多,但是我选了ArrayLis ...

  5. cocos2D-X 屏幕适配

    { //https://v.youku.com/v_show/id_XNTIzOTM1MDYw.html }

  6. JavaScript设计模式小抄集(持续更新)

    前言 本文旨在记录JavaScript中常用的设计模式代码片段,简要说明使用场景,不过于追究细节.在设计模式开篇之前,还是先要搞清楚JavaScript中关于面向对象的基础知识,可以先看看JavaSc ...

  7. ubuntu配置px4编译环境

    一.主要参考的内容 px4的开发者手册 https://dev.px4.io/zh/setup/dev_env_linux.html 其中有的shell指令 权限设置 警告:永远不要使用sudo来修复 ...

  8. 【Flutter学习】基本组件之BottomNavigationBar底部导航栏

    一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...

  9. 第六周-Scrum Meeting

    第一部分ScrumMeeting 每个人的工作: 成员 任务 ISSUE链接 本周已完成的工作 本周计划完成的工作 工作中遇到的困难 李卓峻 负责商品信息页面的界面设计与功能实现 https://gi ...

  10. IP地址的定义和划分

    IP地址分类:                IP地址根据首首字节开始位可以分为5大类:             分类        首字节开始位         首字节数字范围           ...