react 16 效能提公升 總結

2022-08-03 08:24:09 字數 584 閱讀 5665

1. 減少子元件渲染

當 父元件 state 內的某個值(eg:value) 不變時 子元件菜 render

shouldcomponentupdate(nextprops, nextstate){

// 當父元件傳遞到子元件的值不同時 子元件才渲染

return nextprops.value !== this.props.value;

2. 函式作用域繫結 解除安裝 constructor 內

// 只用繫結一次作用域 降低效能消耗 可以 避免無謂的渲染

constructor(props){

super(props);

this.clickevent = this.clickevent.bind(this);

3. setstate 是非同步操作 寫成非同步匿名函式 可以把多次 資料修改渲染 結合成一次來做

this.setstate((prevstate)=>({

array1 : [...prevstate, str1,str2,str3],

string : 'this is string'

4. 虛擬dom 

5. 同層比對

react16實戰總結

react實戰基礎 li裡要帶key值否則會警告,這個問題在vue中也存在,考慮到虛擬dom中diff,所以不要用index作為key值,而要用item。2.immutable state不允許我們做任何的改變,所以拷貝乙份list,修改完再用setsate設定 removeclick index ...

react16的新特性

react 16 的好處 1 新的核心演算法 fiber react 新的演算法,更加友好 2 render可以return陣列 字串 可以return陣列 不需要包div 但是必須有對應的key 3 錯誤處理機制 增加了拋異常的生命週期函式 componentdidcatch err,info 這...

react 版權問題 React 16 兩三事

這兩天 react 16 發布了,同時,react 16 與 15.6.x 都已經切換到 mit 協議。版權的熱議與一些公司的決斷對於整個社群而言看起來是個好事,同時,也給前端的元件化帶來了更多的思考。react 16 大致有以下改變 新的 fiber render 引擎 以支援許多原來做不到的關於...