React 16.3來了：帶着全新的Context API

文章概覽

React在版本16.3-alpha裏引入了新的Context API，社區一片期待之聲。咱們先經過簡單的例子，看下新的Context API長啥樣，而後再簡單探討下新的API的意義。

文中的完整代碼示例可在筆者的GitHub上找到，點擊傳送門。

看下新的Context API

須要安裝16.3-alpha版本的react。構建步驟非本文重點，可參考筆者GitHub上的demo。

npm install react@next react-dom@next

下面，直接來看代碼，若是用過react-redux應該會以爲很眼熟。

首先，建立context實例：

import React from 'react';
import ReactDOM from 'react-dom';

// 建立context實例
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});

而後，定義App組件，注意這裏用到了Provider組件，相似react-redux的Provider組件。

class App extends React.Component {

  render () {
    return (
      <ThemeContext.Provider value={{background: 'green', color: 'white'}}>
        <Header />
       </ThemeContext.Provider>
    );
  }
}

接下來，定義Header、Title組件。注意：

1. Title組件用到了Consumer組件，表示要消費Provider傳遞的數據。
2. Title組件是App的孫組件，但跳過了Header消費數據。

class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}

class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

最後，常規操做

ReactDOM.render(
  <App />, 
  document.getElementById('container')
);

看下程序運行結果：

爲何有新的Context API

用過redux + react-redux的同窗，應該會以爲新的Context API很眼熟。而有看過react-redux源碼的同窗就知道，react-redux自己就是基於舊版本的Context API實現的。

既然已經有了現成的解決方案，爲何還會有新的Context API呢？

1. 現有Context API的實現存在必定問題：好比當父組件的shouldComponentUpdate性能優化，可能會致使消費了context數據的子組件不更新。
2. 下降複雜度：相似redux全家桶這樣的解決方案，給項目引入了必定的複雜度，尤爲是對方案瞭解不足的同窗，遇到問題可能束手無策。新Context API的引入，必定程度上能夠很多項目對redux全家桶的依賴。

寫在後面

新的Context API，我的對於性能上的提高更加期待些。至於下降複雜度、取代redux之類的，不是我關注的重點。下一步的計劃就是多構造點用例來進行對比測試。

更多內容，歡迎你們關注個人公衆號，後續進行更新

相關連接

本文完整代碼示例

React新的Context API的RFC