React 中常见的反模式与陷阱-优快云博客

原文链接：https://juejin.im/post/5acad683f265da23953146cd

原文地址：How to NOT React: Common Anti-Patterns and Gotchas in React
原文作者：NeONBRAND
译文出自：掘金翻译计划
本文永久链接：github.com/xitu/gold-m…
译者：MechanicianW
校对者：anxsec ClarenceC

什么是反模式？反模式是软件开发中被认为是糟糕的编程实践的特定模式。同样的模式，可能在过去一度被认为是正确的，但是现在开发者们已经发现，从长远来看，它们会造成更多的痛苦和难以追踪的 Bug。

作为一个 UI 库，React 已经成熟，并且随着时间的推移，许多最佳实践也逐渐形成。我们将从数千名开发者集体的智慧中学习，他们曾用笨方法（the hard way）学习这些最佳实践。

此言不虚！

让我们开始吧！

1. 组件中的 bind() 与箭头函数

在使用自定义函数作为组件属性之前你必须将你的自定义函数写在 constructor 中。如果你是用 extends 关键字声明组件的话，自定义函数（如下面的 updateValue 函数）会失去 this 绑定。因此，如果你想使用 this.state，this.props 或者 this.setState，你还得重新绑定。

Demo

class app extends Component {
constructor(props) {
super(props);
this.state = {
name: ''
};
this.updateValue = this.updateValue.bind(this);
}
updateValue(evt) {
this.setState({
name: evt.target.value
});
}
render() {
return (
<form>
<input onChange={this.updateValue} value={this.state.name} />
</form>
)
}
}
复制代码

问题

有两种方法可以将自定义函数绑定到组件的 this。一种方法是如上面所做的那样，在 constructor 中绑定。另一种方法是在传值的时候作为属性的值进行绑定：

<input onChange={this.updateValue.bind(this)} value={this.state.name} />
复制代码

这种方法有一个问题。由于 .bind() 每次运行时都会创建一个函数，这种方法会导致每次 render **函数执行时都会创建一个新函数。**这会对性能造成一些影响。然而，在小型应用中这可能并不会造成显著影响。随着应用体积变大，差别就会开始显现。这里有一个案例研究。

箭头函数所涉及的性能问题与 bind 相同。

<input onChange={ (evt) => this.setState({ name: evt.target.value }) } value={this.state.name} />
复制代码

这种写法明显更清晰。可以看到 prop onChange 函数中发生了什么。但是，这也导致了每次 input 组件渲染时都会创建一个新的匿名函数。因此，箭头函数有同样的性能弊端。

解决方案

避免上述性能弊端的最佳方法是在函数本身的构造器中进行绑定。这样，在组件创建时仅创建了一个额外函数，即使再次执行 render 也会使用该函数。

有一种情况经常发生就是你忘记在构造函数中去 bind 你的函数，然后就会收到报错（Cannot find X on undefined.）。Babel 有个插件可以让我们使用箭头语法写出自动绑定的函数。插件是 Class properties transform。现在你可以这样编写组件：

class App extends Component {
constructor(props) {
super(props);
this.state = {
name: ''
};
// 看！无需在此处进行函数绑定！
}
updateValue = (evt) => {
this.setState({
name: evt.target.value
});
}
render() {
return (
<form>
<input onChange={this.updateValue} value={this.state.name} />
</form>
)
}
}
复制代码

延伸阅读

2. 在 key prop 中使用索引

遍历元素集合时，key 是必不可少的 prop。key 应该是稳定，唯一，可预测的，这样 React 才能追踪元素。key 是用来帮助 React 轻松调和虚拟 DOM 与真实 DOM 间的差异的。然而，使用某些值集例如数组索引，可能会导致你的应用崩溃或是渲染出错误数据。

Demo

{elements.map((element, index) =>
<Display
{...element}
key={index}
/>
)
}
复制代码

问题

当子元素有了 key，React 就会使用 key 来匹配原始树结构和后续树结构中的子元素。**key 被用于作身份标识。**如果两个元素有同样的 key，React 就会认为它们是相同的。当 key 冲突了，即超过两个元素具有同样的 key，React 就会抛出警告。

警告出现重复的 key。

这里是 CodePen 上使用索引作为 key 可能导致的问题的一个示例。

解决方案

被使用的 key 应该是：

唯一的：元素的 key 在它的兄弟元素中应该是唯一的。没有必要拥有全局唯一的 key。
稳定的：元素的 key 不应随着时间，页面刷新或是元素重新排序而变。
可预测的：你可以在需要时拿到同样的 key，意思是 key 不应是随机生成的。

数组索引是唯一且可预测的。然而，并不稳定。同样，随机数或时间戳不应被用作为 key。

由于随机数既不唯一也不稳定，使用随机数就相当于根本没有使用 key。即使内容没有改变，组件也会每次都重新渲染。

时间戳既不稳定也不可预测。**时间戳也会一直递增。**因此每次刷新页面，你都会得到新的时间戳。

通常，你应该依赖于数据库生成的 ID 如关系数据库的主键，Mongo 中的对象 ID。如果数据库 ID 不可用，你可以生成内容的哈希值来作为 key。关于哈希值的更多内容可以在这里阅读。

延伸阅读

3. setState() 是异步的

React 组件主要由三部分组成：state，props 和标记（或其它组件）。props 是不可变的，state 是可变的。state 的改变会导致组件重新渲染。如果 state 是由组件在内部管理的，则使用 this.setState 来更新 state。关于这个函数有几件重要的事需要注意。我们来看看：

Demo

class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
counter: 350
};
}
updateCounter() {
// 这行代码不会生效
this.state.counter = this.state.counter + this.props.increment;
// ---------------------------------
// 不会如预期生效
this.setState({
counter: this.state.counter + this.props.increment; // 可能不会渲染
});
this.setState({
counter: this.state.counter + this.props.increment; // this.state.counter 的值是什么？
});
// ---------------------------------
// 如期生效
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
}
}
复制代码

问题

请注意第 11 行代码。如果你直接修改了 state，组件并不会重新渲染，修改也不会有任何体现。这是因为 state 是进行浅比较（shallow compare）的。你应该永远都使用 setState 来改变 state 的值。

现在，如果你在 setState 中通过当前的 state 值来更新至下一个 state （正如第 15 行代码所做的），React 可能不会重新渲染。这是因为 state 和 props 是异步更新的。也就是说，DOM 并不会随着 setState 被调用就立即更新。React 会将多次更新合并到同一批次进行更新，然后渲染 DOM。查询 state 对象时，你可能会收到已经过期的值。文档也提到了这一点：

由于 this.props 和 this.state 是异步更新的，你不应该依赖它们的值来计算下一个 state。

另一个问题出现于一个函数中有多次 setState 调用时，如第 16 和 20 行代码所示。counter 的初始值是 350。假设 this.props.increment 的值是 10。你可能以为在第 16 行代码第一次调用 setState 后，counter 的值会变成 350+10 = **360。**并且，当第 20 行代码再次调用 setState 时，counter 的值会变成 360+10 = 370。然而，这并不会发生。第二次调用时所看到的 counter 的值仍为 350。**这是因为 setState 是异步的。**counter 的值直到下一个更新周期前都不会发生改变。setState 的执行在事件循环中等待，直到 updateCounter 执行完毕前，setState 都不会执行，因此 state 的值也不会更新。

解决方案

你应该看看第 27 和 31 行代码使用 setState 的方式。以这种方式，你可以给 setState 传入一个接收 currentState 和 currentProps 作为参数的函数。这个函数的返回值会与当前 state 合并以形成新的 state。

延伸阅读