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

objc94 發(fā)布于2019-08-22 13:51 / 714人閱讀

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

ES6

ES6帶來的重要的改變我認為有三點：

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

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

class使JS進入面向?qū)ο缶幊?OOP)

方案一：MVC

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

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

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

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

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

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

React

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

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

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

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

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

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

Redux

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

action事件傳給reducer

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

store改變引起視圖更新

總結(jié)

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

更多文章 yjy5264.github.io

云服務器 GPU云服務器幾年前 react _React React 源碼

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92530.html

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

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

mmy123456 2019-08-20 14:20 評論0 收藏0
HTML5行業(yè)現(xiàn)狀與未來 - 2016年終大盤點

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

zone 2019-08-30 15:52 評論0 收藏0
HTML5行業(yè)現(xiàn)狀與未來 - 2016年終大盤點

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

UsherChen 2019-08-01 16:19 評論0 收藏0
2018年前端開發(fā)回顧

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

crelaber 2019-08-23 14:12 評論0 收藏0