context來(lái)了，也許該放手redux or mobx...

legendmohe 發(fā)布于2019-08-22 18:10 / 626人閱讀

摘要：官方推薦使用的情況是當(dāng)需要用到全局?jǐn)?shù)據(jù)的時(shí)候，比如主題，多語(yǔ)言制或者用戶登錄授權(quán)等等。

老鐵，學(xué)不動(dòng)了？不要慌，耽誤不了你幾分鐘...(說(shuō)謊臉，汗)

long long ago

使用react的同胞們，也許都苦惱過(guò)其狀態(tài)管理以及組件之間的數(shù)據(jù)傳遞和共享（笨重的方式通過(guò)props依次往子組件傳遞）。

這時(shí)候，redux（mobx類似）出現(xiàn)了，我們累死累活的從水深火熱中解放了（第三方的庫(kù)相對(duì)較復(fù)雜和麻煩）。。。

那還沒(méi)有接觸過(guò)redux或者還在使用redux路上的同學(xué)怎么辦？不要著急，更簡(jiǎn)單的東西來(lái)了（前方高能，請(qǐng)各老鐵注意！）： Context API！！！（React v16.3.0+）戳我查看更新日志

先來(lái)安利一個(gè)todolist的栗子：

戳我查看源碼和demo

Context是什么？

Context直譯就是上下文，是 React 16.3.0開(kāi)始提供的一個(gè)官方API，它無(wú)需通過(guò)props的方式就可以完成項(xiàng)目中由上而下及組件之間的數(shù)據(jù)傳遞和共享，即你也不用依賴任何第三方的狀態(tài)數(shù)據(jù)插件庫(kù)就可以完成這項(xiàng)工作任務(wù)。

官方推薦使用的情況是：當(dāng)需要用到全局?jǐn)?shù)據(jù)的時(shí)候，比如：主題，多語(yǔ)言制或者用戶登錄授權(quán)等等。 ==當(dāng)然：== 你無(wú)需這么死板，當(dāng)需要用到多層級(jí)的組件數(shù)據(jù)傳遞或者復(fù)雜的數(shù)據(jù)共享場(chǎng)景也可以使用context api，也可以用來(lái)做緩存使用。

Context簡(jiǎn)單使用

// 1.使用React.createContext創(chuàng)建context提供者Provider 和 context訂閱者cunsomer

const {Provider, Consumer} = React.createContext(defaultValue); // defaultValue根據(jù)使用場(chǎng)景設(shè)置

// 2.設(shè)置Provider組件
// 一般包裹需要訂閱的子組件的頂層父組件
// value設(shè)置需要傳遞和共享的數(shù)據(jù)以及改變數(shù)據(jù)的函數(shù)等
// 為了避免沒(méi)必要的重繪和渲染，value的數(shù)據(jù)屬性值通過(guò)組件state設(shè)置


    {/* some component with comsumer */}


// 3.設(shè)置Consumer組件
// 通過(guò)函數(shù)作為子元素的方式，訂閱context的變換


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


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


    {somechildren}


// 其他更多用法，比如生命周期函數(shù)調(diào)用（可點(diǎn)擊上面demo查看），高階組件等瀏覽一下文檔即會(huì)，非常簡(jiǎn)單

簡(jiǎn)單總結(jié)

創(chuàng)建賣家和買家，通過(guò)大家都非常熟悉的React組件方式來(lái)進(jìn)行買賣交易，如此簡(jiǎn)單的Context用法，大家還在等什么，趕緊丟掉其他的第三方庫(kù)！！

結(jié)語(yǔ)： 小小皮一下，大家不要打我，新功能可以嘗試，也需要大家的討論和研究，類似redux的第三方庫(kù)還是非常強(qiáng)大~~(前端攻城獅③群:743490497，歡迎大家進(jìn)群討論)更多資料請(qǐng)查看以下鏈接:
https://reactjs.org/docs/context.html
https://css-tricks.com/digging-into-react-context/