FE.SRC-React實戰與原理筆記

PumpkinDylan 發布于2019-08-26 14:04 / 2351人閱讀

摘要：異步實戰狀態管理與組件通信組件通信其他狀態管理當需要改變應用的狀態或有需要更新時，你需要觸發一個把和載荷封裝成一個。的行為是同步的。所有的狀態變化必須通過通道。前端路由實現與源碼分析設計思想應用是一個狀態機，視圖與狀態是一一對應的。

React實戰與原理筆記 概念與工具集

jsx語法糖;cli;state管理;jest單元測試;

webpack-bundle-analyzer

Storybook

生命周期

constructor()

用于初始化內部狀態，很少使用；

唯一可以修改state的地方；

使用 this.state 來初始化 state

給事件處理函數綁定 this

getDerivedStateFromProps()

當創建時、接收新的 props 時、setState 時、forceUpdate 時會執行這個方法

當state需要從props初始化時使用；

盡量不要使用：維護兩者狀態一致性會增加復雜度；

每次render都會調用

典型場景;表單控件獲取默認值

componentWillMount()

UI渲染完成后調用

只執行一次

典型場景：獲取外部資源

componentWillUnmount()

組件將要移除時調用

資源釋放（一些事件監聽和定時器需要在此時清除）

getSnapshotBeforeUpdate()

在頁面render之前調用，state已更新

典型場景：獲取render之前的DOM狀態

componentWillUpdata(nextProps, nextState)

組件初始化時不調用，只有在組件將要更新時才調用，此時可以修改state

componentDidUpdate()

每次UI更新時調用

典型場景：頁面需要根據props變化重新獲取數據

shouldComponentUpdate(nextProps, nextState)

決定vdom是否要重繪

一般可以由PureComponent自動實現

典型場景：性能優化

render()

創建虛擬dom，進行diff算法，更新dom樹都在此進行。此時就不能更改state了。

componentDidMount()

組件渲染之后調用，只調用一次。

組件設計模式 組件

就是狀態機器UI=fn(state) (狀態分類：domain ui app)

context模式

主要應用場景在于很多不同層級的組件需要訪問同樣一些的數據。如下圖，組件a、組件g、組件f需要共享數據，則只需要在最外層套上Provider，需要共享的組件使用Consumer即可。React新Context API在前端狀態管理的實踐

組合組件(Compound Component)

使用者只需要傳遞子組件，子組件所需要的props在父組件會封裝好，引用子組件的時候就沒必要傳遞所有props了。

高階組件(HOC)

高階組件本質是一個接受 Component 并返回新的 Component 的函數。目的是為了復用通用邏輯 [深入理解 React 高階組件
](https://mp.weixin.qq.com/s?__...

函數組件

是純 UI 組件，也稱無狀態組件(SFC:Stateless Functional Component)。渲染所需要的數據只通過 props 傳入, 不需要用 class 的方式來創建 React 組件, 也不需要用到 this 關鍵字，或者用到 state [React中函數式聲明組件
](https://segmentfault.com/a/11...

render props

給某個組件通過 props 傳遞一個函數，并且函數會返回一個 React 組件

提供者模式(Provider Pattern)

提供者模式可以解決非父子組件下的信息傳遞問題, 或者組件層級太深需要層層傳遞的問題

State Reducer

可以讓父組件控制子組件state。render props 可以控制子組件的UI是如何渲染的，state reducer則可以控制子組件的state.

Controlled Components

將原來子組件改變state的邏輯移到父組件中，由父組件控制。
異步

實戰-狀態管理與組件通信

組件通信: broadcast dispatch state props context

其他狀態管理： dva, mobx,flexible,reflux,flummox

flux

action:當需要改變應用的狀態或有 View 需要更新時，你需要觸發一個 Action

action creator:把 type 和 payload（載荷）封裝成一個 Action。type 是你預定義的多個 type （通常是一個常量列表）之一，代表系統特定的 action。一旦 action 消息創建好了，Action Creator 就會把它傳遞給 Dispatcher

Dispatcher: 它保存著所有需要發送 action 的 store 列表。當 Action Creator 給過來一個 action，它會把這個 action 傳遞給各個 store。

waitfor:Dispatcher 的行為是同步的。如果想要在 store 之間實現依賴，有的更新完了其他的才能更新，你可以使用 Dispatcher 提供的 waitFor() 來實現。

store:所有的狀態變化,必須通過 Action Creator/Dispatcher 通道。使用switch判斷 action 的類型，決定是否相應。如果相應則根據 action 找出需要變化的部分，更新 state。

mobx

observable: 通過 observable(state) 定義組件的狀態，包裝后的狀態是一個可觀察數據（Observable Data）。

observer: 通過 observer(ReactComponent) 定義組件

action: 通過 action 來修改狀態。

redux

react-redux 提供了兩個重要的對象，Provider 和 connect，前者使 React 組件可被連接（connectable），后者把 React 組件和 Redux 的 store 真正連接起來。

通過 reducer 創建一個 store，每當我們在 store 上 dispatch 一個 action，store 內的數據就會相應地發生變化。

provider

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

原理 Virtual Dom 算法實現

樹的遞歸

判斷屬性的更改

判斷列表差異算法實現 React Diff算法

遍歷子元素打標識

渲染差異

詳情參考深入框架本源系列 —— Virtual Dom

Router 實現

以 hash 形式（也可以使用 History API 來處理）為例，當 url 的 hash 發生變化時，觸發 hashchange 注冊的回調，回調中去進行不同的操作，進行不同的內容的展示。前端路由實現與 react-router 源碼分析

Redux設計思想

Web 應用是一個狀態機，視圖與狀態是一一對應的。

所有的狀態，保存在一個對象里面。

Redux 讓應用的狀態變化變得可預測。如果想改變應用的狀態，就必須 dispatch 對應的 action。而不能直接改變應用的狀態，因為保存這些狀態的地方（稱為 store）只有 get方法（getState）而沒有 set方法。

只要Redux 訂閱(subscribe)相應框架(例如React)內部方法，就可以使用該應用框架保證數據流動的一致性。

Redux源碼剖析及應用

其他

《React源碼解析(一):組件的實現與掛載》
《React源碼解析(二):組件的類型與生命周期》
《React源碼解析(三):詳解事務與隊列》
《React源碼解析(四):事件系統》
React底層揭秘

參考資料

《深入淺出React和Redux》程墨
React 狀態管理庫: Mobx
深入淺出react
React 實踐心得：react-redux 之 connect 方法詳解、
《React實戰進階45講》王沛 - 極客時間
react 生命周期
重新認識reacrt生命周期
react組件設計模式快速指南

GPU云服務器云服務器云主機與購買筆記本 webrtc入門與實戰 tensorflow入門與實戰數據分析與實戰

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109996.html

阿里 2021 版最全 Java 并發編程筆記，看完我才懂了“內卷”的真正意義

摘要：純分享直接上干貨操作系統并發支持進程管理內存管理文件系統系統進程間通信網絡通信阻塞隊列數組有界隊列鏈表無界隊列優先級有限無界隊列延時無界隊列同步隊列隊列內存模型線程通信機制內存共享消息傳遞內存模型順序一致性指令重排序原則內存語義線程純分享 , 直接上干貨! 操作系統并發支持進程管理內存管...

不知名網友 2021-11-26 11:11 評論0 收藏0
ApacheCN 編程/大數據/數據科學/人工智能學習資源 2019.5

摘要：請回復這個帖子并注明組織個人信息來申請加入。版筆記等到中文字幕翻譯完畢后再整理。數量超過個，在所有組織中排名前。網站日超過，排名的峰值為。主頁歸檔社區自媒體平臺微博知乎專欄公眾號博客園簡書合作侵權，請聯系請抄送一份到贊助我們 Special Sponsors showImg(https://segmentfault.com/img/remote/1460000018907426?w=1...

zhonghanwen 2019-06-26 18:55 評論0 收藏0
ApacheCN 學習資源匯總 2019.3

摘要：主頁暫時下線社區暫時下線知識庫自媒體平臺微博知乎簡書博客園合作侵權，請聯系請抄送一份到特色項目中文文檔和教程與機器學習實用指南人工智能機器學習數據科學比賽系列項目實戰教程文檔代碼視頻數據科學比賽收集平臺，，劍指，經典算法實現系列課本課本描述【主頁】 apachecn.org 【Github】@ApacheCN 暫時下線: 社區暫時下線: cwiki 知識庫自媒體平臺 ...

array_huang 2019-07-31 10:07 評論0 收藏0
ApacheCN 學習資源匯總 2019.3

摘要：主頁暫時下線社區暫時下線知識庫自媒體平臺微博知乎簡書博客園合作侵權，請聯系請抄送一份到特色項目中文文檔和教程與機器學習實用指南人工智能機器學習數據科學比賽系列項目實戰教程文檔代碼視頻數據科學比賽收集平臺，，劍指，經典算法實現系列課本課本描述【主頁】 apachecn.org 【Github】@ApacheCN 暫時下線: 社區暫時下線: cwiki 知識庫自媒體平臺 ...

Prasanta 2019-06-26 18:48 評論0 收藏0