React性能优化，六个小技巧教你减少组件无效渲染
<div align="center"><img src="https://img2022.cnblogs.com/blog/1213309/202208/1213309-20220814155744182-900052549.png"></div><h1 id="壹--引">壹 ❀ 引</h1>
<p>在过去的一段时间，我一直围绕项目中体验不好或者无效渲染较为严重的组件做性能优化，多少积累了一些经验所以想着整理成一片文章，下图就是优化后的一个组件，可以对比优化前一次切换与优化后多次切换的渲染颜色深度与按钮的切换速度：</p>
<div align="center"><img src="https://img2022.cnblogs.com/blog/1213309/202208/1213309-20220814154517418-72382851.gif"></div>
<div align="center"><img src="https://img2022.cnblogs.com/blog/1213309/202208/1213309-20220814154526701-2029094936.gif"></div>
<p>关于减少组件无效渲染，与其说是提几点建议，不如说是在优化过程中所记录的一些不规范的写法，能写出更好的代码总是更棒的，也希望这几点建议能对大家能有些许帮助。当然，以下建议不管<code>class</code>组件还是<code>hooks</code>其实都有参考意义，那么本文开始。</p>
<h1 id="贰--减少无效渲染">贰 ❀ 减少无效渲染</h1>
<p>在介绍如何减少无效渲染之前，我觉得有必要先声明两点，这对于理解如何减少无效渲染很有帮助：</p>
<p>常见的无效渲染主要分为两部分，第一部分是状态设计的不合理性所导致，比如A B C三个组件就应该拥有三个状态，但不合理的设计共用了一个<code>state</code>，这就导致用户改A就一定更新<code>state</code>，而<code>state</code>变化就会导致B C的无效渲染，当然这部分更看重各位同学对于组件设计的经验积累，在数据设计上注意下就好。本文着重探讨的是第二种情况，数据的不稳定所造成的无效渲染，如何理解这个不稳定呢？<strong>我们认定两个对象相等，除了对象的结构值看着一样之外，更重要的是保证其引用相同；而实际组件开发中，我们常常会遇到前后<code>props</code>结构一样但是引用每次都不同的情况。</strong>所以针对于值相同引用不同的情况，我们使用一些技巧保证其引用的稳定就好了。</p>
<p>说到这里有同学可能就会想，那是不是组件内只要产生新引用数据的行为就不对呢？其实并不是，当数据本身就应该更新时，它在这一刻产生一个全新的引用很合情合理，不然我们项目里什么<code>filter、map</code>之类的岂不是都用不了。你也可以想想常见的<code>state</code>更新，我们更新<code>state</code>时本身也是得传入一个全新的对象而不是直接修改，所以要更新时产生新对象很合理：</p>
<pre><code class="language-javascript">const App = () => {
const = useState({ name: "听风", age: 29 });
const handleClick = () => {
// 错误做法，直接修改 state, 不会更新
// state.name = '行星飞行';
// 正确做法就得重新赋予一个全新的对象，不然 state 不会更新
setState({ ...state, name: '行星飞行' });
}
return (
<div>
<div>{state.name}</div>
<div>{state.age}</div>
<button onClick={handleClick}>change name</button>
</div>
)
};
</code></pre>
<p>第二，当我们发现某个组件无效渲染严重时，你的关注点应该往上看，简单来说，我们的优化应该自上而下，当上层组件数据稳定了，在做下层组件优化时会方便很多，不然你在某个中间组件一顿操作，结果数据加工的入参自身就不稳定，这就很头疼。</p>
<p>强调了这两点，我们正式来了解如何减少无效渲染。</p>
<h3 id="贰--壹-合理使用memo与purecomponent">贰 ❀ 壹 合理使用memo与PureComponent</h3>
<p>我们知道<code>class</code>组件的<code>PureComponent</code>以及函数组件的<code>memo</code>都具有浅比较的作用，所谓浅比较就是直接比较前后两个数据是否相等，比如：</p>
<pre><code class="language-javascript">const a = [];
const b = a;
// 因为 a b 引用和值都相同，所以相等
a === b; // true
const c = [];
// 虽然 c 也是空数组，但是引用不同所以不相等
a === c; // false
</code></pre>
<p>我们假设组件前后都接收了一个空数组，且它们引用也相同，那么此时如果我们组件套用了<code>memo</code>，那么组件就不会因为这个完全相同的数据重复渲染。因为<code>PureComponent</code>与<code>memo</code>效果相同，这里我写了一个在线的memo例子方便大家理解效果，大家可以点击按钮查看控制台，直接对比加与不加<code>memo</code>的差异。</p>
<p>在这个例子中，我在组件外层定义了一份引用始终相同的数据<code>user</code>，之后通过点击按钮故意改变父组件<code>P</code>的状态让其渲染，以此带动子组件<code>C1 C2</code>渲染，可见加了<code>memo</code>的<code>C2</code>除了初次渲染之后并不会跟随父组件重复渲染，这就是<code>memo</code>的作用。</p>
<p>当然，假设我们的<code>user</code>每次都是重新创建的新对象，那我们加了<code>memo</code>也没任何作用，毕竟引用不同浅比较判断为<code>false</code>，还是会重复渲染。</p>
<p>另外，请合理使用这两个api，并不是所有场景都需要这么做，假设你的组件的数据流足够简单甚至没有<code>props</code>，你完全没必要在组件外层套一层<code>memo</code>。</p>
<p>其次，某些情况下，因为我们为组件嵌套了<code>memo</code>会导致我们通过<code>react</code>插件查看组件时显示组件名为<code>Unkown</code>，不利于调试，所以如果你要用，你可以通过<code>displayName</code>显示声明组件的名称，比如：</p>
<pre><code class="language-javascript">import React, { memo } from 'react';
const Echo = memo((props) => {});
// 某些情况下，使用 memo 会导致控制台调试时组件名显示为 Unkown ,可通过 displayName 显示声明组件名解决
Echo.displayName = 'Echo';
export {Echo};
</code></pre>
<p>在了解了如何减少引用相同引用时的无效渲染，接下来看看那些造成引用不同的问题场景。</p>
<h3 id="贰--贰-props直接传递新对象">贰 ❀ 贰 props直接传递新对象</h3>
<p>第一种也是最直接也最容易看出来的一种不规范写法，一般存在于对于<code>react</code>不太了解的新人或者一些老旧代码中，比如：</p>
<pre><code class="language-javascript">const App = () => {
return (
// 这里每次都会传递一个新的空数组过去，导致Child每次都会渲染，加了 memo 都救不了
<Child userList={[]} />
)
};
</code></pre>
<p>当然，它也可能不是一个空数组，但注定每次都是一个全新引用的数据：</p>
<pre><code class="language-javascript">const App = (props) => {
return (
<Child userList={[...props.list]} />
)
};
</code></pre>
<h3 id="贰--叁-不稳定的默认值">贰 ❀ 叁 不稳定的默认值</h3>
<p>正常来说，比如子组件的<code>userList</code>属性规定类型是数组，在父组件加工数据时提供数据默认值是非常好的习惯，于是我常常在组件内部或者<code>mapStateToProps</code>中看到类似的写法：</p>
<pre><code class="language-javascript">const App = (props) => {
// 当存在时赋予空数组，保证下层数组类型的正确性
const userList = props.userList || [];
return (
<Child userList={userList} />
)
};
</code></pre>
<p>当<code>App</code>多次渲染且<code>props.userList</code>为假值时，此时的<code>userList</code>也会被不断的赋予全新的空数组。还记得前文说的吗，当你结构没变化时，我们保证其引用不变不就好了，所以结合问题一与问题二，对于空数组都可以在全局赋予一个空数组，比如：</p>
<pre><code class="language-javascript">const emptyArr = [];
const App = (props) => {
// 当存在时赋予空数组，保证下层数组类型的正确性
const userList = props.userList || emptyArr;
return (
<Child userList={userList} />
)
};
</code></pre>
<p>这样不管<code>App</code>如何渲染，当<code>userList</code>被赋予为空数组时也能让前后引用相同。</p>
<h3 id="贰--肆-合理使用usememo与usecallback">贰 ❀ 肆 合理使用useMemo与useCallback</h3>
<p>我们知道<code>useMemo</code>与<code>useCallback</code>都能起到缓存的作用，比如下面这个例子：</p>
<pre><code class="language-javascript">// 只要 App 自身重复渲染，此时 handleClick 与 list 都会重新创建，导致引用不同，所以 C 即便加了 memo 还是会重复渲染
const App = (props)=> {
const handleClick = () => {};
const fn = () => {}
const list = [];
const user = userList.filter();
return <C onClick={handleClick} list={list} user={user} />
}
</code></pre>
<p>只要组件<code>App</code>自身重复渲染，组件内的这些属性方法本质上会被重新创建一遍，这就导致子组件<code>C</code>即便添加<code>memo</code>也无济于事，所以对于函数组件而言，一般要往下传递的数据我们可以通过<code>useMemo</code>与<code>useCallback</code>包裹，保证其引用稳定性。当然，如果一份数据只是<code>App</code>组件自己用，那就没必要特意包裹了：</p>
<pre><code class="language-javascript">// 常量提到外层，保证引用唯一
const list = [];
const App = ()=> {
// 使用 useCallback 缓存函数
const handleClick = useCallback(() => {});
// 只是自己使用，不作为props传递时，没必要使用 useCallback 嵌套
const handleOther = () => {}
// 使用 useMemo 缓存结果
const user = useMemo(()=>{
return userList.filter();
},)
return <C onClick={handleClick} list={list} user={user} />
}
</code></pre>
<p>一般<code>useMemo、useCallback</code>与<code>memo</code>会联合使用，既然你的下层组件都会做浅比较，我们尽可能稳定上层数据引用的稳定性就很有必要；而假设组件连<code>memo</code>都没有，即便我们做了缓存子组件还是一样会重复渲染，所以要不要用以及为何而用大家一定要搞清楚。</p>
<h3 id="贰--伍-更稳定的useselector">贰 ❀ 伍 更稳定的useSelector</h3>
<p>我们可以使用<code>useSelector</code>监听全局<code>store</code>的变化并从中取出我们想要的数据，而相同的数据获取如果是在<code>class</code>组件中则应该写在<code>mapStateToProps</code>中，但不管哪种写法，当我们从<code>state</code>中获取数据后就应该注意保持数据的稳定性，来看个例子：</p>
<pre><code class="language-javascript">const userList = useSelector((state) => {
const users = state.userList;
return users.filter((user) => user.age > 18);
});
</code></pre>
<p>在上述例子中，我们从<code>state</code>中获取了<code>userList</code>，之后又进行了数据加工过滤出年龄大于<code>18</code>的用户，这个写法看似没什么问题，但事实上全局<code>state</code>的状态并没有我们的想的那么稳定，所以<code>useSelector</code>执行的次数要比你想的要多，此时只要<code>useSelector</code>执行一次，我们都会从<code>state</code>中获取数据，并通过<code>filter</code>加工成一个全新的数组，这对于子组件而言是非常致命的。</p>
<p>如何改善呢？其实很简单，将加工的行为提到外部即可，比如：</p>
<pre><code class="language-javascript">const users = useSelector((state) => {
return state.userList;
});
const userList = useMemo(() => {
return users.filter(user => user.age > 18);
}, )
</code></pre>
<p>有同学可能就要说了，这不对吧，此时的<code>useSelector</code>每次都返回<code>state.userList</code>难道不是一个全新的对象？那<code>useMemo</code>不还是每次都会执行，导致<code>userList</code>每次都是全新的数组吗？其实并不是。</p>
<p>对于<code>redux</code>而言，我们可以将整个<code>react app</code>的<code>store</code>理解成一颗巨大的树，而树有很多分支的树根，每一枝树根都可以理解成某个组件所依赖的<code>state</code>，那么请问假设<code>A</code>组件的树根被更新了，它会对<code>store</code>的其它树根的引用造成影响吗？此时树还是这颗树啊，而那些没变的树根依旧是之前的树根。</p>
<p>我们可以通过下面的例子来理解这个过程：</p>
<pre><code class="language-javascript">const store = {
A: [],
B: {},
};
const b = store.B;
store.A = ;
const c = store.B;
c === b; // true
</code></pre>
<p>所以回到上文的代码，假设<code>state</code>中关于<code>state.userList</code>就没有变化，那么前后不管取多少次，因为引用相同，<code>useMemo</code>除了初始化会执行一次之外，之后都不会重新执行，这就能让<code>userList</code>彻底稳定下来。</p>
<p>而假设我们因为成员接口让<code>state.userList</code>进行了更新，正常来说应该在<code>reducer</code>中重新生成一个新数组再赋予给<code>store</code>，那么在下次<code>useSelector</code>执行时，我们也能拿到全新引用的<code>users</code>，而监听<code>users</code>的<code>useMemo</code>就能按照正确的预期再度更新了。</p>
<p>其实在实际项目中，大家可能还有使用<code>useSelector + createSelector</code>的用法，<code>useSelector</code>用于监听<code>state</code>，<code>createSelector</code>中负责提取<code>state</code>中的部分数据进行加工以及缓存，所以我在我们项目中多次看到类似如下的代码：</p>
<pre><code class="language-javascript">const userList = useSelector((state) => {
// 这里你就理解成一个具有缓存效果的函数就好了，入参不变结果就不变
const users = userSelector.getUser(state, userIDs);
return users.filter(user => user.age > 18);
});
</code></pre>
<p>本来<code>userSelector</code>就具备缓存的作用，当你<code>userIDs</code>没变化时，我失踪走缓存给你稳定的数据，结果前面刚帮你稳定完，后面通过<code>filter</code>又产生了一个全新的数据，数据的稳定性直接被破坏了，所以改法还是跟之前一样：</p>
<pre><code class="language-javascript">const users = useSelector((state) => {
return userSelector.getUser(state, userIDs);
});
const userList = useMemo(() => {
return users.map(user => user.age > 18);
}, )
</code></pre>
<h3 id="贰--陆-贪心的createselector">贰 ❀ 陆 贪心的createSelector</h3>
<p>既然上文提到了<code>createSelector</code>，这里再讲一个项目中大家很容易犯的错误写法。前文已经说了<code>createSelector</code>你可以理解成一个缓存函数，只是一般我们会将其与<code>state</code>挂钩，用于在加工<code>state</code>时初步做一些缓存，但实际开发中我发现了部分同事写了类似这样的代码：</p>
<pre><code class="language-javascript">export const getUserListSelector = createSelector(, (a, b) => {
// 一些加工
});
</code></pre>
<p>这里我们定义了一个名为<code>getUserListSelector</code>的方法，它接受<code>a,b</code>两个参数，只要这两个参数不变，那么紧跟其后的<code>callback</code>就不会重复执行，这样就起到缓存的作用。</p>
<p>但同事在调用时是这么用的：</p>
<pre><code class="language-javascript">// a场景
const users = useSelector((state) => {
return getUserListSelector(state, userIDs);
});
// b场景
const users = useSelector((state) => {
return getUserListSelector(state);
});
</code></pre>
<p>简单来理解就是，其实存在两种取数据的场景，我们将其糅合到了<code>getUserListSelector</code>中，当<code>a</code>场景时我们需要传递两个参数，而<code>b</code>场景我们只用一个即可，有问题吗？有很大的问题。</p>
<p><code>createSelector</code>这个东西与传统的缓存函数不同，一般的缓存函数是，只要你的参数不同，我们就用你参数的作为<code>key</code>，让结果作为<code>value</code>存起来，对应到上面的场景执行两次后，我们最终缓存可能是这样：</p>
<pre><code class="language-javascript">const cache = {
a-b:value1,
a:value2
}
</code></pre>
<p>两次入参不同，导致2次不同的缓存结果。但很尴尬的是，<code>createSelector</code>永远只缓存最新一次的缓存结果，也就是说对于上述<code>createSelector</code>只要<code>a b</code>两个场景都会调用，那么这个最终的数据永远都稳定不下来，两个场景始终会影响彼此。</p>
<p>怎么解决呢？解耦即可，我们应该让<code>createSelector</code>去取更稳定的数据，即便这个数据不够精准，返回后再分别在<code>a b</code>两个场景中单独去加工，为什么强调这一点呢？要知道<code>createSelector</code>经常存在嵌套关系，某个<code>selector</code>可能是另一个<code>selector</code>的入参，假设上述这个不稳定的<code>selector</code>返回的数据又成了其它<code>selector</code>的参数，这就会导致多条数据源全部不稳定，这是非常糟糕的。</p>
<p>有同学可能对这种只缓存最新一次结果的缓存函数比较好奇，它这种判断参数变没变到底有哪些依据呢，这里我找了一个类似的库，同样是只缓存最新一次的缓存方法，对于入参变没变判断的源码：</p>
<pre><code class="language-javascript">function memoized(
this: ThisParameterType<TFunc>,
...newArgs: Parameters<TFunc>
): ReturnType<TFunc> {
// 只有当需要缓存，且this相同，且新旧入参相同时才会返回缓存的结果
if (cache && cache.lastThis === this && isEqual(newArgs, cache.lastArgs)) {
return cache.lastResult;
}
// 删除无意义的部分
}
</code></pre>
<p>再看看<code>isEqual</code>的实现，大家就知道这个入参的判断逻辑了：</p>
<pre><code class="language-javascript">function isEqual(first: unknown, second: unknown): boolean {
// 真正的对比其实用的是 ===
if (first === second) {
return true;
}
// 删除部分NaN的对比
return false;
}
export default function areInputsEqual(
newInputs: readonly unknown[],
lastInputs: readonly unknown[],
): boolean {
// 先判断入参的长度是否相同，参数长度都不同直接返回false
if (newInputs.length !== lastInputs.length) {
return false;
}
for (let i = 0; i < newInputs.length; i++) {
// 遍历，一次拿新旧参数进行对比
if (!isEqual(newInputs, lastInputs)) {
return false;
}
}
return true;
}
</code></pre>
<p>通过代码我们能得到，只要参数前后的数量对不上，或者参数的引用对不上，值对不上，这些我们都默认成不相等，此时就会重新计算缓存最新的结果，反之则认为相同，直接返回上次的缓存结果，对这个库感兴趣的可以看看 memoize-one。</p>
<p>OK，关于如何提升数据的稳定性，我们先介绍到这里，我也相信通过本文的阅读对于你之后的开发多少会有一些清晰的帮助。</p>
<h1 id="叁--如何排查不稳定数据">叁 ❀ 如何排查不稳定数据？</h1>
<p>其实聊到这里，我想大家多少都有了一些体会，可能有同学就想提问了，我自己新写一个组件我知道如何去规避这些点，那一个现有的组件假设渲染很严重，我又该如何去排查是哪些不稳定的数据导致了重复渲染呢？</p>
<p>方法肯定是有的，我们可以借助why-did-you-update或者why-did-you-render性能监测库，具体用法可见GitHub文档，这里就不赘述，当配置好后打开控制台刷新页面，你就能看到对应组件重复渲染的原因，比如：</p>
<div align="center"><img src="https://img2022.cnblogs.com/blog/1213309/202208/1213309-20220814154617121-725726134.png"></div>
<p>上图就是因为新旧<code>props</code>引用不同所导致的无效渲染，至于如何减少无效渲染我想你现在也有了一些答案。</p>
<p>除了上面这两个库之外，我们还能利用<code>react</code>官网的插件<code>Profiler</code>，我们可以点击设置将记录组件渲染原因的选项勾上：</p>
<div align="center"><img src="https://img2022.cnblogs.com/blog/1213309/202208/1213309-20220814154629177-1067706496.jpg"></div>
<p>之后通过点击录制组件的渲染，<code>hover</code>到对应的组件上去就知道渲染的原因了，这也是一种排查手段，比如有如下组件：</p>
<pre><code class="language-javascript">const C = memo((props) => {
return <div>{props.num}</div>
});
const Parent = () => {
const = useState(1);
const handleClick = () => {
setState(state + 1);
};
return (
<>
<C num={state} />
<button onClick={handleClick}>changeState</button>
</>
);
}
</code></pre>
<p>我们点击父组件的按钮每次修改<code>state</code>，并将<code>state</code>传递给子组件<code>C</code>，通过录制，我们可以很清晰的看到是因为<code>props num</code>变化所导致的渲染。</p>
<div align="center"><img src="https://img2022.cnblogs.com/blog/1213309/202208/1213309-20220814154635137-1405971652.png"></div>
<p>有了排查手段以及修复手段，其实只要大家耐心和细心，我相信大家都能写出更优雅的组件。</p>
<h1 id="叁--总">叁 ❀ 总</h1>
<p>那么到这里，本文围绕如何减少无效渲染的介绍就结束了，其实说了那么多，核心点还是关注在如何保证数据引用的稳定性，除此之外，我们也顺带介绍了几点如何排查组件渲染的小技巧。下周就离职回武汉了，希望一切能顺利，本文结束。</p><br><br>
来源：https://www.cnblogs.com/echolun/p/16585566.html
頁:
[1]