反應速度慢的原因可能是什么？

Question

我正在支持基於React的CMS，但我陷入了性能問題，因為添加10個新輸入字段會使瀏覽器處理時間增加1秒。 這不是我的代碼，我沒有React的經驗。 我有分析方面的經驗，並對渲染引擎的工作原理有一個大概的了解。

我已經鈎住了ReactCompositeComponent._updateRenderedComponent函數，以查看主要性能瓶頸在哪里，而且區別似乎是我受到了很多歡迎。 在日歷輸入中添加40個轉發器項目會導致性能差異（表格必須支持200多個輸入，當前需要20秒）：

• div ：250毫秒-> 1600毫秒，命中1300-> 8100次
• ConnectedField（props） ：20毫秒-> 370毫秒，70次點擊-> 2300次點擊
• Calendar（） ：10毫秒-> 300毫秒，20次-> 1200次（但我只添加了40個日歷輸入）
• ConnectedFieldArray（） ：30毫秒-> 250毫秒，200次-> 1300次

是什么會導致僅添加幾個元素就產生如此多的點擊？

這是Chrome DevTool分析圖（單擊以查看完整大小）：

Answer 1

可能有許多原因影響反應性能

1. 密鑰在呈現長列表時的作用，密鑰對於比較實際dom和虛擬dom是至關重要的。

2. 變異對象，如果變異了對象，則ShouldComponentUpdate無法執行檢查並毫不費力地觸發更新生命周期。

3. API僅在ComponentDidMount中調用，安裝部件中的任何其他生命周期都將不必要地調用render方法。

4. 對輸入參數使用去抖/油門以避免不必要的函數/ API調用

5. 使用虛擬化的React庫，同時渲染長列表，因為它將減少大量的dom元素。

6. 使用插件react-addons-perf計算性能。

7. 盡早綁定函數，避免綁定到渲染函數中