react學習實戰 簡書 常見優化

2021-09-23 14:00:12 字數 755 閱讀 8719

1.在constructor方法中:做方法的bind(this)

優化:constructor(props)

2.this.setstate賦值優化

this.setstate()

優化:使用es6箭頭函式

this.setstate(()=>());

3.render中有些js**提取出來作為方法

gettodoitem() )

}

4.使用生命週期函式

shouldcomponentupdate函式,返回true則會去更新,false則不會去更新,可以在這個函式中做一些判斷,當父元件重繪時,自元件是否要重繪

shouldcomponentupdate(nextprops,nextstate)

return false;

}5.將元件拆分成 ui元件和容器元件

ui元件只有render方法時,可以定義成無狀態元件

6.redux 狀態管理,react檢視渲染層

7.purecomponent 實現了shouldcomponentupdate函式,可以優化重繪,元件資料更新時才重繪

注意:使用purecomponent時,最好使用immmutable管理資料,不然會遇到坑

React簡書開發實戰課程筆記 2

一 使用 react transition group 擴充套件,實現css動畫 二 ant design框架初體驗 三 redux 具體 實現 src目錄下原有乙個index.js專案入口檔案檔案,和乙個todolist.js元件檔案 在src目錄下建立store資料夾,然後在store資料夾中建...

react簡書專案學習筆記21redux使用的原則

1.store是唯一的 2.只用store可以該變state裡的內容 reducer不能直接更新state,只是返回乙個新的state給store,讓store去改變 3.reducer必須是乙個純函式 純函式 給定固定的輸入就一定有固定的輸出,而且不會有 當函式中有非同步操作或和日期相關的操作的時...

python學習筆記簡書 Python學習筆記

1.輸入 輸出 1 輸出 printf aaa printf aa a printf 100 200 100 200 結果為aaa aa a 100 200 300 輸出不輸出回車方法 print end 2 輸入 name intput printf name 結果為mike mike name ...