Web性能优化：缓存React事件来提高性能
Posted 小鸟云计算
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web性能优化：缓存React事件来提高性能相关的知识，希望对你有一定的参考价值。
javascript中一个不被重视的概念是对象和函数是如何引用的，并且直接影响 React性能。 如果创建两个完全相同的函数，它们仍然不相等，试试下面的例子：
const functionOne = function() { alert('Hello world!'); };
const functionTwo = function() { alert('Hello world!'); };
functionOne === functionTwo; // false
但是，如果将变量指向一个已存在的函数，看看它们的差异：
const functionThree = function() { alert('Hello world!'); };
const functionFour = functionThree;
functionThree === functionFour; // true
对象的工作方式也是一样的。
const object1 = {};
const object2 = {};
const object3 = object1;
object1 === object2; // false
object1 === object3; // true
const object1 = { x: true };
const object3 = object1;
object3.x = false;
object1.x; // false
通过修改 object3，可以改变对应内存中的值，这也意味着所有指向该内存的变量都会被修改。obect1 的值也被改变了。
对于初级开发人员来说，这是一个非常常见的错误，可能需要一个更别深入的教程，但是本广是关于React 性能的，只是本文是讨论 React 性能的，甚至是对变量引用有较深资历的开发者也可能需要学习。
这与 React 有什么关系? React 有一种节省处理时间以提高性能的智能方法：如果组件的 props 和 state 没有改变，那么render 的输出也一定没有改变。 显然，如果所有的都一样，那就意味着没有变化，如果没有任何改变，render 必须返回相同的输出，因此我们不必执行它。 这就是 React 快速的原因，它只在需要时渲染。
如果要将组件的 prop 从 {x：1} 更改为另一个对象 {x：1}，则 React 将重新渲染，因为这两个对象不会引用内存中的相同位置。 如果要将组件的 prop 从 object1(上面的例子)更改为 o bject3，则 React 不会重新呈现，因为这两个对象具有相同的引用。
不幸的是，这是我在代码评审过程中遇到的常见场景:
class SomeComponent extends React.PureComponent {
get instructions () {
if (this.props.do) {
return 'click the button: '
}
return 'Do NOT click the button: '
}
render() {
return (
<div>
{this.instructions}
<Button onClick={() => alert('!')} />
</div>
)
}
}
这是一个非常简单的组件。 有一个按钮，当它被点击时，就 alert。 instructions 用来表示是否点击了按钮，这是通过 SomeComponent 的 prop 的 do={true} 或 do={false} 来控制。
这里所发生的是，每当重新渲染 SomeComponent 组件(例如 do 从 true 切换到 false)时，按钮也会重新渲染，尽管每次 onClick 方法都是相同的，但是每次渲染都会被重新创建。
修复
如果函数不依赖于的组件(没有 this 上下文)，则可以在组件外部定义它。 组件的所有实例都将使用相同的函数引用，因为该函数在所有情况下都是相同的。
const createAlertBox = () => alert('!');
class SomeComponent extends React.PureComponent {
get instructions() {
if (this.props.do) {
return 'Click the button: ';
}
return 'Do NOT click the button: ';
}
render() {
return (
<div>
{this.instructions}
<Button onClick={createAlertBox} />
</div>
);
}
}
和前面的例子相反，createAlertBox 在每次渲染中仍然有着有相同的引用，因此按钮就不会重新渲染了。
虽然 Button 是一个小型，快速渲染的组件，但你可能会在大型，复杂，渲染速度慢的组件上看到这些内联定义，它可能会让你的 React 应用程序陷入囧境，所以最好不要在 render 方法中定义这些函数。
如果函数确实依赖于组件，以至于无法在组件外部定义它，你可以将组件的方法作为事件处理传递过去:
class SomeComponent extends React.PureComponent {
createAlertBox = () => {
alert(this.props.message);
};
get instructions() {
if (this.props.do) {
return 'Click the button: ';
}
return 'Do NOT click the button: ';
}
render() {
return (
<div>
{this.instructions}
<Button onClick={this.createAlertBox} />
</div>
);
}
}
但如果函数是动态的呢?
修复(高级)
这里有个非常常见的使用情况，在简单的组件里面，有很多独立的动态事件监听器，例如在遍历数组的时候：
class SomeComponent extends React.PureComponent {
render() {
return (
<ul>
{this.props.list.map(listItem =>
<li key={listItem.text}>
<Button onClick={() => alert(listItem.text)} />
</li>
)}
</ul>
);
}
}
在本例中，有一个可变数量的按钮，生成一个可变数量的事件监听器，每个监听器都有一个独特的函数，在创建 SomeComponent 时不可能知道它是什么。怎样才能解决这个难题呢?
输入记忆，或者简单地称为缓存。 对于每个唯一值，创建并缓存一个函数; 对于将来对该唯一值的所有引用，返回先前缓存的函数。
这就是我将如何实现上面的示例。
class SomeComponent extends React.PureComponent {
// SomeComponent的每个实例都有一个单击处理程序缓存，这些处理程序是惟一的。
clickHandlers = {};
// 在给定唯一标识符的情况下生成或返回单击处理程序。
getClickHandler(key) {
// 如果不存在此唯一标识符的单击处理程序，则创建
if (!Object.prototype.hasOwnProperty.call(this.clickHandlers, key)) {
this.clickHandlers[key] = () => alert(key);
}
return this.clickHandlers[key];
}
render() {
return (
<ul>
{this.props.list.map(listItem =>
<li key={listItem.text}>
<Button onClick={this.getClickHandler(listItem.text)} />
</li>
)}
</ul>
);
}
}
数组中的每一项都通过 getClickHandler 方法传递。所述方法将在第一次使用值调用它时创建该值的唯一函数，然后返回该函数。以后对该方法的所有调用都不会创建一个新函数;相反，它将返回对先前在内存中创建的函数的引用。
因此，重新渲染 SomeComponent 不会导致按钮重新渲染。类似地，相似的，在 list 里面添加项也会为按钮动态地创建事件监听器。
当多个处理程序由多个变量确定时，可能需要使用自己的聪明才智为每个处理程序生成唯一标识符，但是在遍历里面，没有比每个 JSX 对象生成的 key 更简单得了。
这里使用 index 作为唯一标识会有个警告：如果列表更改顺序或删除项目，可能会得到错误的结果。
当数组从 ['soda'，'pizza'] 更改为 ['pizza'] 并且已经缓存了事件监听器为 listeners[0] = () => alert('soda') ，您会发现 用户点击提醒苏打水的披萨的now-index-0按钮。 但点击 index 为 0 的按钮 pizza 的时候，它将会弹出 soda。这也是 React 建议不要使用数组的索引作为 key 的原因。
点击下方“阅读原文”查看更多内容。
以上是关于Web性能优化：缓存React事件来提高性能的主要内容，如果未能解决你的问题，请参考以下文章