在移动浏览器中反应性能

Question

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

在台式机上它运行得非常快，但在 iPhone 6 上我有不真实的滞后，Safari 每次操作都会挂起 20 秒。

我完成了提高 React 性能的建议：防止协调、纯组件等......

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

Answer 1

添加到上面的答案，您应该使用react-perf模块来准确验证任何更改是否确实带来了性能提升。

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

使用此扩展程序可以准确查看当您进行有问题/缓慢的用户交互时，页面上的每个组件实际呈现的次数

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

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

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

我们不想要渲染的原因可能有更多，但它的发生是因为 React 的工作方式。只要注意 props 不会发生不必要的改变即可。另外，不要进行不必要的 componentWillRecieveProps/shouldCompoentUpdate 检查，因为它会对性能产生负面影响。此外，在使用它们时，请尽可能使用层次较高的层级。

一些可以使用的技巧

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 渲染和比较算法上花费的时间。尝试在 React 中加入 setStates 或在 redux 中加入 actions 来减少 React 脚本编写时间。

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

9. 您的操作处理程序不应太长。如果很长，请尝试使用 redux-actions 或仅使用 Promise 分块、异步地完成它们。

这个列表还有更多内容，但问题是，作为框架的 React 最初很容易开始工作，但迟早，任何中型 React 应用程序都会遇到这些性能问题，因为 React 的比较和渲染逻辑会产生问题在不良设备中会出现很多性能损失，一旦应用程序大小增加，唯一的选择就是尽快将反应性能工具纳入构建过程。这将使您验证和衡量您的改进。