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

資訊專欄INFORMATION COLUMN

React發(fā)展幾年前的現(xiàn)狀個(gè)人理解(React新手向?qū)?

objc94 / 727人閱讀

摘要：帶來的重要的改變我認(rèn)為有三點(diǎn)解決了回調(diào)地獄箭頭函數(shù)語法糖更好地解決了指向問題，并簡(jiǎn)化表達(dá)式寫法使進(jìn)入面向?qū)ο缶幊谭桨敢患热挥辛?，那么一個(gè)視圖出來不就可以了采用原來的結(jié)構(gòu)，控制視圖，并且負(fù)責(zé)與層通信每一個(gè)頁面都是一個(gè)，頁面之間都通訊用事件訂閱

ES6

ES6帶來的重要的改變我認(rèn)為有三點(diǎn)：

promise/generator/async解決了回調(diào)地獄(callback hell)

=> 箭頭函數(shù)語法糖更好地解決了this指向問題，并簡(jiǎn)化λ表達(dá)式寫法

class使JS進(jìn)入面向?qū)ο缶幊?OOP)

方案一：MVC

既然有了OOP，那么new一個(gè)視圖出來不就可以了

采用原來的MVC結(jié)構(gòu)，Control控制視圖，并且負(fù)責(zé)與Model層通信

每一個(gè)頁面都是一個(gè)MVC，頁面之間都通訊用事件訂閱就可以了
在一個(gè)中大型項(xiàng)目中這是一個(gè)優(yōu)雅的解決方案嗎？

方案二：狀態(tài)機(jī)

將所有的視圖寫成v=f(state)的形式，所有的狀態(tài)交給一顆state樹來管理

每一個(gè)輸入事件作為一個(gè)action傳給一個(gè)處理函數(shù)，這個(gè)函數(shù)會(huì)改變state樹里的狀態(tài)
每一個(gè)狀態(tài)發(fā)生變化都會(huì)引起該狀態(tài)對(duì)應(yīng)所有對(duì)應(yīng)視圖發(fā)生變化
怎樣寫成v=f(state)的形式？

React

巧了，React其實(shí)就是一個(gè)狀態(tài)機(jī)
React組件內(nèi)部改變this.state即會(huì)更新視圖
外部改變傳入的props也會(huì)更新視圖

我們可以將組件大致分為兩類：

display 顯示組件，僅需要傳入props值value即可

input 輸入組件，在React里叫做受控組件，因?yàn)檫@種組件要傳入兩個(gè)props，一個(gè)是它的值value，另一個(gè)是value變化引起的回調(diào)onChange

(輸入組件可以交給高階組件封裝的form表單自動(dòng)處理，value和onChange都省了，可以參考我寫的另一篇 React高階組件實(shí)現(xiàn)表單雙向綁定)

將遇到的每一個(gè)模塊封裝成一個(gè)組件，內(nèi)部緊耦合，外部解耦只需要傳入狀態(tài)
將這些組件組裝成一個(gè)完整的頁面即是一個(gè)v=f(state)
這個(gè)時(shí)候再將這些頁面交給Redux來處理

Redux

嚴(yán)格的單向數(shù)據(jù)流是Redux架構(gòu)的設(shè)計(jì)核心

action事件傳給reducer

reducer里編寫純函數(shù)處理action改變store里的state

store改變引起視圖更新

總結(jié)

業(yè)務(wù)邏輯由redux處理，組件內(nèi)部嚴(yán)格封裝只留必要的接口
如果組件有現(xiàn)成的(比如antd)，解耦完成的React方案開發(fā)起來速度簡(jiǎn)直不要太快

更多文章 yjy5264.github.io

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

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

相關(guān)文章

  • HTML5行業(yè)現(xiàn)狀與未來 - 2016年終大盤點(diǎn)

    摘要：行業(yè)現(xiàn)狀與未來年終大盤點(diǎn)大幅動(dòng)蕩后，即將進(jìn)入平穩(wěn)期前端，在年及以前，一直處于一種萌芽期的狀態(tài)當(dāng)中，直至年才進(jìn)入行業(yè)的成長(zhǎng)期。 HTML5行業(yè)現(xiàn)狀與未來 - 2016年終大盤點(diǎn) 1. 大幅動(dòng)蕩后，即將進(jìn)入平穩(wěn)期 HTML5（WEB前端），在2012年及以前，一直處于一種萌芽期的狀態(tài)當(dāng)中，直至2013年才進(jìn)入行業(yè)的成長(zhǎng)期。HTML5（WEB前端）在2013和2014年，隨著行業(yè)的推動(dòng)慢慢的...

    mmy123456 評(píng)論0 收藏0

  • HTML5行業(yè)現(xiàn)狀與未來 - 2016年終大盤點(diǎn)

    摘要：行業(yè)現(xiàn)狀與未來年終大盤點(diǎn)大幅動(dòng)蕩后，即將進(jìn)入平穩(wěn)期前端，在年及以前，一直處于一種萌芽期的狀態(tài)當(dāng)中，直至年才進(jìn)入行業(yè)的成長(zhǎng)期。 HTML5行業(yè)現(xiàn)狀與未來 - 2016年終大盤點(diǎn) 1. 大幅動(dòng)蕩后，即將進(jìn)入平穩(wěn)期 HTML5（WEB前端），在2012年及以前，一直處于一種萌芽期的狀態(tài)當(dāng)中，直至2013年才進(jìn)入行業(yè)的成長(zhǎng)期。HTML5（WEB前端）在2013和2014年，隨著行業(yè)的推動(dòng)慢慢的...

    zone 評(píng)論0 收藏0

  • HTML5行業(yè)現(xiàn)狀與未來 - 2016年終大盤點(diǎn)

    摘要：行業(yè)現(xiàn)狀與未來年終大盤點(diǎn)大幅動(dòng)蕩后，即將進(jìn)入平穩(wěn)期前端，在年及以前，一直處于一種萌芽期的狀態(tài)當(dāng)中，直至年才進(jìn)入行業(yè)的成長(zhǎng)期。 HTML5行業(yè)現(xiàn)狀與未來 - 2016年終大盤點(diǎn) 1. 大幅動(dòng)蕩后，即將進(jìn)入平穩(wěn)期 HTML5（WEB前端），在2012年及以前，一直處于一種萌芽期的狀態(tài)當(dāng)中，直至2013年才進(jìn)入行業(yè)的成長(zhǎng)期。HTML5（WEB前端）在2013和2014年，隨著行業(yè)的推動(dòng)慢慢的...

    UsherChen 評(píng)論0 收藏0

  • 2018年前端開發(fā)回顧

    摘要：在整個(gè)年，看到發(fā)布版增加了許多功能，包括新的生命周期方法新的上下文指針事件延遲函數(shù)和。它在等待渲染異步響應(yīng)時(shí)數(shù)據(jù)，是延遲函數(shù)背后用來管理組件的代碼分割的。發(fā)布自第版開始將近年后，于年發(fā)布。 前端發(fā)展發(fā)展迅速,非常的快。 本文將回顧2018年一些重要的前端新聞，事件和 JavaScript 趨勢(shì)。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ showImg(ht...

    crelaber 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<