React Hooks 最佳实践

写在前面

在曩昔的几个月里，React Hooks 在咱们的项目中得到了充分利用。在实践运用过程中，我发现 React Hooks 除了带来简练的代码外，也存在对其运用不当的状况。

在这篇文章中，我想总结我曩昔几个月来对 ReacI 2 ] / 7 J S F 8t Hooks 运用，分享我对它的看法以及我认为的最佳实践，供咱们参考。

本文假定读者5 7 &现已对 Re* d G 4 l D W Z gact-Hooks 及其运用办法有了开始的了解。您能够经过 官方文档 进行学习。

函数式组件

简而Q w J : x e言之，便是在一个函数中回来 React Element。

const App = (props) => {
const { title } = props;
returz ) c g k / S : Tn (
<h1>{title}</h1>
);
};

一般的，该函数接纳唯一的 ? b F 6参数：props 目标。从该目标中，咱们能b h 0 0 W d & =够读取到数据，并经过核算发作新的数据，终究回来Z D 4 A q 6 React Elements 以交给 React 进行烘托。此外也能够挑选在函数中履行副效果。

在本文中，咱们给函数式组件的函数起个简略I ~ L d O 5 q R :一点的姓名：render 函数。

const appElement = App({ title: "XXX" }# 2 r ? 2 R L);
ReactDOM.render(
appElement,
document.getElementByI s ) Md('app')
);

在上方的代码中，咱们自行调用了p l ~ * L j render 函数以期履行烘托。然而这在 React 中不是正常的操作。

正常操作是像下方这样的代码：

// React.createElement(App, {
//     title: "XXX"
// V Z ^ V $ });
const appElement = <App title="XXX" />;
ReactDOM.render(
appElement,
document.getElementById('app')& ` 4 Z
);] e z 2 $ [ H (

在 React 内部，它会决定在何时调用 render 函数，并对回来的 React Elements 进行遍历，假如遇到函数组件，React 便会持续调用这个函数组件。在这个过程中，能够由父组件经过 props 将r x { V R S Y g数据传递到该子组件中。终究 React 会调用完一切的组件，然后知晓怎么进行烘托。

这种把 render 函数交给 React 内部处理的机制，为引入状况带来了或许。] p k D

在本文中，为了便利描绘，关于 render 函数的每次调用，我想称它为一帧。

每一帧具有独立的变量

在引入状况之前，咱们需求了解这一点。

咱们经过 例一 进行调查：

function Example(props) {
conb  ~ B L w =st { count } = props;
consR a & H ] u z kt handleClick = () => {
setTimS m * ^ l $ Oeout(() => {
alert(count);
}, 3000);
};
return (
<div>
<p>{count}</p>
<button onClick={handleClick}>Alert Count</button>
</div>
);
}

重点重视 <Example> 函数组件的代码，其间的 count 特点由父6 [ A E m E l y组件传入，初始值为 0，每隔一秒增加 1。点击 “Alert Count” 按钮，将延迟 3 秒钟R ( 8 I弹出 count 的值。操作后发现，弹窗中呈现的值，与页面中文本展现的值不同，而是等于点击 “alert Count” 按钮时 count 的值。

假如更换为 class 组件，它的完结是 <Example2> 这样的：

class Example2 extends C.  U ` h 1 ;omponent {
handleClick = ()o  U ? A i => {
setTimeoutg g D n J !(() => {
alert(this.proa s K { u W [ ? Vps.count);
}, 3000);
};
render() {
return (
<div>
<h2>ExampL J 3 a : sle2</h2>
<p>{this.props.count}</p&,  * % Y Lgt;
<button onClick={this.handleClick}>Alert Count</button>
</div>
);
}
}

此刻x : + j M，点击 “Alert Count” 按钮，延迟 3 秒钟弹出 count 的值，与页面中文本展现的值是一样的。

在某些状况J m ; l ; 8 g V下，<Example> 函数组件中的行为才契) w # @合预期。假如将 setTimeout 类比到一次 Fetch 请求，在请求成功时，我要2 q S获取? G &的是发起 Fetch 请求前相关的数据，并对其进行修正。

怎么了解其间的差异呢？

在 <Example2> class 组件中，咱们是从 this 中获取到的 props.count。this 是固定指向同一个组件实例的。在 3 秒的延时器收效后，组件从头进行了烘托，this.props 也发作了改变。当延时的回调函数履行时，读取到的 this.props 是当时组件最新的特v C A 9 9点值。

而在 <Example> 函I m n a h数组件中，每一次履行 render 函数时，props 作为该函数的参数传入，它是函数效果域下的变量。

当 <J # #;Example> 组件被创立，将运G ] 4 9行类似这样的代码来完结榜u | 7首帧：

const props_0 = { count: 0 };
const handleClick_0 = () => {
setTimeout(() => {
alert(props_0.count);
}, 3000);
};
return (f d a f T
<di& $ L P ~v>9 P D S U I  #
<h2>Example<. ^ I 6;C H ` p t r = c/h2>
<p>2 r Z{props_0.count}</p>
<button onClick={handleClick_0}>alert Count</button>
</div>
);

当父组件传入的 count 变为 1，ReacZ a H p h d ] |t 会再次调用 Examplz E & : x 0 F ^ [e 函数，履行第二帧，此刻 coun@ [ } ~ H P G ~t 是 1。

const props_1 = { count: 1 };
const handleClick_1 = () => {
setTimeout(() => {
alert(props_1} v z k F !.count);
}, 3000);
};
return (
<div>
<h2>Example</h2>d } [ 4 | n 6;
<p>{props_1.count}</p&E R ! - J $gS ( w Yt;
<button onClick={handleClick_1}>alert Count</button>
</div>
);

由于 props 是 Example 函数效果域下的变量，# ; q Y G能够说关于这个函数的每一次调q p N | a h 用中，都发作了新的 props 变量，它在声明时被赋予了当时的特点，他们相互间互不影响。

换一种说法，关于其间任一个 props ，其值在声明时便现已决定，不会跟着时刻发作改变。handleClick 函数亦是如此。例如定时器的回调函数是在未来发作的，但 props.count 的值是? I / c ( ( Q X 在声明 handleClick 函数时就现已决定好的。

假如咱们在函数最初运用解构赋值，const { count } = props，之后直接运用 count，和上面的状况没有差异。

状况

能够简略的认为，在某个组件中，关于回来的 React Elements 树形结构，某个方位的 element ，其类型与 kes ( 4 2 p B /y 特点均不变，React 便会挑选重用该组件实例；否则，比方从 <A/> 组件切换到了 &: i % | D 7 hlt;B/> 组件，会毁掉 A，然后重建 B，B 此刻会履行榜首帧。

在实例中，] J ( i i = G t能够经过 usf k ceState 等办法具有部分状况。在重用的过程中，这些状况会得到保存。而假如无法重用，状况会被毁掉。

例如 use{ . s i RS^ L L xtate，为当时的函数组件创立了一个状况，这个状况的值独立于函数寄存。 useState 会回来一个数组，在该L | 7 c A ) d u y数组中，得U d k p r % S –到该状况的值和更新该状况的办法。经过解构，该状况的值会赋值到当时 render 函数效果域下的一个常量 state 中。

const [state, setState] = useState(initialState);

当组件被创立, H `而不是重用时，即在组件的榜首帧中，该状况将被赋予初始值 iD 5 Y dnitialState，而之后的重用过程中，不会被^ G V i 3 [ I 重复赋予Q Z ~ @ / 6 e $ t初始值。

经过调用 setState ，能够更` / { f新状况的值。

每一帧具有独立的状况

需求清晰的是，state 作为函数中的一个常l g * H H 量，便是一般的数据，并不存在比方数据绑定这样的操作来唆使 DOM 发作更新。% X c i # R v ,在调用 setState 后，React 将从头履行 render 函数，仅此而已。

因R ) d 2 } j =而，状况也是函数效果域下的一般变量。咱们能够说每次函数履行具有独立的状况。

为了加深印象，咱们来看 例二，它是 ReN y R b 7 T # F 1act 官网某个比方的复杂K 1 d化：

function Examplq e q D k S ( Ae2() {
const [count, setCoua f l B ~ ~ & k 4nt] = useState(0);& K l 6 C ) + A a
cons2 R . ? % 8 j V `t handleClick = () => {
setTimeout(() => {
setCount(count + 1);
}, 3000);
};
return (
<dt  ) .iv>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
setCount
</button>i T g % M 0 % S 1
<button onClick={handleClick}>
Delay setCount
</button>
</diL & ( E Q { T tv>
);
}

在榜首帧中，p 标签中的文本为 0。点击 “Delay setCount”，文本仍然为 0。随后在 3 秒内接o 5 5 A ,连点击 “setCount” 两次，将P z ~ J .会分别履行第二帧和第三帧。你将看到 p 标签中的文本由 0 改变为 1, 2。但在点( F e E N `击 “Delay setL I + j i 2 1 RCount” 3 秒后，文本从头变为 1。

// 榜首帧
const count_1 = 0;
const handleClick_1 = () => {
const delayAction_1 = () => {
setCount(count_1 + 1);
};
setTimeout(dela1 2 L ~ ; jyAction_1, 3000);
};
//...
<button onClick={handleClick_1}>
//...
// 点击 "setCountc Y W G y y K )" 后第二帧
const count_2 = 1;
const handleClick_2 = () => {
const delayAction_2 = () => {
setCount(count_2 + 1);
};
setTimeout(delayAction_2, 3000);
};
//...
<button onClick={handleClick_2}>
//...
// 再次点击 "setCount" 后第三帧
const countd [ v ! j K F l_3 = 2;
const handleClick_3* @ U ) ` = () => {
const delayAction_3 = () => {
setCount(count_3 + 1);
};
setTimeout(del3 K # ) $ , - AayAction_3, 3000);
};
//R + F...
<button onClick={handleClick_3}>
//...

count，handleClick 都是 Example2 函数效果域中的常量。在点击 “Delay setCount” 时，定时器设置 3000ms 到期后的履行函数为 delayAction_1，函数中读取 cj F | V G 2ount_1 常量+ h j ? Q V的值是G e D U r / m [ | 0，这和第二帧的 count_2 Q j $ A T [ 无关。

获取曩昔或未来帧中的值

关于 state，假如想要在榜首帧时点击 “Delay setCount” ，在一个异步回调函数的履行中，获取到 count 最新一帧中的( k N Y ; X O值，不n s . 6 5妨向 setCount 传入函数作为参数。

其他状况下，例如需求读取到 state 及其衍生的某个常量，相关于变量声明时地点帧曩昔或未来的值，就需求运用 useRef，经过它来具有一个在一切帧中同享的变量。

假如要与 class 组件进行比较，useRef 的效果相关于让你在 class 组件的 this 上追加特点。

const refContainer =6 ? 0 P + useRef(initialValue);

在组件的榜首帧中，refContainer.current 将被赋予初始值 initw j ! ] ` 9ialValue，之后便不再发作改变。但你能够自己去设置它的值。设置它的值不会从头触发 rendj – Z fer 函数。

例如，咱们把第] v – C & n 帧的某个 props 或许 state 经过 useRef 进行保存，在第 n + 1 帧能够读取到曩昔的s n H Q K，第 n 帧中的值。咱们也能够在第 n + 1 帧运用 ref 保存某个 p2 $ R 2 q : $ ! zrops 或许 state，然后在第 n 帧中声明的异步回调函数中读取到它。

对 例二 进行修正，得到 例三，看看详细的效果：

function Example() {
const [count, setCount] = usm S XeState(0);
const curr? b GentCount = useRef(count);
currentCount.current = count;
const handleClick = () => {
setTiO N Jmeout(() => {
s7 h S Q U Q 8 . 4etCount(currentCount.current + 1);
}, 3000);
};
return (
<div&/ 5 3 9 { 2gt;
<p&z 4 j r $gt;{count}</p>
<button onClick={() => setCount(count + 1)}>
setCount
</button>
<button onClick={handleClick}>
Delay setCount
</button>
</div>
);
}

在 setCount 后便会履行下一n U C 8帧，在函数的最初，
currj l F %entCount 一直与最新的 count state 坚持同步。因而，在^ 0 ( m 8 p J ? setTimeout 中能够经过此办法获取到回调函数履行时当时的 co) K ount 值。

接下来再经过 例四 了解怎么获取曩昔帧中的值：

function Examp& 4 Y J 4 % a 4 Gle4(q r b i P 6) {
const [count, setCount1 B m a 6 . }] = useState(1);
const prevCountRef = useRef(1);
const prevCouy . y  + , 3 ont = prevCountRef.current;
prevCountT u  i eR* p - R _ - K `ef.current = count~ t 6 @ 7 l;
const handleClick = () => {
setCount(prevCount + co6 } ~ { # kunt);
};
return (
<div>
<K f F F r 8 vp>{count}</p>
<button onClick4 2 Q={handleClick}>SetCoud , x  a 3 jnt</button>
</div>
);, , g M a } . e
}

这段代码完结的功用是，count 初始值为 1，点击按钮后} ? L N累加到 2，随后点击按钮，总是用当时 count 的值和前一个 cou* 7 # 2 N y nt 的值进行累加，得到新的 count 的值。

prevCB / H 3 N M C hountRef 在 render 函数$ L l : 4 S b ] 4履行的过程中，与最新的 count stat; B ? 1e 进行了同步。由于在同步前，咱们将该 ref 保存到函数效果域下的另一个变量 prevCount 中，因而咱们总是能够获取到前一个 count 的值。

同样的办法，咱们能够用于保存任何值：某个 prop，某个 state 变量，乃至一个函数等。在后面的 ET R % ? 3 I : sffects 部分，咱们会持续运用 refs 为咱们带来优点。

每一帧能够具有独立的 Effects

假如弄清了前面的『每一帧具有独立的变量』的概念，你会发现，若某个 useEC q 2 Zffect/useLayoutEffect 有且仅有一p Q g个函数作为参数，那么每次 render 函数履行时该 Effects 也是独立的。由于它是在 render 函数中挑选适当时机, g o [ : j [的履行。

关于 useEffect 来说，履行的时机是完结一切的 DOM 变更并让浏览器烘托页面后，而 useLayoutEffect 和 class 组件中 componentDidMounI 8 a ; p g Dt, co@ Y [ n 5 MmponentDidUpdate一致s i U 1——在 React 完结 DOy / ; &M 更新后马上同步调用，会堵塞页面烘托。

假如 useEffect 没有传入第二个参数，那么榜首个参数传入的 effect 函数在每次 render 函数履行是都是独立的。每个 effect 函数中捕获的 props 或 state 都来自[ n C W $ 于那一次的 render 函数。

咱们能够再调查一个比方：

function C2 e P ) : ]ounter() {
const [count, setCount] = useState(0);
useEffect(() => {
setTime- 8 M g } 4ouB 3 6 P D jt((C | & u e d T B) => {
console.log{ ~ O(`You clicked ${count} times`);
}, 3000);
});
return (
<div>
<p>You clicked {count} times</p>
<butU w 0 -ton onClick={() =>v } k setCount(count + 1)U ? K 0}&3 9 W j B h kgt;
Click me
&lr 9 4 T # -  ` t;/button>
</div>
);
}

在这个比方中，每一次对 count 进行改变，从头履行 render 函^ } 6 s .数D ; O 5 Z _ p 6后，延迟 3 秒打印 count 的值。

假如咱J –们不停地点击按钮，打印的成果是什么呢？

咱们发现经过延时后，每个 count 的值被顺次打印A z ; X ] ; {了，他们从 0 开始u L O & :顺次递加，且不: 5 K 4重复。

假如换成 class 组件，测验运用 _ x 4 ^ R ` F com2 e } ] L cponentDiP { I ^ a TdUpdate 去完结$ r Y 0 O，会得到不一样的成果：

componentDidUpdate() {
setTimeout(() =&gP ` % Bt; {
console.log(`You clicked ${this.state.count} times`);
}, 3000);
}

thI $ +i^ C 4s.Y . ; P D ? ~ Qstate.count 总是指向最新的 couns T s k 8 Q , / kt 值，而不是归于某次调用 ren= _ * ( ,der 函数k 2 j 9 B时的值。

因而，在运用 useEf 5 ^ m g pfect 时，应当抛开在 class 组件中关于生命周期的思维。他们并不相同。在 useEffect 中故意寻觅那几个生命周期函数的替代写法，将会堕入僵局，无法充分发挥 useEffect 的能力。

在比对中履行 Effects

React 针对 React Elements 前后值进行比照，只去更新 DOM 实在发作改变的部分。关于 Effects，能否有类似这样的理念呢？

某个 Effects 函数一旦履行，函数内的副效果现^ . t L t n g已发作，React 无法猜测到函数比较于上一次做了哪些@ Q E @ f c ( 5改变。但咱们能够给 useEffect 传入第二N p ! f A c个参数，作为依靠数组 (deps)，防止 Effects 不必要的重复调用。

这个 deps 的含义是：当时 Effei p K } 2 nct 依靠了哪些变量。

但有时问题不一定能处理R U V Q @。比方官网就有 这样的比方：

const [j b  K V _ @count, setCount] = useStT u ; D f (a M a 7 3te(0);
useEffect(() => {
const id = setInte| * W w T r @rval(() => {
setCount(count + 1);
}, 1000);
return () =&G Y W zgt; clearInterval(id);
}, [count]);N r Y

假如咱们频频修@ L 8 K @ n w正 count，每次履行 Effect，上一次的计时器被铲除，需求调用 setInterval 从头进入时刻行列，实践的定时时刻被延后，乃至有或许底子没有时机被履行。

可是下面这样的实践办法也不宜采用：

在 Effect 函数中寻觅一些变量添W K N P !加到 deps 中，需求满意条件：其改变时，需求从头触发 effect。

按照这种实践办法，count 改变时，咱们并不希望从头 setInterval，故 depi ~ a / ss 为空数组。这意味着该 hook 只在组件挂载时运行一次。Effect 中明明依靠了 count，但咱们说谎说它没有依靠，那么当 setInterval 回调函数履行时，p [ , L ~获取到的 count 值永久为 0。

遇到这种问题，直接从 deps 移除是不可行的。静下来分析一下，此处为什么要用到 count？能否防止对其直接运用？

能够看到，在 setW ; }Count 顶用到了 count，为的是把 count 转换为 count + 1 ，然= b W k D *后回来给 React。React 其完结已知道当时的 count，咱们需求告知 React 的仅仅是去% # ( F 2 I N f递加状况，不管它现在详细是什么值。

所以有一个最佳实践：状况变更时，! s C = * f ! .应该经过 setState 的函数办法来替代直接获取当时状况。

setCount(c => c + 1);

别的一种场景是：: X q X V | N

const [count, setCount] = useState(0);
useEffecM ? 4 R vt(()! 1 5 X v = Y T => {
const id = setInterval(() => {
console.log(count);
}, 1000);
return () =4 + a a> clearInterval(i + l K o 8 4 nd);
}, []);

在这里，同A s q m e @ | ! 1样的，当count 改变时，咱们并不希望从头 setInterval。但咱们能够把 count 经过 re| y ~ g 4f 保存起来。

const [count, setCount] = useState(0);
const countRef = useRefq x | ) h *();
countRef.current = count;
us: I J [ b q T =eEffect(() => {
const id = setInterval(() => {
console.log(countRe 6 ( V $ _ 0 Bef.current);
}, 1000);
return () => clearInterval(id);
}, []);

这样，countp r Z i V 的确不再Z O V a t Q b F被运用，而是用 ref 存储了一个在一切帧中同享的变量。

别的的状况是，Effects 依^ Y % U $ { 4 d靠了函数或许其他引证类型。与原始数据类型不同的是，在未优化的状况下，每次 render 函数调用时，由于= U ` u ^ 1 O对这些内容的从头创立，其值总是发作了改变，导致 Effects 在运用 deps 的状况下仍然会频频被调用。

关于这个问题，官网的 FAQ 现已给出了答案：关于函数，运E r ~ I k ? {用 useCallback 防止重复创立P Y V h 1 ]；关于目标或许数组，则能够运用 useMemo。然后削减 deps 的改变。

运用 ES O `Lint 插件

运用 ESLint 插件 eslint-plugin-react-hooks@&gc x @ = at;=2.4.0，很有必h } 0 = _ | V要。

该插件除了帮你检查运用 Hook 需求遵从的两条规则外，还会向你提示在运用 useEffect 或许 useMemo 时，deps 应该填入的内容。

假如你正在运用 VSCode，并且安装了 ESLint 扩展。当你编写 useEffect 或许 useMemoF – _ b 8 ，且| a h 1 W p deps 中的内容并不完好时，deps 地点的那一行便会给出警告或许过错的提示( 6 Q | & S，并且会有一个快速修正的功用，该功用会为X L ^ C t r O h v你自动填入缺失的 dB V e E – Z qeps。

关于这些提示，不要暴力地经过 eslint-_ F + 8disable 禁用。未来，你或& } w _ G a m许再次修正C D j Q Q Q g 5该~ ~ T = useEffect 或许 useMemo，假如运用了新的依靠并且F e p ` x :在 deps 中漏掉了它，便会引发新的问题。有一些场景，比方 useEffecj 9 ( ] [t 依靠一个函数，并且填入 deps 了。可是这个函数运用了 useCallback 且 deps 呈现了遗失，这种状况下一旦呈现问题，排查的难度会很大，所以为什么要让 ESLint 沉默呢？

测验用上一节的办法x I : 8 [进行分析，关于一些变量不希望引起 effect 从头更新的，运用 ref 处理。关于获取状况用于核算新的状况的，测验 setState 的函数入参，或许运用 useReducer 整合多个类型的状况。

运l s P C W ] | !用 useMemo/useCallback

useMemo 的含义是，经过一些变量核算得到新的值。经过把这些变量参加依靠 deps，当 deps 中的值均未发作改变时z Z ^ v &，越过这次核算。useMemo 中传入的函数，将在 render 函数} } v @调用过程被同步调用。

能够运用 useMemo( ` ~ / 缓存一些相对耗时的核算。

除此以外，useMemo 也十分合适用于存储引证类型的数据，能够传入目标字面量，匿名函数等l N H，乃至是 React Elements。

const data = useMemo(() => ({
a,
b,
c,
d: 'xxx'
}), [a, b, c]);
// 能够用 useCallback 替代
const fn = useMemo(() => () => {
/} A 4 :/ do something
}, [a, b]);
const memoComponentsA = useMemo(() => (
<ComponentsA {...someProps} />
), [someProps]);

在这些比方中，useMemo 的目的其实是尽量运用缓I – h z X D 0 M s存的值。

关于函数，其作为别的一个 useEffect 的 deps 时，削减函数的从头生成，就能削减该 Effect 的调用，乃至防止一些死循环的发作;

关于目标和数组，假如某个子组件运用K 4 R [ * T了它作为 props，削减它的从头生成，就能防止子组件不必要的重复烘托，提升功能。

未l 5 [ l优化的代码如下：

const data = { id };
return <Child dataH W % ] { & e + O={dak t I Zt8 p )a}>;

此刻，每逢父组件需求 render 时，子组件也会履行 render。假如运用 useMemo 对 data 进行优化：

const data = useMemo(c v W() => ({ id }), [id]);
return <Child data={data}>;

当父组件 render 时A 6 o j U，只要满意 id 不变，data 的值也不会发作改变，子组件也将防止 render。

关V l | 5 p ]于组件回来的 React Elements，咱们能够挑选性地提取其间一部分 elements，经过 useMemo 进行缓存，也能防止这一部分的重复烘托。

在曩昔的 class 组件中，咱们经过 shouldComponentUpdate 判断当时特点和状况是否和上一次的相同，来防止组件不必要的更新。其间的比较是关于本组件的一切特点和状况而言的，无法根据 shouldComponentUpdat{ l we 的回来值来使该组件一部分V / ? 4 ; M $ ] elements 更新，另一部分不更新。

为了进一步优化功能，咱们会对大组件进行拆分，拆分出的小组件只关心其间一部分特点，然后有更多的时机不去更新。

而函数组件中的 useMemo 其实就2 M G a D 1 – } q能够替代这一部分作业。为了便利了解，咱们来看 例五：

function Example(props) {
const [count, setCount] = us| t ] QeState(0);
const [foo] = useState("foo");
const main = (
<div>
<Item key={1} x={1} foo={foo} />
<Item key={2} x={2} foo={foo} />
<Item key={3} x={3}J v N foo={foo} />
<Item key={. W m - w s4} x={4} foo={foo} />
&T ? Z U 2 4 i slt;Item key={5}6 - j x i W x={5} foo={foo} /&c + U p 6 -gt;
</dh s G A ; civ>
);
retuS x S A prn (
<div>
<p>{count}</p>
<= / i W J e ibutton onClick={() => setCount(count + 1)}>setCo_ X A (unt</button&D ? E v gt;
{main}
</div>
);
}

假设 <Item> 组件，其本身的 render 消耗较多的时刻。默许状况下，每次 setCount+ R Q + f ) 改变 count 的值，便会从头对 <* 8 i J 9 cExample> 进行 render，其回来的 React Elements 中3个 <Item> 也从头 render，其耗时; } | Z的操作堵塞了 UI 的烘托。6 z 8 ` s T导致按下 “setCount” 按钮后呈现了明显的卡顿。

为了优化功能，咱们能够将 main 变量这一部分单独作为一个组件 <Main>，拆分出去，并对 <Main> 运用比方 React.memo , shouldCo! 8 [ ? M j {mponen( 0 o G u 2 7tUpdate 的办法，使 cY 1 bount 特点改变时，<Main> 不重复 render。

const Main = React.memo((props) => {
const { foo }= props;
return (
<div>
<Item key={1} x={1} foo={foo} />
<Item key={2} x={2} foo={foo} />
<Item key={3}Z R D N ) F M C x={3} foo={R G d B G z 2 Rfoo} />
<Item keK J . g Q 6 `y={4} x={4} foo={foo} />
<Item key={5} x={5} foo={foo} />
</div>
);
});

而G { o现在，咱们能够运用 uM H ~ %seMemo，防止了组件拆分，代码也更简练易懂：

function Example(props) {
const [count, setCount] = useState(0);
const [foo] = useState("fD d U P z k T t ?oo");
const main = useMemo(() => (
<div>e q W ` u S s
<Item key={h z $ e F 8 ] l1} x={1} foo={foo} />
<Item kev G w B . 4 h $y={2} x={2} foo=e W y 2 ({foo} />
<Item key={3} x={3} foo={foo} />
<Item key={4} x={4} foo={foo} />
<Item key={5} x={5} foo={foo} />
</div>
), [foo]);
return (
<div>c / B j D
<p>A m m ! R T , -{count}</p>
<button onClick={(s X # M O ? r ` C) => setCount(count + 1)}>V b B Z ~ X c ) u;setCount</buttonh & .>
{main}
&A = klt;/div>
);
}

慵懒初j 9 D ) = z V始值

关于 state，其具有 慵懒初始化的办法。或许有人不了解它的效果。

someExpensiveComput] } ` W G ? _ {ation 是一个I $ & V ? V相对J L U耗时的操作。假如咱们直接采用

const initialState = someExpensive_ Q vComputation(pr9 p e D x F 7 M ~ops);I 6 + h i
const [state, setState]7 p { } S = useState(initialState);

注意，虽然 initialState 只在初始化[ 6 e P I ` ? j时有其存在的价值，可是 someExpensiveComputation 在每一帧都( I l l被调用了。只要当运用慵懒初始化的办法：

const [state, setState] = useState(() => {
const initialState = someExpensiveCo! L ]mputation( - ; _ M props);
return initialStU - / * H W K tate;
});

因 someExpensiveComputation 运行在一个匿名函数下，该函数当且仅最初始化时y d M % l被调用，然后优化功能。

咱们乃至能够跳出核算 state 这一规则，来完结任何贵重的初始化操作。

useState(() => {
someExpensiveComputation(props);
return null;
});

防止d . S # g H D滥用 refs

当 useEffect 的依靠频频改变，你或许想到把频频改变的值用 ref 保存起来。然而，useReN c c w %ducer 或许是更好的处理办法：运用 dispatch` @ ! R v ] , 消除对一些状况的依靠。官网的 FAQ 有详细的[ C & } & w解释。

终究能够总结出这样的实践：

u} 5 Z 0 % , seEffect 关于函数依靠，测验将该函数放置在 effect 内，或许运用 useCallback 包裹；useEffect/useCallback/useMemo，关于 state 或许其他特点的依靠，根据 e! 8 Q Y K 2slint 的提示填入 deps；假如w j E T . @ E不直接运用 state，仅仅想修正 state，用 setSta} 3 e v e h 7 = Ete 的函数入参办法（setStatr N ! k je(c => c + 1)）替代；假如修正 state 的过程依靠了其他特点，测验将 state 和特点聚合，h y @ m改写成 useReducer 的办法。当这些办法都不奏效w K { |，运用 refn 7 g E = { I =，可是仍X $ M然要慎重操作。

防止滥用 usl m * jeMemo

运用 useMemo 当 deps 不变时，直接回来上一次核算的成果，然后使子组件越过烘托。

可是当回来t ^ 0 / . ? q W的c M j } p ) k v是原始数据类型（如字Q 8 c N J L符串、数字、布尔值）。即便参加了核算，只要 deps 依靠的内容不变，回来成果也很或许是| + ~ & . ^ R不变的。此刻就需求权衡这个核算的时刻本钱和 useMemo 额定带来的空间本钱（缓存上一次的成果）了。

此I j N # % i + } ,外，假如 useMemo 的 deps 依靠数组K x 0 D t I ; n为空，这样做阐明你仅仅希望存储一个值，这个值在从头 render 时永久不会变。

比方：

const Comp = () => {
const data = useMemo(() => ({ type: 'xxx' }), []);
return <Child data={data}&i ? q 1 2 o Ugt;;
}

能够被替换为：

const Comp = () =>Q 2 o 4 * ~ y y 3; {
const { current: data } = uso s | e / 8 9eRef _ a $ A U 2f({ typR L U Y ke: 'xxx' });
return &Q L z 3lt;Child data={data}>;
}

乃至：

const data = { type: 'xxx' };
const Comp = () => {
returnP j T J ? 6 o <Child data={n k [ m } . z s cdam 5 % @ Dta}>;
}

此外，假如 deps 频频变化，咱们也要考虑，运用 useMemo 是否有必要。由于 useMemo 占用了] T | = .额定的空间，还需求在每次 render 时检查 deps 是否变化，反而比不运用 use9 @ ] ~ z 0 lMemo 开销更大。

受控与非受控

在一个自定义 Hooks，咱们或许有这样一段逻辑：

useSomq P A c P ` tething = (inputCount= $ e u @) => {
const [ count, setCount ] = setState(inputCount);
};

这里有一个问题，外部传入的 inputCount, % U @ t s z 特点发作| E d ( 8 q了改变，使其与 useSomething Hook 内的 count state 不一致时，是否想要更新这个 count ？

默许不会更新，A 6 = a e / 由于 useState 参数代表的3 J 5 q V是初始值，仅在 useSomething 初始时赋值给了 count state。后续 couN 6 * p x Y 1nt 的状况将与 inputCount! # ? N p E ) 无关。这种外部无法直接操控 state 的办法，咱们称为非受控。

假如想被外部传入的 props 一直操控，比方在这个比方中，useSomething 内部，count 这一 state 的值需求从/ D { inputCount 进行同步，需求这样写：

useSomething = (inputq G t 2 ] G I  kCounth o [ u $ U) => {
const [ count, setCount ] = setState(inputCount);
setCount(inp& b | X s L r ; wutCount);
};

setCount后，React 会当即退出当时的 render 并用A f F ; a Y M更新后的 state 从头运行 render 函数。这一点，官网文档 是有阐明的。

在这种的机制下，state 由外界同步的同时，内部又有或许经过 setState 来修正 sD ! X x +tate，或许引发新的问题。例如1 Z N m w B k useSoi X N 4 @ 8 C ; Hmething 初始时，count 为 0，后续内部经过 setCount 修正了 count 为 1。当外部函数组件的 render 函数从头调用，也会再一次调用 useSomething，此刻传入的 inputCount 仍然是 0，就会把 count 变回 0。. 6 J L h # w这很或许不契合预t [ ! ;期。

遇到这样的问题，主张将 inputCount 的当时值与上一次的值进行比较，只要确认发作改变N B 5 f时履行 setCount(inputCount) 。

当然，在特别的场景下，这样的设定也不一定契合需求。官网的这篇文章 有提出类似的问题。

实践：useSlider

经过一个滑w $ v l o b p (动挑选器自定义 hook userSlider 的完结，咱们能够答复上面的这个问题，趁便对本文做一个总结。

userSlider 需求完结的逻辑是：按住滑动挑选器的圆形手柄区域并拖动能够调理数值巨细，数值范围为 0 到 1。

userSlider 只担任逻辑的完结，UI 样式由组件自P s G % V M F j _行完结。为了模| * + M h V拟实在业务，别的经2 B r n过文本展现了当时的数值。并有几个按钮i , Z 4 q h用于切换数值的初始值，这是为了切换分类后，当时的滑动挑选器需求重置到某个数值。

按照常规的逻辑，咱们完结了以下代码：

当时的问题是，useEffect 触及到多个 state 的获取与a j 8核算。导致鼠标按下、移动、弹起的几个操作中由于对 stata 的修正，useEffect 频频改写，且触及到了鼠K – Q 6 _ v标按下、移动、弹起事件监听的取消与从头绑定o _ @ l，这带来了功能问题以及较难调查到的 BUG。

和前面的 sB G ? 8etInterval 比方类似d i c F，咱们不希望在状况变化时，改写 useEffect。由于此处触及到多个状况：是否滑动中、鼠标方位、上一次鼠标的问题、挑选器的可滑动宽度，假如整合到一个 state 中，会面对代码不清晰，短少内聚性的问题，咱们测验用 useReducer 做一次替换。

const reducer = (state, actioni b M h ~) => {
switch (action.type) {
case "start":
return {
...st) ] @ate,
lastPos: act: 2 1 f v * 7 h 4ion.4 8 w Jx,
sli* ? ,deRange: ac/ _ % S b i ^ @tiD } B z ( - y b aon.slideWidth,
sliding: true
};
case "move": {
if (? R a v I!state.slidi] T i / 3 9 ang)7 - : {
return statW G . { _ Y re;
}
const pos = action.x;
const delta = pos - state.lastPos;
return {
..( h t t 4.state,
laV ! , m ? {stPos: pos,
ratio: fixRa$ / Htio(s[ ; o ztate.ratio + delta / state.slideRange)
};
}
case "end": {
ifb B h } @ 8 ! (!state.sN m p 1 u F ( )liding) {
return state;
}
const pos = action.x;
const delta = pos -` = L ` k G L state.lastPos;
return {
...state,
lastPos: pos,
ratio: fixRatio(state.ratio + delta / state.` a ~ l o f X p slideRangb . , } 1 Ve),
slid? M  f R { | Iing: fe H @ # ] = `alse
};t D A Z n N
}
default:
return state;
}
};
//...
const ha. - V ^ undleThumbMouseDown = useCallback(ev => {
const hotArea = hotAreaRef.current;0 G , % g u
dispatch({
type: "start",
x: ev.pageX
slideWidth: hotArea.clientWidth
})i g N X o ; ( V;
},*  / w 3 []);
useEffecD u # Z M i Mt(() =&e + a ) ?gt; {
const onSliding = ev => {
dispatch({
type: "move",
x: ev.pageX
})` , m ~ i w;
};
const onSlideEnd = ev => {
dispatch({
type: "end",
x: ev.pageX
});
};
document.addEventListener("mousemove+ A $ b *", onSliding);
document.addEventList} a  & E X { S 0enerm K , g("mouseup", onSlideEnd);
return () => {
document.removeEventListener("mousemove", o( 6 M ; -nSliding);
document.removeEventListener("mouseup", onSlideEr G / G i U q vnd);
};
},t U V / 6 / D 7 []);

这% 2 w N V . 7样处理后，effect 只要履行一次即可。

接下来还有一个问题没有处理，现在 initRatio 是作为初始值传入的，useSO [ )lider 内部的 ratio 是不受外部操控的。

以一个音乐均衡器的设置为例：当F a n * l ? P时滑动挑选器代表的是低频端（31）的增益值，用户经过拖动z z $滑块能够设置这个值的巨细（-12 到 12 dB 范围，咱们设置到了 3 dB）。同时咱们提供了一些预设4 ; ] I选项，一旦挑选预设选项，如『盛行』风格，当时滑块需求重置到特定值 -1 dB。为此， useSlider 需求提供操控状况的办法。

根据前一节的介绍，在 useSlider 的最初，咱们能够将特点 initRatio 的当时值与上一次的值进行比较，若发作改变，则履行 setRatio。但仍然有场景无法满意：用户挑选了『盛行』这一预设，然后拖动滑块进行了调理，之后又从头挑选『盛行』这一预设，此刻 initRatio 没有任何改变，但咱们希望 ratio 从头变为 initRatio。

处理这个问题的办法是，在 useSlider 内; c X + % T D L &部添加一个 seg 3 S ) N n !tRatio 办法。

const setRatio = useCall@ w / ] $ ;back(
ratio =>
dispatch({
type: "setRatio",
ratio
}),
[]
);

将该办法输出供外部用于对 ratio 操控。initRatio 不再操控 ratio 的状况，仅用于设置初始值。

能够看下终究的完结计划：

该计划中，除了K f N F c a完结以上需求，还支h j Q M L撑在挑选器的其他区域点击直接跳转到对应的数值；支撑设定挑选器为垂@ q v – # F + $直还是水平方向。供咱们参考。

结束语

忘掉 class 组件的生命周期，从头审视函数式组件的含义，是用好 React Hooks 的关键一步。希望这篇文章能协助咱们进一步了解并获取到一些y $ V G 3最佳实践。当然，不同的 React Hooks 运用姿态或许带来不同的h a Z { | M ^ 2 )最佳实践，欢迎咱们交流。

相关材料

A Complete Guide to useEffectA M y ~ s )

本文发布自 网易云音乐前H } 3端团队，文章= D u =未经授权制止任何办法的转载。咱们一直在招人，假如你刚好预备换作业，又刚好喜欢云音乐，那就 参加咱们！