React使用總結

React使用過程中的經驗總結:

• 封裝form組件.可以只用Form.create()包裹封裝的組件。
• changeState方法重載,
  
  • (value,key) state 的直接屬性和值
  • (value,"key_parent,key_child....") 中間用, 隔開，表明state中屬性的屬性。
  • [{value:value,key:key}] 批量更新state的直接屬性。
  • [{value:value,key:"key_parent,key_child"}] 批量更新state 中屬性的屬性。
• Ant_design 中Table 的Radio 和 checkbox 可以和onRowClick 合併，都僅僅只是改變選中ids數組 ，然後再componentWillUpdate或者componentWillReceiveProps生命週期中遍歷再給上其他需要的值，這樣可以避免onSelect和onRowClick一些相同的代碼.
• 在ComponentWillUpdate(nextProps,nextState)不能給nextState直接賦值一個對象，也就是說組件中不能改變組件的state的引用;（未確認）但是有replaceState函數或許能用。
• 使用對象的屬性時候，一定要校驗對象存在，不能直接調用，state&&state.prototype
• (待實現)封裝no-flux或者refast的execute方法，看能不能在發送請求之前Loading，之後hide(),或者再封裝到父類中。;
• 可以在Constructor方法中通過判斷來源哪裏，然後通過call調用不同的方法來初始化當前類。場景:“記一筆”頁面會有不同的來源都到這個頁面，那麼constructor方法寫的很亂。
• 從中間件中得到的啓發(待實踐)：代碼分爲業務代碼和非業務代碼的技術代碼(中間件);那麼代碼就可以這樣來區分一下，例如”校驗功能”就是中間件代碼;還有就是”異步重複加載中間件”，有些數據需要不斷從後臺來抽取，那麼就可以弄一箇中間件
• 代碼流程的控制也有兩種：return和callback
• React有如下的一些函數:setProps,replaceProps,setState,replaceState,forceUpdate
• React的setState是異步執行的(根據生命週期在render方法調用之前已經放到隊列中的一起來更新,（自己理解的，看了網上源碼，沒看懂。。。。）)，但是在addEventListener,setTimeout,ajax回調中this.setState是立即觸發的,因爲這些已經跳出了生命週期函數了。
• React-router中withRoute的用法(不知道哪天突然出現的,網上的依然看不懂。。。),正常來說用Route匹配的組件會有額外的關於路由的props,普通的組件是沒有的，但是用withRoute包裝過後，在它被渲染的時候，就會有路由的相關信息，但是他的路由信息是他的上層組建中那個放在Route component中組件的信息。
• setState的三種方式:
  
  • 對象,執行兩次只加1
    setState({demo:this.state.demo+1});
  • 函數，執行兩次加 2
    setState((preState,preProps)=>{return {demo:preState.demo+1}});
    -封裝異步
    syncSetState(obj){
return new Promise(
function(resolve,reject){
this.setState(obj,resolve)
}.bind(this));};
\\調用
syncSetState(obj).then(function(){console.log(this.state);})

• 前端會存在需要不斷調用的接口，那麼這個時候可以寫一箇中間件;
  
/*
url:需要調用的接口；
compareFun(success,error);對加載完成的數據進行處理，並在比對完成之後調用不同的函數來處理比對結果;類似事件監聽了,
*/
function syncLoadData(時間間隔,url,compareFun)；
//還需要獲取下來之後存到數據集中，然後提供方法獲得數據