在移动浏览器中反应性能

Question

我有一个组件（表），其中包含许多行，其中包含数据编辑功能，带有形式的掩码，contenteditable可以选择所有字段并同时更改所有行。

在台式机上，它的运行速度非常快，但是在iPhone 6上，我有一个不现实的滞后，Safari每次执行都会挂20秒。

我完成了建议以提高React的性能：防止和解，纯组件等…

有没有提高性能的方法？我是否需要考虑在移动设备上进行功能更改以支持性能？

Answer 1

除上述答案外，您应该使用react-perf模块来准确验证是否有任何更改确实提高了性能。

https://github.com/crysislinux/chrome-react-
perf

使用此扩展程序可以准确地查看问题/缓慢的用户交互时页面上每个组件实际呈现了多少次

1. 尝试减少编号。每个组件的渲染图。也减少号。每个此类交互上呈现的组件数量。
2. 尽量减少每个组件花费的时间。您可以按时间排序，并专注于最昂贵的组件。首先，避免渲染层次结构中更高的组件。要查找组件渲染背后的确切原因，请使用以下方法。

暂时放置componentWillUpdate生命周期挂钩，并比较上一个和下一个道具/状态。有了这个，您将得到渲染背后的确切罪魁祸首。在以下情况下可能会不必要地更改道具：

1. 当prop只是由于“绑定”用法或箭头函数用法而发生变化的函数时，它每次都会更改函数引用，并因此每次都导致新的渲染。
2. 可能会使用新的Object（）或{}表示法初始化道具，该道具每次都被视为新对象，因此被视为新渲染。可以通过在const READ_ONLY_OBJECT = {}每次需要初始化变量时使用READ_ONLY_OBJECT 来避免这种情况。
3. 您可能不必要地变异了对象类型的prop，并在componentWillRecieveProps中进行了比较。

我们不想要渲染的地方可能有更多的原因，但是由于反应的方式而发生了。只是看到道具不会不必要地改变。另外，不要放置不必要的componentWillRecieveProps
/ shoulderCompoentUpdate检查，因为它可能会对性能产生负面影响。另外，在使用它们时，请尽可能使用较高的层次结构。

一些使用技巧

1. 尽量避免使用在每个渲染器上运行的react生命周期挂钩。
2. 尝试减少在每个渲染器上运行的所有脚本。
3. 使用componentWillReieveProps，但只有在您获得收益的情况下，否则点1也会降低收益。同样，经常使用它可能导致代码无法维护。在进行与优化相关的更改之前，请始终使用react-perf工具验证收益。
4. 在chrome-dev-tools中使用限制功能来创建缓慢的设备环境，并使用javascript分析来查看哪些javascript方法花费了最多时间。
5. 尝试将redux与react一起使用以管理状态。Redux还为连接的组件实现了componentWillReieveProps东西。因此，使用redux将有所帮助。
6. 使用redux时，请使用适当的批处理策略。您还可以在redux中使用批处理中间件。

7. 同样，在react中，尝试以批处理方式进行事件，以减少在react的渲染和差异算法中花费的时间。尝试将setStates合并到react或redux中的操作，以减少react脚本编写时间。

8. 实施输入控件时，请始终使用适当的限制/反跳技术，以立即获得响应。如果业务逻辑允许，您还可以使用不受控制的组件来立即做出响应。想法是当用户以任何方式键入或与您的页面进行交互时，不要运行任何JavaScript，否则他会注意到设备的计算能力特别糟糕。

9. 您的动作处理程序不应冗长。如果冗长，请尝试使用redux-actions或just promises异步地以块的形式进行处理。

这个列表还有很多，但是问题是，由于framewaork很容易上手，因此它起初很容易上手，但是迟早任何中等大小的React应用都会遇到这些性能问题，因为React的差异和渲染逻辑会招致随着应用程序规模的扩大，不良设备将遭受很多性能损失，唯一的选择是尽快将反应性能工具也纳入构建过程。这将使您能够验证和评估您的改进。