React在构建高性能前端应用时有哪些最佳实践？

本文共计3444个文字，预计阅读时间需要14分钟。

目录

一、每次渲染都有它自己的Props和State

二、每次渲染都有它自己的Effects

三、关于依赖项不要对React撒谎

四、两种实现依赖告警的方法

五、来自useReducer的助力

六、把函数移动到...

目录

• 一、每一次渲染都有它自己的 Props and State
• 二、每次渲染都有它自己的Effects
• 三、关于依赖项不要对React撒谎
• 四、两种诚实告知依赖的方法
• 五、来自useReducer的助攻
• 六、把函数移到Effects里
• 七、我不想把可复用的函数放到Effect里

这篇文章会假设你对useEffectAPI有一定程度的了解。

一、每一次渲染都有它自己的 Props and State

在我们讨论 effects 之前，我们需要先讨论一下渲染，当我们更新 state 的时候，React会重新渲染组件。每一次渲染都能拿到独立的 state，这个状态值是函数中的一个常量。

这里关键的点在于任意一次渲染中的常量都不会随着时间改变。渲染输出会变是因为我们的组件被一次次调用，而每一次调用引起的渲染中，它包含的值独立于其他渲染。

如果 props 和 state 在不同的渲染中是相互独立的，那么使用到它们的任何值也是独立的（包括事件处理函数）。它们都“属于”一次特定的渲染。即便是事件处理中的异步函数调用“看到”的也是这次渲染中的值。