持續補充。

1. setState 數據合并一次處理

React底層對setState進行性能的提升機制。 數據多次改變，合并一次處理。

降低React diff match 比對頻率。

LIN.JY666：[React] 4 - setState / 異步還是同步??zhuanlan.zhihu.com

2. 作用域綁定 在constructor 里只綁定一次

將this.handleClick3 = this.handleClick3.bind(this) 放到constructor。

保證該函數的作用域綁定一次，避免其他的渲染。

// 三種方式 // 1. 構造器綁定 constructor (props) {super(props)this.handleClick3 = this.handleClick3.bind(this)}// 2. 箭頭函數 <button onClick={() => this.handleClick2()}>// 3. bind方式 <button onClick={this.handleClick4.bind(this)}>LIN.JY666：[React] 3 - 自動綁定 (事件綁定)?zhuanlan.zhihu.com

3. React Fiber 16+ 任務調度優化

• diff 如果很深的時候，會一直占用JS主進程的(因為單線程)，用戶操作效果就是，卡頓。
• Fiber 本質上是對 調用的一個優化。分片，就是大的任務分成小的 一步步的解決。
• React Fiber 是一種基于瀏覽器的單線程調度算法。16以下都是用的遞歸算法，無法停止。16+ 用的都是循環方式。

LIN.JY666：[React] 6 - React Fiber 基于瀏覽器的單線程調度算法?zhuanlan.zhihu.com

4. 組件

• shouldComponentUpdate 可執行業務決定是否render
• 無狀態使用Pure 組件
• HOC 高階組件模式，復用組件。

5. React key

VirtualDOM diff算法，用key來提升比對速度。

6. 其他工程方面

• webpack 按需加載, 代碼分割，單個bundle打包多個(一個vendor + 一個業務)，tree shaking。
• 服務端渲染。

總結

以上是生活随笔為你收集整理的react循环setstate_[React] 8 - React 自身或工程性能优化点?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。