context來了，也許該放手redux or mobx...

老鐵，學不動了？不要慌，耽誤不了你幾分鐘...(說謊臉，汗)

long long ago

使用react的同胞們，也許都苦惱過其狀態管理以及組件之間的數據傳遞和共享（笨重的方式經過props依次往子組件傳遞）。

這時候，redux（mobx相似）出現了，咱們累死累活的從水深火熱中解放了（第三方的庫相對較複雜和麻煩）。。。

那尚未接觸過redux或者還在使用redux路上的同窗怎麼辦？不要着急，更簡單的東西來了（前方高能，請各老鐵注意！）： Context API！！！（React v16.3.0+） 戳我查看更新日誌

先來安利一個todolist的栗子：

戳我查看源碼和demo

Context是什麼？

Context直譯就是上下文，是 React 16.3.0開始提供的一個官方API，它無需經過props的方式就能夠完成項目中由上而下及組件之間的數據傳遞和共享，即你也不用依賴任何第三方的狀態數據插件庫就能夠完成這項工做任務。

官方推薦使用的狀況是：當須要用到全局數據的時候，好比：主題，多語言制或者用戶登陸受權等等。 ==固然：== 你無需這麼死板，當須要用到多層級的組件數據傳遞或者複雜的數據共享場景也可使用context api，也能夠用來作緩存使用。

Context簡單使用

// 1.使用React.createContext建立context提供者Provider 和 context訂閱者cunsomer

const {Provider, Consumer} = React.createContext(defaultValue); // defaultValue根據使用場景設置

// 2.設置Provider組件
// 通常包裹須要訂閱的子組件的頂層父組件
// value設置須要傳遞和共享的數據以及改變數據的函數等
// 爲了不不必的重繪和渲染，value的數據屬性值經過組件state設置

<Provider value={/* some value */}>
    {/* some component with comsumer */}
</Provider>

// 3.設置Consumer組件
// 經過函數做爲子元素的方式，訂閱context的變換

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

// 組合Provider 和 Consumer便可大功告成

<ProviderComponent>
    <ConsumerComponent>{somechildren}</ConsumerComponent>
</ProviderComponent>

// 其餘更多用法，好比生命週期函數調用（可點擊上面demo查看），高階組件等瀏覽一下文檔即會，很是簡單

簡單總結

建立賣家和買家，經過你們都很是熟悉的React組件方式來進行買賣交易，如此簡單的Context用法，你們還在等什麼，趕忙丟掉其餘的第三方庫！！

結語： 小小皮一下，你們不要打我，新功能能夠嘗試，也須要你們的討論和研究，相似redux的第三方庫仍是很是強大~~(前端攻城獅③羣:743490497，歡迎你們進羣討論)

更多資料請查看如下連接:

https://reactjs.org/docs/context.html

https://css-tricks.com/digging-into-react-context/