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

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. 早期绑定函数，避免绑定到渲染函数