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之類的，不是我關注的重點。下一步的計劃就是多構造點用例來進行對比測試。

更多內容，歡迎大家關注我的公眾號，後續進行更新

http://weixin.qq.com/r/cyn54VvE4wacrR_C93xh (二維碼自動識別)

相關鏈接

本文完整代碼示例

React新的Context API的RFC

推薦閱讀：