React在版本16.3-alpha
裡引入了新的Context API,社群一片期待之聲。我們先透過簡單的例子,看下新的Context API長啥樣,然後再簡單探討下新的API的意義。
需要安裝16.3-alpha
版本的react。建置步驟非本文重點,本文主要和大家分享React 16.3之Context API詳解,希望能幫助大家。
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
元件。注意:
Title
元件用到了Consumer
元件,表示要消耗Provider
所傳遞的資料。
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
的同學,應該會覺得新的Context API很眼熟。而看過react-redux
原始碼的同學就知道,
既然已經有現成的解決方案,為什麼還會有新的Context API了呢?
效能最佳化,可能會導致消費了context資料的子元件不更新。
#########降低複雜度:類似redux全家桶這樣的解決方案,給專案引入了一定的複雜度,尤其是對方案了解不足的同學,遇到問題可能一籌莫展。新Context API的引進,一定程度上可以不少專案對redux全家桶的依賴。 ############寫在後面######新的Context API,個人對於效能上的提升更加期待些。至於降低複雜度、取代redux之類的,不是我關注的重點。下一步的計劃就是多構造點用例來進行比較測試。 ###以上是React 16.3之Context API詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!