成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

bingo / 1329人閱讀

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

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

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

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

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

先來安利一個todolist的栗子：

戳我查看源碼和demo
Context是什么？

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

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

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

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

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


    {/* some component with comsumer */}


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


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


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


    {somechildren}


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

創(chuàng)建賣家和買家，通過大家都非常熟悉的React組件方式來進(jìn)行買賣交易，如此簡單的Context用法，大家還在等什么，趕緊丟掉其他的第三方庫?。?/p> 

結(jié)語： 小小皮一下，大家不要打我，新功能可以嘗試，也需要大家的討論和研究，類似redux的第三方庫還是非常強大~~(前端攻城獅③群:743490497，歡迎大家進(jìn)群討論)
更多資料請查看以下鏈接:


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


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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54566.html

相關(guān)文章

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

    摘要：官方推薦使用的情況是當(dāng)需要用到全局?jǐn)?shù)據(jù)的時候，比如主題，多語言制或者用戶登錄授權(quán)等等。 老鐵，學(xué)不動了？不要慌，耽誤不了你幾分鐘...(說謊臉，汗) long long ago 使用react的同胞們，也許都苦惱過其狀態(tài)管理以及組件之間的數(shù)據(jù)傳遞和共享（笨重的方式通過props依次往子組件傳遞）。 這時候，redux（mobx類似）出現(xiàn)了，我們累死累活的從水深火熱中解放了（第三方的庫相...

    legendmohe 評論0 收藏0

  • 一年內(nèi)經(jīng)驗前端面試題記錄

    摘要：對于，其默認(rèn)大小一般是本地存儲和都保存在瀏覽器端，且都是同源的。把變量放在閉包中和放在全局作用域，對內(nèi)存的影響是一致的，這里并不能說成是內(nèi)存泄露。將新的樹和之前的虛擬樹進(jìn)行相比較，根據(jù)結(jié)果對進(jìn)行精準(zhǔn)響應(yīng)。 1. JavaScript 1. JavaScript文件在什么情況下會放在html哪個位置 https://zhuanlan.zhihu.com/p/... 對于必須要在DOM加載...

    qianfeng 評論0 收藏0

  • 一年內(nèi)經(jīng)驗前端面試題記錄

    摘要：對于，其默認(rèn)大小一般是本地存儲和都保存在瀏覽器端，且都是同源的。把變量放在閉包中和放在全局作用域，對內(nèi)存的影響是一致的，這里并不能說成是內(nèi)存泄露。將新的樹和之前的虛擬樹進(jìn)行相比較，根據(jù)結(jié)果對進(jìn)行精準(zhǔn)響應(yīng)。 1. JavaScript 1. JavaScript文件在什么情況下會放在html哪個位置 https://zhuanlan.zhihu.com/p/... 對于必須要在DOM加載...

    kelvinlee 評論0 收藏0

  • 【譯】Redux 還是 Mobx，讓我來解決你的困惑！

    摘要：我現(xiàn)在寫的這些是為了解決和這兩個狀態(tài)管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數(shù)式編程是不斷上升的范式，但對于大部分開發(fā)者來說是新奇的。規(guī)模持續(xù)增長的應(yīng) 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

    txgcwm 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<