React 16 新特性

一、概述 二、新特性介绍

1. 生命周期函数

2. new Context API

3. React.createRef

4. react16 的其他更新点

三、参考文档

一、概述

为了更好的提升React的渲染效率，以适应接下来即将推出的异步渲染机制，React团队在react16中做出了一些较大的改动（尤其体现在生命周期函数这一块）。通过本文，你将了解到一些react16的新特性以及他们的用法特点，以下将主要围绕三个点来介绍react16。

• 新的生命周期函数

• 新的Context API

• 新的Ref API

二、 新特性介绍

1. 新的生命周期函数

为什么要更新？

官方提到一些传统组件生命周期会导致一些不安全的编码实践。他们是：

• componentWillMount

• componentWillReceiveProps

• componentWillUpdate

举个例子， 一些经验不足的开发者可能误将 事件绑定 和 异步获取数据 的代码放在 componentWillMount 中。导致：

• 服务端渲染会触发这一生命周期方法，但往往忽略数据的异步获取而白请求了；

• 因服务端不触发 componentWillMount 而无法取消事件监听，造成内存泄漏。

• 多次重复请求 或重复监听 也可能造成内存泄漏。

因此，react团队重新定义了这几个生命周期函数，以解决现有的对生命周期函数不规范操作带来的问题。

图示新老生命周期方法

以下给大家呈现一下新老生命周期的流程图对比，图2标红的部分是对现有生命周期函数的更新：

Before:

After:

从图中可以很清晰看到新的生命周期方法不仅更新了函数名，参数也有所变化，总结下来有以下三个更新：

1.1 弃用 3 个生命周期方法

• componentWillMount

• componentWillReceiveProps

• componentWillUpdate

官方正计划用新的生命周期方法来替换以上三个方法，这意味着咱们项目依赖升级带来时间上的的高迁移成本，先不用担心，react官方团队早已预想到这个问题，并给咱们的项目迁移预留了很长一段时间，他们的计划如下：

• React16.3版本：为不安全生命周期(以上三个函数)引入别名 UNSAFE_ 前缀

• 未来的16.x版本：对以上三个函数启用弃用警告。

• React17.0版本：删除这三个方法，即只有新的“UNSAFE_”生命周期名称将起作用。）

1.2 改变 1 个生命周期方法

• componentDidUpdate(prevProps, prevState, snapshot)

比较而言，componentDidUpdate生命周期方法只增加了一个参数snapshot，用于配合新增的getSnapshotBeforeUpdate方法来使用，是getSnapshotBeforeUpdate函数的返回结果，决定是否要更新组件状态

1.3 新增 2 个生命周期方法

• getDerivedStateFromProps(nextProps, prevState)

• getSnapshotBeforeUpdate(prevProps, prevState)

getDerivedStateFromProps

• 是一个静态函数

• 在组件实例化后以及接收新props后调用

• 返回一个新对象来更新state;

• 或返回null表示不需要state更新

• 用于替换componentWillReceiveProps

常见的componentWillReceiveProps 的用法是当检测到prop变化后更新状态、并请求数据，而 getDerivedStateFromProps最终返回一个非空对象或者null来决定需不需要更新state，当返回非空对象时候，触发componentDidUpdate执行相应的更新操作。

getSnapshotBeforeUpdate

为什么要引入这个生命周期函数？

1. componentWillUpdate 的常见用法是，在更新前记录 DOM 状态，结合更新后 componentDidUpdate 再次获取的 DOM 状态进行必要的处理。异步渲染的到来，使得 componentWillUpdate 的触发时机与 componentDidUpdate 的触发时机间隔较大，因为异步渲染随时可能暂缓这一组件的更新。这样一来，之前的做法将变得不够稳定，因为这间隔久到 DOM 可能因为用户行为发生了变化。

2. React 提供了 getSnapshotBeforeUpdate 。它的触发时机是 React 进行修改前（通常是更新 DOM）的“瞬间” ，这样一来在此获取到的 DOM 信息甚至比 componentWillUpdate 更加可靠。此外，它的返回值会作为第三个参数传入 componentDidUpdate ，这样做的好处很明显——开发者可以不必为了协调渲染前后状态之用而产生的数据保存在组件实例上，用完即可销毁

举个例子

2. 新的 Context API

提出这个api的背景

通常情况下，父子组件之间通信，数据需要通过props属性从父组件一级一级层层往下传递，对于组件之间嵌套很深的情况，是很不方便的，有了新的Context API,只需要少量的声明代码，就能轻易在多个不同层级的组件之间共享一份数据。

如何使用：

1.React.createContext创建上下文

const themeContext = React . createContext ( defaultValue )

• 以上代码将创建一对 { Provider, Consumer }。当 React 渲染 context 组件 Consumer 时，它将从组件树的上层中最接近的匹配的 Provider 读取当前的 context 值。如果没找到，则使用defaultValue。

2.Provider

<Provider value={/* some value */}>

• 以上代码用于声明一份数据的提供者，value属性用于Provider传递值给后代Consumers。

• 一个 Provider 可以联系到多个 Consumers

3.Consumer

< Consumer >

  {value => /* render something based on the context value */}

</Consumer>

• Consumers接收一个函数作为子节点。这个函数接收当前context的值并返回一个React节点。关于参数value，具有以下特点：

• value等于组件树上层context的最近Provider的value属性

• 如果context 没有 Provider ，那么 value 参数将等于被传递给 createContext() 的 defaultValue

举几个例子

• 基本用法

以上例子演示了咱们常见的父子组件之间的属性透传现象，给 Toolbar 组件传递value="dark"，透过中间嵌套组件Toolbar，组件渲染后找到最近的Provider最终拿到值为dark；而Brother组件没有被嵌套在Provider中，最终只能拿到默认值 React.createContext('light'); 中的light值

• 在生命周期函数中使用

export default props => (

    <ThemeContext.Consumer>

        {theme => <Button {...props} theme={theme} />}

    </ThemeContext.Consumer>

);

想要在组件的生命周期中使用上下文。很简单，只需要将它作为一个 props 传递，然后像通常使用 props 一样去使用它。

• 在高阶函数中使用 创建一个命名为 withTheme 高阶组件：

3. 新的Ref API

1. refs是什么？：

• Refs 提供了一种方式，用于访问在 render 方法中创建的 DOM 节点或 React 元素

2. 使用场景：

• 处理focus、文本选择或者媒体播放

• 触发强制动画

• 集成第三方DOM库

现有的两种ref方法

<input ref="myref"/>
<input ref={(ref)=>{this.myref=ref}}

新的api方法

• 创建： let inputRef=React.createRef()

• 使用： this.inputRef.current.xxx 看以下例子：

以上例子演示了点击button来给input设置获取焦点，通过 "current" 取得 DOM 节点，从而调用原生的focus()方法让输入框聚焦。

新api的使用范围：

• html元素：返回dom节点

• 自定义的类组件：返回该组件的实例

• 注意：不可以用于函数式组件上，因为它没有实例；但是可以用于函数组件内部，作用于dom元素；无状态组件挂载时只是方法调用，没有新建实例。

React16其实更新了很多api，由于篇幅有限，以上即为今天要介绍的三个新特性，更多新特性参考官方文档，以下简单列举了其中的一些更新

4. react16 的其他更新点：

• Fragment不增加额外节点聚合子元素列表

• error boundary处理错误组件

• setState传入null时不会再触发更新

• portals ：支持声明性地将子树渲染到另一个DOM节点

• 支持自定义DOM属性

• 渲染算法更新 React Fiber

三、参考

官方文档：react所有属性api

官方文档：React版本更新文档

官方文档：生命周期

官方文档：Context 

官方文档：Refs

官方文档：Fragment