1. 程式人生 > >react和redux隨筆

react和redux隨筆

Virtual DOM更新時與上一個Virtual DOM比較。過程叫調和
This.forceUpdate 強制重新繪製。 父元件重新繪製時都會呼叫子元件的 componentWillReceiveProps
reducer中不能直接修改state再返回,因為純函式不能有副作用。
This.props.children
context提供一個全域性訪問物件
React-redux  connect:連線容器元件和傻瓜元件
Provider:包含store的context
Connect:把store的state轉換為內層傻瓜元件的prop 把傻瓜元件中的動作轉化為派送給store的動作


儲存重複。 父元件要和子元件資料保持一致。 prop多級傳遞問題。
Redux 原則“單向資料流”: 1、唯一資料來源 。 2、保持狀態只讀。 3、誰改變只通過純函式完成。
檔案組織結構: 1、角色組織 比如mvc 按model、view、controller 來建立檔案目錄。 不利於拓展。每次新增新功能都要在多個目錄下跳轉,查詢、修改。
2、功能組織 如登陸功能、查詢功能 來建立檔案目錄。每個功能對應一個模組,只要關注一個模組就行。 模組介面能把一個目錄看作一個模組,所以推介功能組織。
狀態樹設計: 1、一個模組控制一個狀態節點。(一個reducer負責修改一個模組的資料) 2、避免冗餘資料。  Reselector (可以使用過濾器過濾掉冗餘資料)  3、樹形結構扁平。樹形節點太多的話都要先判斷上個節點有沒有。(-0----------------)
Ref直接操作DOM容易失控。
效能優化: 對實力數量是動態的元件,一點點的浪費時間會因為例項的增多而成很長時間。 react-redux的shouldComponentUpdate 會自動對資料進行淺層比較比對然後判斷是否要渲染。
選擇什麼樣的方式定義元件的介面,如何,如何定義state 到prop的轉變,使用說明樣的演算法來對比Virtual DOM,這些決定對效能和架構的影響時巨大的。
跟節點不同會重新渲染。
Key的用法 Key可以知道新加入的節點,只渲染新的節點。然後呼叫原來的props來啟動更新過程。可以避免無謂的更新。 Key的取值不能直接把陣列中的下標直接拿來用。因為陣列是會變的。也容易與其它陣列重複。
提高資料獲取效能(用過濾器過濾不要的資料)
正規化化狀態樹。
高階元件: 高階元件就是一個接受一個元件輸入的函式。然後返回以新的元件作為結果,而且返回的新元件具有輸入元件所不具有的功能。 以函式為子元件
import React from ‘react’;
function removeUserProp(WrappedComponent ) {     return class WrappedComponent  extends React.Component{         render(){             const {user , …otherProps}=this.props;             return <WrappedComponent {…otherProps} />         }     } }
export default removeUserProp;
高階元件是為了重用程式碼。
中介軟體是為了解決redux的非同步問題。因為redux是同步的。
Fetch 不存在中斷概念 多次請求事件(1、只使用獲取的最新的資料,2、判斷在傳送請求)
非同步操作的action :進行中、操作完成、操作失敗。

動畫的實現: css3 ReactCSSTransitionroup.   用npm安裝 react-addons-css-transiton-group React-Motion
巢狀路由 分片打包: 不直接import  用到時再用require插入
中介軟體: Dispatch 派發新的action物件 呼叫getState獲取當前的Redux Store上的物件 呼叫next告訴Redux當前中介軟體工作完畢,讓Redux呼叫下箇中間件 訪問action物件action上的所有資料。