缓存 React 事件监听器来提高性能
栏目分类：技术文章 发布日期：2018-11-09 作者：哒哒
在 js 里面有个不被重视的概念：对象和函数的引用，而这个却直接地影响了 React 的性能。如果你打算创建两个相同的函数，但是却又不相等。你可以试着：
|
1
2
3
|
const functionOne = function() { alert('Hello world!'); };
const functionTwo = function() { alert('Hello world!'); };
functionOne === functionTwo; // false
|
如果将一个变量指向一个已经存在的函数，看看它们的不同:
|
1
2
3
|
const functionThree = function() { alert('Hello world!'); };
const functionFour = functionThree;
functionThree === functionFour; // true
|
对象也是这样的。
|
1
2
3
4
5
|
const object1 = {};
const object2 = {};
const object3 = object1;
object1 === object2; // false
object1 === object3; // true
|
如果你学过其他语言，可能会熟悉指针。每次你创建对象的时候，你都会为其分配设备内存。当声明 oject1 = {} 的时候，将会在用户的 RAM 中创建一串字节给到 object1。可想而知，object1 就是一个保存了键值对存放在 RAM 的地址。而声明 object2 = {}，将会在 RAM 中创建另外一串不同的字节给到object2。object上地址和object2 的一样吗？不是的。这也为什么这两个变量的是不相等。他们的键值对可能会完全相同，但是他们在内存中的地址是不一样的，这才是会被比较的地方。
若使得object3 = object1，会让object3的值为object1的地址。这不是一个新的对象。内存中的位置是一样的。可以如下验证：
|
1
2
3
4
|
const object1 = { x: true };
const object3 = object1;
object3.x = false;
object1.x; // false
|
这个例子里，在内存中创建对象并指向object1。让后让object3等于同样的内存地址。通过修改object3，可以改变对应内存中的值，这也意味着所有指向该内存的变量都会被修改。obect1，仍指向该内存，所以值也被改变了。
初级工程师会犯这种非常常见的错误，并且需要深入学习相关教程；只是本文是讨论 React 性能的，甚至是对变量引用有较深资历的开发者也可能需要学习。
这个和 React 有什么关系呢？React 有个节省执行时间的聪明方式，可以优化性能：如果组件的 props 和 state 都没有变化，render 的输出必然也是没有变化的。很清晰的，如果所有的都一样，那就意味着没有变化。如果没有变化，render 必须返回相同的输出，就不用执行了。这使得 React 更加快速，按需渲染。
React 采用和 JavaScript 一样的方式，通过简单的 == 操作符来判断 props 和 state 是否有变化。React 不会深入比较对象是否相等。深对比是对比对象的每一个键值对，而不是对比内存地址。React 处理方式就是浅对比，仅仅是对比一下引用是否相同而已。
如若将组件的 prop 从 { x: 1 } 改为另外一个 { x: 1 }，React 将会重新渲染，因为这两个对象在内存上有不用的引用。如果只是将组件的 prop 从上文中的 object1 改为 object3，React 是不会重新渲染的，应为这两个对象是同一个引用。
在 Javascript，函数也是同样的处理方式。如果 React 接收到不同内存地址而功能相同的函数，React 也会重新渲染。如果 React 接收到相同函数的引用，就会不重新渲染。
在代码审核的时候，我就遇到下面这种常见误用的场景：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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} 决定了 instructions。
这里有问题的是，当 SomeComponent 重新渲染的时候（例如 do 属性从 true 切换到 false），Button 也会重新渲染！尽管每次这个onClick方法都是相同的，但是每次渲染都会被重新创建。每次渲染都会在内存中创建新的函数（因为会在 render 函数里重新创建），一个指向新内存地址的引用被传递到 <Button />，虽然输入完全没有变化，该 Button 组件还是会重新渲染。
修改
如果函数不依赖于组件（不是 this 上下文），你可以在组件的外部定义它。所有的组件实例都会用到相同的引用，因为都是同一个函数。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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 应用里面真的会有很多很多。最好不要在渲染方法里面定义这些函数。
如果函数确实依赖于组件，使得你不能在组件外部定义，你可以将组件的方法作为事件处理传递过去。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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>
);
}
}
|
在本例中，每个SomeComponent的实例有不同的告警方式。按钮的点击事件处理需要独立于SomeComponent。通过传递createAlertBox方法，他就和SomeComponent是否渲染无关了。甚至和message这个属性是否修改也没有关系。createAlertBox 的内存地址没有改变，意味着Button没有重新渲染。这可以节省运行时间并提升应用的渲染速度。
但是如果函数是动态的怎么办呢？
修改(高级)
这里有个非常常见的使用情况，在简单的组件里面，有很多独立的动态事件监听器，例如在遍历数组的时候：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
class SomeComponent extends React.PureComponent {
render() {
return (
<ul>
{this.props.list.map(listItem =>
<li key={listItem.text}>
<Button onClick={() => alert(listItem.text)} />
</li>
)}
</ul>
);
}
}
|
在这个例子里面，有不确定数量的按钮和监听器，每个按钮都有独立的函数，并且无法在组件SomComponent创建之前知道。要如何解决这个难题呢？
输入记忆，或者更简单的称之为缓存。对于每个唯一的值，创建和缓存对应的函数。对以后这个唯一值的所有引用，都返回之前的缓存函数。
这就是我如何实现上面的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
class SomeComponent extends React.PureComponent {
// Each instance of SomeComponent has a cache of click handlers
// that are unique to it.
clickHandlers = {};
// Generate and/or return a click handler,
// given a unique identifier.
getClickHandler(key) {
// If no click handler exists for this unique identifier, create one.
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组件时，不会引起Button组件的重新渲染。相似的，在list里面添加项也会为按钮动态地创建事件监听器。
可能需要费点脑子为事件处理函数创建唯一的标识，来区分不同的函数，但是在遍历里面，没有比每个 JSX 对象生成的 key 更简单得了。
这里对使用 index 当作唯一标识有个提醒：如果数组顺序改了或者有删除项，可能会获得错误的返回。当将数组从 [ 'soda', 'pizza' ] 改为 [ 'pizza' ]，同时已经缓存了事件监听器为listeners[0] = () => alert('soda')，但点击 index 为 0 的按钮 pizza 的时候，它将会弹出 soda。这也是React建议不要使用数组的索引作为 key 的原因。
- 上一篇：探寻 JavaScript 精度问题以及解决方案
- 下一篇：健壮高效的小程序登录方案
