<blockquote>
原文：
<a href="https://link.juejin.im?target=https%3A%2F%2Fwww.codementor.io%2Fblog%2Freact-optimization-5wiwjnf9hj">21 Performance Optimization Techniques for React Apps</a>
<br> 作者：Nishant
<br> 译者：博轩
</blockquote>
<p><img alt="" class="blockcode" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-938794257ed201ae77e8481d22fbe7f3"></p>
<h3>介绍</h3>
<p>在 <code>React</code> 内部，<code>React</code> 会使用几项巧妙的小技术，来优化计算更新 <code>UI</code> 时，所需要的最少的更新 <code>DOM</code> 的操作。在大多数情况下，即使你没有针对性能进行专项优化，<code>React</code> 依然很快，但是仍有一些方法可以加速 <code>React</code> 应用程序。本文将介绍一些可用于改进 <code>React</code> 代码的有效技巧。</p>
<h3>1.使用不可变数据结构</h3>
<p>数据不变性不是一种架构或者设计模式，它是一种编程思想。它会强制您考虑如何构建应用程序的数据流。在我看来，数据不变性是一种符合严格单项数据流的实践。</p>
<p>数据不变性，这一来自函数式编程的概念，可应用于前端应用程序的设计。它会带来很多好处，例如：</p>
<ul><li>零副作用</li><li>不可变的数据对象更易于创建，测试，和使用；</li><li>利于解耦；</li><li>更加利于追踪变化；</li></ul>
<p>在 <code>React</code> 环境中，我们使用 <code>Component</code> 的概念来维护组件内部的状态，对状态的更改可以导致组建的重新渲染。</p>
<p><code>React</code> 构建并在内部维护呈现的UI（Virtual DOM）。当组件的 <code>props</code> 或者 <code>state</code> 发生改变时，<code>React</code> 会将新返回的元素与先前呈现的元素进行比较。当两者不相等时，<code>React</code> 将更新 DOM。因此，在改变状态时，我们必须要小心。</p>
<p>让我们考虑一个用户列表组件：</p>
<pre class="blockcode"><code>state = {
users: []
}
addNewUser = () =>{
/**
* OfCourse not correct way to insert
* new user in user list
*/
const users = this.state.users;
users.push({
userName: "robin",
email: "email@email.com"
});
this.setState({users: users});
}复制代码</code></pre>
<p>这里的关注点是，我们正在将新的用户添加到变量 <code>users</code> ，这里它对应的引用是 <code>this.state.users</code>。</p>
<p><strong>专业提示</strong> ： 应该将 <code>React</code> 的状态视为不可变。我们不应该直接修改 <code>this.state</code>，因为 <code>setState()</code> 之后的调用可能会覆盖你之前的修改。</p>
<p>那么，如果我们直接修改 <code>state</code> 会产生什么问题呢？比方说，我们添加 <code>shouldComponentUpdate</code> ，并对比 <code>nextState</code>和 <code>this.state</code> 来确保只有当数据改变时，才会重新渲染组件。</p>
<pre class="blockcode"><code>shouldComponentUpdate(nextProps, nextState) {
if (this.state.users !== nextState.users) {
return true;
}
return false;
}复制代码</code></pre>
<p>即使用户的数组发生了改变，<code>React</code> 也不会重新渲染UI了，因为他们的引用是相同的。</p>
<p>避免此类问题最简单的方法，就是避免直接修改 <code>props</code> 和 <code>state</code>。所以，我们可以使用 <code>concat</code> 来重写 <code>addNewUser</code> 方法：</p>
<pre class="blockcode"><code>addNewUser = () => {
this.setState(state => ({
users: state.users.concat({
timeStamp: new Date(),
userName: "robin",
email: "email@email.com"
})
}));
};复制代码</code></pre>
<p>为了处理 <code>React</code> 组件中 <code>props</code> 或者 <code>state</code> 的改变，我们可以考虑一下几种处理不可变的方法：</p>
<ul><li>对于数组：使用 <code>[].concat</code> 或es6的 <code>[ ...params]</code></li><li>对象：使用 <code>Object.assign({}, ...)</code> 或 es6的 <code>{...params}</code></li></ul>
<p>在向代码库引入不变性时，这两种方法有很长的路要走。</p>
<p>但是，最好使用一个提供不可变数据结构的优化库。以下是您可以使用的一些库：</p>
<ul><li><a href="https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fkolodny%2Fimmutability-helper">Immutability Helper</a>：这是一个很好的库，他可以在不改变源的情况下，提供修改后的数据。</li><li><a href="https://link.juejin.im?target=https%3A%2F%2Ffacebook.github.io%2Fimmutable-js%2F">Immutable.js</a> ：这是我最喜欢的库，因为它提供了许多持久不可变的数据，包括：<a href="https://link.juejin.im?target=https%3A%2F%2Ffacebook.github.io%2Fimmutable-js%2Fdocs%2F%23%2FList">List</a>，<a href="https://link.juejin.im?target=https%3A%2F%2Ffaceb |
|
转播
