摘要：的返回值將作為的參數(shù)，如果返回，則不更新，不能返回或以外的值，否則會(huì)警告。在更新之前調(diào)用，此時(shí)已更新返回值作為的第個(gè)參數(shù)一般用于獲取之前的數(shù)據(jù)語(yǔ)法是從的返回值，默認(rèn)是的使用場(chǎng)景一般是獲取組建更新之前的滾動(dòng)條位置。

React16 后的各功能點(diǎn)是多個(gè)版本陸陸續(xù)續(xù)迭代增加的，本篇文章的講解是建立在 16.6.0 版本上
本篇文章主旨在介紹 React16 之后版本中新增或修改的地方，所以對(duì)于 React16 之前版本的功能，本篇文章當(dāng)作您已充分了解了，不再贅述

從 React v16.0 ~ React v16.6 的更新概覽（只涉及部分常用api）：

React v16.0

render支持返回?cái)?shù)組和字符串

支持自定義 DOM 屬性

減少文件體積

React v16.3

createContext

createRef

生命周期函數(shù)的更新

React v16.4

更新 getDerivedStateFromProps

React v16.6

memo

lazy

Suspense

static contextType

static getDerivedStateFromError

React v16.7（~Q1 2019）

Hooks

接下來(lái)將針對(duì)影響較大，使用頻率較高的更新點(diǎn)逐一講解。

我們知道，對(duì) React 組件的性能優(yōu)化，shouldComponentUpdate函數(shù)是很重要的一啪，所以 React 才會(huì)在 React.Component的基礎(chǔ)上增加了React.PureComponent，但是對(duì)于非class類的純函數(shù)寫法，卻沒(méi)法增加這樣的便捷處理。
對(duì)于這個(gè)問(wèn)題，React16.6 增加了React.memo這個(gè)高階組件

一般使用方式：

const C = React.memo(props => {
  // xxx
})

React.memo的實(shí)現(xiàn)類似React.PureComponent，所以它內(nèi)部是對(duì)對(duì)象進(jìn)行淺比較。
React.memo允許你自定義比較方法，如下：

// 函數(shù)的返回值為 true 時(shí)則更新組件，反之則不更新
const equalMethod = (prevProps, nextProps): boolean => {
  // 定義你的比較邏輯
}
const C = React.memo(props => {
  // xxx
}, equalMethod)

React生命周期分為三個(gè)階段：掛載、更新、卸載，React16后又多了一個(gè)異常，我們一一看下。

constructor

static getDerivedStateFromProps

render

componentDidMount

render和componentDidMount較 React16 之前無(wú)變化。對(duì)于掛載過(guò)程，我們著重看下constructor、componentWillMount和static getDerivedStateFromProps。

初始化 state
注意：應(yīng)避免使用props給state賦值，這樣的話， state的初始化可以提到constructor外面處理

constructor(props) {
  super(props);
  this.state = {
    x: 1,
    // y: props.y, // 避免這樣做，后面我們會(huì)講應(yīng)該怎樣處理
  }
}

給方法綁定this

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

但是，以上兩件事放到constructor外面處理會(huì)更簡(jiǎn)單些，如下：

class C extends React.Component {
  state = {
    x: 1
  }
  handleClick = (e) => {
    // xxx
  }
}

所以，React16 以后用到constructor的場(chǎng)景會(huì)變少。

可以看到，componentWillMount在 React16 中被“刪掉”了（這樣說(shuō)其實(shí)是有問(wèn)題的，因?yàn)?React 并未真正刪除該生命周期函數(shù)，只是告誡開(kāi)發(fā)者，該函數(shù)在未來(lái)版本中會(huì)被廢棄掉），那么問(wèn)題就出現(xiàn)了，原先在這個(gè)生命周期中的做的事情，現(xiàn)在該放到哪里去做呢？

首先問(wèn)自己一個(gè)問(wèn)題，原先的時(shí)候都在這個(gè)生命周期里做什么？答案是大部分時(shí)候會(huì)在這里做 AJAX 請(qǐng)求，然后執(zhí)行setState重新渲染。

然而在componentWillMount里做 AJAX 請(qǐng)求實(shí)在不是一個(gè)明智之舉，因?yàn)閷?duì)于同構(gòu)項(xiàng)目中，componentWillMount是會(huì)被調(diào)用的。

還有人會(huì)在這里面初始化state，關(guān)于state的初始化，請(qǐng)參看樓上小節(jié)。

綜上所述，componentWillMount其實(shí)本來(lái)沒(méi)有什么主要作用，如果你的代碼規(guī)范，去掉的話，不會(huì)對(duì)現(xiàn)在的項(xiàng)目產(chǎn)生什么影響。

上面我們講到，應(yīng)避免使用props給state賦值，但是在 React16 前我們都是這么做的，現(xiàn)在如果不讓這么操作了，那該在哪里處理這塊邏輯呢？ React16 給出的答案就是 static getDerivedStateFromProps。
掛載組件時(shí)，該靜態(tài)方法會(huì)在render前執(zhí)行；更新組件時(shí)，該靜態(tài)方法會(huì)在shouldComponentUpdate前執(zhí)行。

class C extends React.Component {
  state = {
    y: 0
  }
  static getDerivedStateFromProps(props, state): State {
    if(props.y !== state.y) {
      return {
        y: props.y
      };
    }
  }
}

getDerivedStateFromProps的返回值將作為setState的參數(shù)，如果返回null，則不更新state，不能返回object 或 null 以外的值，否則會(huì)警告。

getDerivedStateFromProps是一個(gè)靜態(tài)方法，是拿不到實(shí)例this的，所以開(kāi)發(fā)者應(yīng)該將該函數(shù)設(shè)計(jì)成純函數(shù)。

這樣，有沒(méi)有發(fā)現(xiàn)componentWillReceiveProps也就沒(méi)有用武之地了？是的，React16 把它也“刪掉”了（這樣說(shuō)其實(shí)是有問(wèn)題的，因?yàn)?react 并未真正刪除該生命周期函數(shù)，只是告誡開(kāi)發(fā)者，該函數(shù)在未來(lái)版本中會(huì)被廢棄掉，建議使用更好的getSnapshotBeforeUpdate 或 getDerivedStateFromProps）

static getDerivedStateFromProps

shouldComponentUpdate

render

getSnapshotBeforeUpdate

componentDidUpdate

static getDerivedStateFromProps前面已經(jīng)介紹過(guò)了，而其他的幾個(gè)生命周期函數(shù)與 React16 之前基本無(wú)異，所以這里主要介紹下getSnapshotBeforeUpdate。

在 React 更新 DOM 之前調(diào)用，此時(shí)state已更新；
返回值作為componentDidUpdate的第3個(gè)參數(shù)；
一般用于獲取render之前的 DOM 數(shù)據(jù)

語(yǔ)法：

class C extends React.Component {
  getSnapshotBeforeUpdate (prevProps, prevState): Snapshot {
    
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    // snapshot 是從 getSnapshotBeforeUpdate 的返回值，默認(rèn)是 null
  }
}

getSnapshotBeforeUpdate 的使用場(chǎng)景一般是獲取組建更新之前的滾動(dòng)條位置。

componentWillUnmount

較之前無(wú)變化。

componentDidCatch 這個(gè)函數(shù)是 React16 新增的，用于捕獲組件樹的異常，如果render()函數(shù)拋出錯(cuò)誤，則會(huì)觸發(fā)該函數(shù)?？梢园凑?try catch 來(lái)理解和使用，在可能出現(xiàn)錯(cuò)誤的地方，使用封裝好的包含 componentDidCatch 生命周期的組建包裹可能出錯(cuò)的組件。

class PotentialError extends React.Component {
  state = {
    error: false,
  }
  componentDidCatch(error, info) {
    console.error(info);
    this.setState({
      error
    });
  }
  render() {
    if (this.state.error) {
      return 
出錯(cuò)了，請(qǐng)打卡控制臺(tái)查看詳細(xì)錯(cuò)誤！
;
    }
    return this.props.children;   
  } 
}

如：

const Demo = () => (
  
    
{{a: 1}}
  
)

這樣，Demo 組件即使直接使用對(duì)象作為子組件也不會(huì)報(bào)錯(cuò)了，因?yàn)楸?PotentialError 接收了。

看看穿上新生命周期這身新衣服后的樣子吧

import React from "react"

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state方式（1）
    this.state = {

    }
  }
    
  static defaultProps = {

  }

  // 初始化state方式（2）
  state = {

  }
  static getDerivedStateFromProps(props, state) {
    return state
  }
  componentDidCatch(error, info) {

  }
  render() {

  }
  componentDidMount() {

  }
  shouldComponentUpdate(nextProps, nextState) {
    
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {

  }
  componentDidUpdate(prevProps, prevState, snapshot) {

  }
  componentWillUnmount() {

  }

}

【未完待續(xù)】