摘要：引言于發(fā)布版本，時至今日已更新到，且引入了大量的令人振奮的新特性，本文章將帶領(lǐng)大家根據(jù)更新的時間脈絡(luò)了解的新特性。其作用是根據(jù)傳遞的來更新。新增等指針事件。

于 2017.09.26 Facebook 發(fā)布 React v16.0 版本，時至今日已更新到 React v16.6，且引入了大量的令人振奮的新特性，本文章將帶領(lǐng)大家根據(jù) React 更新的時間脈絡(luò)了解 React16 的新特性。

按照 React16 的更新時間，從 React v16.0 ~ React v16.6 進(jìn)行概述。

React v16.0

render 支持返回數(shù)組和字符串、Error Boundaries、createPortal、支持自定義 DOM 屬性、減少文件體積、fiber；

React v16.1

react-call-return；

React v16.2

Fragment；

React v16.3

createContext、createRef、forwardRef、生命周期函數(shù)的更新、Strict Mode；

React v16.4

Pointer Events、update getDerivedStateFromProps；

React v16.5

Profiler；

React v16.6

memo、lazy、Suspense、static contextType、static getDerivedStateFromError()；

React v16.7（~Q1 2019）

Hooks；

React v16.8（~Q2 2019）

Concurrent Rendering；

React v16.9（~mid 2019）

Suspense for Data Fetching；

下面將按照上述的 React16 更新路徑對每個新特性進(jìn)行詳細(xì)或簡短的解析。

// 不需要再將元素作為子元素裝載到根元素下面
render() {
  return [
    
1
,
    
2
,
    
3
,
  ];
}

React15 在渲染過程中遇到運(yùn)行時的錯誤，會導(dǎo)致整個 React 組件的崩潰，而且錯誤信息不明確可讀性差。React16 支持了更優(yōu)雅的錯誤處理策略，如果一個錯誤是在組件的渲染或者生命周期方法中被拋出，整個組件結(jié)構(gòu)就會從根節(jié)點(diǎn)中卸載，而不影響其他組件的渲染，可以利用 error boundaries 進(jìn)行錯誤的優(yōu)化處理。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  componentDidCatch(error, info) {
    this.setState({ hasError: true });

    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      return 
數(shù)據(jù)錯誤
;
    }
    
    return this.props.children;
  }
}

createPortal 的出現(xiàn)為 彈窗、對話框 等脫離文檔流的組件開發(fā)提供了便利，替換了之前不穩(wěn)定的 API unstable_renderSubtreeIntoContainer，在代碼使用上可以做兼容，如：

const isReact16 = ReactDOM.createPortal !== undefined;

const getCreatePortal = () =>
  isReact16
    ? ReactDOM.createPortal
    : ReactDOM.unstable_renderSubtreeIntoContainer;

使用 createPortal 可以快速創(chuàng)建 Dialog 組件，且不需要牽扯到 componentDidMount、componentDidUpdate 等生命周期函數(shù)。

并且通過 createPortal 渲染的 DOM，事件可以從 portal 的入口端冒泡上來，如果入口端存在 onDialogClick 等事件，createPortal 中的 DOM 也能夠被調(diào)用到。

import React from "react";
import { createPortal } from "react-dom";

class Dialog extends React.Component {
  constructor() {
    super(props);

    this.node = document.createElement("div");
    document.body.appendChild(this.node);
  }

  render() {
    return createPortal(
      

        {this.props.children}
      
,
      this.node
    );
  }
}

以前的 React 版本 DOM 不識別除了 HTML 和 SVG 支持的以外屬性，在 React16 版本中將會把全部的屬性傳遞給 DOM 元素。這個新特性可以讓我們擺脫可用的 React DOM 屬性白名單。筆者之前寫過一個方法，用于過濾非 DOM 屬性 filter-react-dom-props，16 之后即可不再需要這樣的方法。

React16 使用 Rollup 針對不同的目標(biāo)格式進(jìn)行代碼打包，由于打包工具的改變使得庫文件大小得到縮減。

React 庫大小從 20.7kb（壓縮后 6.9kb）降低到 5.3kb（壓縮后 2.2kb）

ReactDOM 庫大小從 141kb（壓縮后 42.9kb）降低到 103.7kb（壓縮后 32.6kb）

React + ReactDOM 庫大小從 161.7kb（壓縮后 49.8kb）降低到 109kb（壓縮后 43.8kb）

Fiber 是對 React 核心算法的一次重新實(shí)現(xiàn)，將原本的同步更新過程碎片化，避免主線程的長時間阻塞，使應(yīng)用的渲染更加流暢。

在 React16 之前，更新組件時會調(diào)用各個組件的生命周期函數(shù)，計算和比對 Virtual DOM，更新 DOM 樹等，這整個過程是同步進(jìn)行的，中途無法中斷。當(dāng)組件比較龐大，更新操作耗時較長時，就會導(dǎo)致瀏覽器唯一的主線程都是執(zhí)行組件更新操作，而無法響應(yīng)用戶的輸入或動畫的渲染，很影響用戶體驗(yàn)。

Fiber 利用分片的思想，把一個耗時長的任務(wù)分成很多小片，每一個小片的運(yùn)行時間很短，在每個小片執(zhí)行完之后，就把控制權(quán)交還給 React 負(fù)責(zé)任務(wù)協(xié)調(diào)的模塊，如果有緊急任務(wù)就去優(yōu)先處理，如果沒有就繼續(xù)更新，這樣就給其他任務(wù)一個執(zhí)行的機(jī)會，唯一的線程就不會一直被獨(dú)占。

因此，在組件更新時有可能一個更新任務(wù)還沒有完成，就被另一個更高優(yōu)先級的更新過程打斷，優(yōu)先級高的更新任務(wù)會優(yōu)先處理完，而低優(yōu)先級更新任務(wù)所做的工作則會完全作廢，然后等待機(jī)會重頭再來。所以 React Fiber 把一個更新過程分為兩個階段：

第一個階段 Reconciliation Phase，F(xiàn)iber 會找出需要更新的 DOM，這個階段是可以被打斷的；

第二個階段 Commit Phase，是無法別打斷，完成 DOM 的更新并展示；

在使用 Fiber 后，需要要檢查與第一階段相關(guān)的生命周期函數(shù)，避免邏輯的多次或重復(fù)調(diào)用：

componentWillMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

與第二階段相關(guān)的生命周期函數(shù)：

componentDidMount

componentDidUpdate

componentWillUnmount

react-call-return 目前還是一個獨(dú)立的 npm 包，主要是針對 父組件需要根據(jù)子組件的回調(diào)信息去渲染子組件場景 提供的解決方案。

在 React16 之前，針對上述場景一般有兩個解決方案：

首先讓子組件初始化渲染，通過回調(diào)函數(shù)把信息傳給父組件，父組件完成處理后更新子組件 props，觸發(fā)子組件的第二次渲染才可以解決，子組件需要經(jīng)過兩次渲染周期，可能會造成渲染的抖動或閃爍等問題；

首先在父組件通過 children 獲得子組件并讀取其信息，利用 React.cloneElement 克隆產(chǎn)生新元素，并將新的屬性傳遞進(jìn)去，父組件 render 返回的是克隆產(chǎn)生的子元素。雖然這種方法只需要使用一個生命周期，但是父組件的代碼編寫會比較麻煩；

React16 支持的 react-call-return，提供了兩個函數(shù) unstable_createCall 和 unstable_createReturn，其中 unstable_createCall 是 父組件使用，unstable_createReturn 是 子組件使用，父組件發(fā)出 Call，子組件響應(yīng)這個 Call，即 Return。

在父組件 render 函數(shù)中返回對 unstable_createCall 的調(diào)用，第一個參數(shù)是 props.children，第二個參數(shù)是一個回調(diào)函數(shù)，用于接受子組件響應(yīng) Call 所返回的信息，第三個參數(shù)是 props；

在子組件 render 函數(shù)返回對 unstable_createReturn 的調(diào)用，參數(shù)是一個對象，這個對象會在unstable_createCall 第二個回調(diào)函數(shù)參數(shù)中訪問到；

當(dāng)父組件下的所有子組件都完成渲染周期后，由于子組件返回的是對 unstable_createReturn 的調(diào)用所以并沒有渲染元素，unstable_createCall 的第二個回調(diào)函數(shù)參數(shù)會被調(diào)用，這個回調(diào)函數(shù)返回的是真正渲染子組件的元素；

針對普通場景來說，react-call-return 有點(diǎn)過度設(shè)計的感覺，但是如果針對一些特定場景的話，它的作用還是非常明顯，比如，在渲染瀑布流布局時，利用 react-call-return 可以先緩存子組件的 ReactElement，等必要的信息足夠之后父組件再觸發(fā) render，完成渲染。

import React from "react";
import { unstable_createReturn, unstable_createCall } from "react-call-return";

const Child = (props) => {
  return unstable_createReturn({
    size: props.children.length,
    renderItem: (partSize, totalSize) => {
      return 
{ props.children } { partSize } / { totalSize }
;
    }
  });
};

const Parent = (props) => {
  return (
    

      {
        unstable_createCall(
          props.children,
          (props, returnValues) => {
            const totalSize = returnValues.map(v => v.size).reduce((a, b) => a + b, 0);
            return returnValues.map(({ size, renderItem }) => {
              return renderItem(size, totalSize);
            });
          },
          props
        )
      }
    
  );
};

Fragment 組件其作用是可以將一些子元素添加到 DOM tree 上且不需要為這些元素提供額外的父節(jié)點(diǎn)，相當(dāng)于 render 返回數(shù)組元素。

render() {
  return (
    
      Some text.
      
A heading
      More text.
      
Another heading
      Even more text.
    
  );
}

全新的 Context API 可以很容易穿透組件而無副作用，其包含三部分：React.createContext，Provider，Consumer。

React.createContext 是一個函數(shù)，它接收初始值并返回帶有 Provider 和 Consumer 組件的對象；

Provider 組件是數(shù)據(jù)的發(fā)布方，一般在組件樹的上層并接收一個數(shù)據(jù)的初始值；

Consumer 組件是數(shù)據(jù)的訂閱方，它的 props.children 是一個函數(shù)，接收被發(fā)布的數(shù)據(jù)，并且返回 React Element；

const ThemeContext = React.createContext("light");

class ThemeProvider extends React.Component {
  state = {theme: "light"};

  render() {
    return (
      
        {this.props.children}
      
    );
  }
}

class ThemedButton extends React.Component {
  render() {
    return (
      
        {theme => }
      
    );
  }
}

React16 規(guī)范了 Ref 的獲取方式，通過 React.createRef 取得 Ref 對象。

// before React 16
···

  componentDidMount() {
    const el = this.refs.myRef
  }

  render() {
    return 

  }

···

// React 16+
  constructor(props) {
    super(props)
    
    this.myRef = React.createRef()
  }

  render() {
    return 

  }
···

React.forwardRef 是 Ref 的轉(zhuǎn)發(fā), 它能夠讓父組件訪問到子組件的 Ref，從而操作子組件的 DOM。 React.forwardRef 接收一個函數(shù)，函數(shù)參數(shù)有 props 和 ref。

const TextInput = React.forwardRef((props, ref) => (
  
))

const inputRef = React.createRef()

class App extends Component {
  constructor(props) {
    super(props)
    
    this.myRef = React.createRef()
  }

  handleSubmit = event => {
    event.preventDefault()
    
    alert("input value is:" + inputRef.current.value)
  }
  
  render() {
    return (
      

        
        Submit
      
    )
  }
}

React16 采用了新的內(nèi)核架構(gòu) Fiber，F(xiàn)iber 將組件更新分為兩個階段：Render Parse 和 Commit Parse，因此 React 也引入了 getDerivedStateFromProps 、 getSnapshotBeforeUpdate 及 componentDidCatch 等三個全新的生命周期函數(shù)。同時也將 componentWillMount、componentWillReceiveProps 和 componentWillUpdate 標(biāo)記為不安全的方法。

getDerivedStateFromProps(nextProps, prevState) 其作用是根據(jù)傳遞的 props 來更新 state。它的一大特點(diǎn)是無副作用，由于處在 Render Phase 階段，所以在每次的更新都會觸發(fā)該函數(shù)， 在 API 設(shè)計上采用了靜態(tài)方法，使其無法訪問實(shí)例、無法通過 ref 訪問到 DOM 對象等，保證了該函數(shù)的純粹高效。

為了配合未來的 React 異步渲染機(jī)制，React v16.4 對 getDerivedStateFromProps 做了一些改變， 使其不僅在 props 更新時會被調(diào)用，setState 時也會被觸發(fā)。

如果改變 props 的同時，有副作用的產(chǎn)生，這時應(yīng)該使用 componentDidUpdate；

如果想要根據(jù) props 計算屬性，應(yīng)該考慮將結(jié)果 memoization 化；

如果想要根據(jù) props 變化來重置某些狀態(tài)，應(yīng)該考慮使用受控組件；

static getDerivedStateFromProps(props, state) {
  if (props.value !== state.controlledValue) {
    return {
      controlledValue: props.value,
    };
  }
  
  return null;
}

getSnapshotBeforeUpdate(prevProps, prevState) 會在組件更新之前獲取一個 snapshot，并可以將計算得的值或從 DOM 得到的信息傳遞到 componentDidUpdate(prevProps, prevState, snapshot) 函數(shù)的第三個參數(shù)，常常用于 scroll 位置定位等場景。

componentDidCatch 函數(shù)讓開發(fā)者可以自主處理錯誤信息，諸如錯誤展示，上報錯誤等，用戶可以創(chuàng)建自己的 Error Boundary 來捕獲錯誤。

componentWillMount 被標(biāo)記為不安全，因?yàn)樵?componentWillMount 中獲取異步數(shù)據(jù)或進(jìn)行事件訂閱等操作會產(chǎn)生一些問題，比如無法保證在 componentWillUnmount 中取消掉相應(yīng)的事件訂閱，或者導(dǎo)致多次重復(fù)獲取異步數(shù)據(jù)等問題。

componentWillReceiveProps / componentWillUpdate 被標(biāo)記為不安全，主要是因?yàn)椴僮?props 引起的 re-render 問題，并且對 DOM 的更新操作也可能導(dǎo)致重新渲染。

StrictMode 可以在開發(fā)階段開啟嚴(yán)格模式，發(fā)現(xiàn)應(yīng)用存在的潛在問題，提升應(yīng)用的健壯性，其主要能檢測下列問題：

識別被標(biāo)志位不安全的生命周期函數(shù)

對棄用的 API 進(jìn)行警告

探測某些產(chǎn)生副作用的方法

檢測是否使用 findDOMNode

檢測是否采用了老的 Context API

class App extends React.Component {
  render() {
    return (
      

        
          
        
      
    )
  }
}

指針事件是為指針設(shè)備觸發(fā)的 DOM 事件。它們旨在創(chuàng)建單個 DOM 事件模型來處理指向輸入設(shè)備，例如鼠標(biāo)，筆 / 觸控筆或觸摸（例如一個或多個手指）。指針是一個與硬件無關(guān)的設(shè)備，可以定位一組特定的屏幕坐標(biāo)。擁有指針的單個事件模型可以簡化創(chuàng)建 Web 站點(diǎn)和應(yīng)用程序，并提供良好的用戶體驗(yàn)，無論用戶的硬件如何。但是，對于需要特定于設(shè)備的處理的場景，指針事件定義了一個 pointerType 屬性，用于檢查產(chǎn)生事件的設(shè)備類型。

React 新增 onPointerDown / onPointerMove / onPointerUp / onPointerCancel / onGotPointerCapture / onLostPointerCapture / onPointerEnter / onPointerLeave / onPointerOver / onPointerOut 等指針事件。

這些事件只能在支持 指針事件 規(guī)范的瀏覽器中工作。如果應(yīng)用程序依賴于指針事件，建議使用第三方指針事件 polyfill。

React 16.5 添加了對新的 profiler DevTools 插件的支持。這個插件使用 React 的 Profiler 實(shí)驗(yàn)性 API 去收集所有 component 的渲染時間，目的是為了找出 React App 的性能瓶頸，它將會和 React 即將發(fā)布的 時間片 特性完全兼容。

React.memo() 只能作用在簡單的函數(shù)組件上，本質(zhì)是一個高階函數(shù)，可以自動幫助組件執(zhí)行shouldComponentUpdate()，但只是執(zhí)行淺比較，其意義和價值有限。

const MemoizedComponent = React.memo(props => {
  /* 只在 props 更改的時候才會重新渲染 */
});

React.lazy() 提供了動態(tài) import 組件的能力，實(shí)現(xiàn)代碼分割。

Suspense 作用是在等待組件時 suspend（暫停）渲染，并顯示加載標(biāo)識。

目前 React v16.6 中 Suspense 只支持一個場景，即使用 React.lazy() 和 實(shí)現(xiàn)的動態(tài)加載組件。

import React, {lazy, Suspense} from "react";
const OtherComponent = lazy(() => import("./OtherComponent"));

function MyComponent() {
  return (
    Loading...