反应缓慢的原因可能是什么？

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. 对输入参数使用 Debounce/Throttle 以避免不必要的函数/api 调用

5. 使用 React 虚拟化库，同时渲染长列表，因为它会大量减少 dom 元素。

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

7. 尽早绑定函数，避免在渲染函数中绑定