--- theme: vue-pro highlight: atelier-dune-dark --- > 翻译：卷帘依旧 > > 原文地址： https://dmitripavlutin.com/react-useeffect-infinite-loop/ `react` `hook` `useEffect` `React`中的`useEffect()`钩子可用于处理副作用，比如获取网络请求、直接操作`DOM`，开始和结束计时器。尽管`useEffect()`与`useState()`(状态管理的钩子)一样，是最经常使用到的钩子，`useEffect()`需要花费一些时间去熟悉和掌握正确的使用方法。使用`useEffect()`时一个可能遇到的陷阱是组件渲染的无限循环问题。这篇文章对产生无限循环的场景以及如何避免这些问题出现。如果你对`useEffect()`不熟悉，建议你先阅读[useEffect入门篇](https://juejin.cn/post/7021453850951286815)。良好的知识基础可以避免新手犯的错误。 ## 1. 无限循环与副作用更新状态定义一个包含输入框的函数式组件，现在的工作是对输入框内容改变的次数进行统计和展示。组件``的实现方式如下： ``` TypeScript import { useEffect, useState } from 'react'; function CountInputChanges() { const [value, setValue] = useState(''); const [count, setCount] = useState(-1); useEffect(() => setCount(count + 1)); const onChange = ({ target }) => setValue(target.value); return (

Number of changes: {count}

) } ``` ``是一个[可控组件](https://juejin.cn/post/7020980474025607205)，状态变量`value`存储输入框的值，事件句柄`onChange`在处理输入框内容变化时同步更新`value`。我决定使用`useEffect()`钩子改变`count`变量，每次由于用户在输入框输入内容导致组件重新渲染时，`useEffect(() => setCount(count + 1))`都会更新计数器的值。由于`useEffect(() => setCount(count + 1))`没有使用依赖参数，`() => setCount(count + 1)`回调在组件每次渲染后都会执行。你预料到这个组件会出现的问题了吗？试试[运行这个demo](https://codesandbox.io/s/infinite-loop-9rb8c?file=/src/App.js)看看吧。这个例子显示了`count`状态变量不受控制的增加，即使没有在输入框输入任何内容。这就是一个无限循环的例子。问题的根源在于`useEffect()`的使用方式： ``` TypeScript useEffect(() => setCount(count + 1)); ``` 这导致了组件重新渲染的无限循环。在初始渲染之后，`useEffect()`执行更新状态的副作用回调，状态的更新触发重新渲染，在重新渲染完成之后，`useEffect()`再次执行副作用回调并且再次更新状态变量，而状态的更新又回触发重新渲染...如此无限循环。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/527523a4109d478d8748da228d6d7cdc~tplv-k3u1fbpfcp-watermark.image?) ### 1.1 修复依赖参数无限循环的问题的解决方法可以通过给`useEffect(callback, dependencies)`传入正确的依赖参数。代码的目的是统计`value`变化的次数`count`，那么可以通过简单地将`value`作为副作用的依赖传入： ``` TypeScript import { useEffect, useState } from 'react'; function CountInputChanges() { const [value, setValue] = useState(''); const [count, setCount] = useState(-1); useEffect(() => setCount(count + 1), [value]); const onChange = ({ target }) => setValue(target.value); return (

Number of changes: {count}

); } ``` 将`[value]`作为`useEffect(..., [value])`的依赖，那么`count`状态变量只有在`[value]`变化的时候才会更新。这样就解决了无限循环问题。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a233e8d316114ef7877bdae1029f9205~tplv-k3u1fbpfcp-watermark.image?) [在线运行修复后的demo](https://codesandbox.io/s/infinite-loop-fixed-4sgfr?file=/src/App.js) 现在，一旦在输入框中输入内容，状态变量`count`就能够正确展示输入框内容变化的次数了。 ### 1.2 使用引用另一个解决无限循环的可选方案是通过使用引用(通过`useRef()`钩子创建引用)来存储输入框内容变化的次数。核心思想是引用的更新不会触发组件的重新渲染。以下是可能的实现： ``` TypeScript import { useState, useRef } from 'react'; function CountInputChanges() { const [value, setValue] = useState(''); const countRef = useRef(0); const onChange = ({ target }) => { setValue(target.value); countRef.current++; }; return (

Number of changes: {countRef.current}

); } ``` 如代码中所示，事件句柄`onChange`内部的`countRef.current++`在每次`value`变化的时候都会执行。引用的变化不会触发重新渲染。 [在线运行demo](https://codesandbox.io/s/infinite-loop-reference-lcmq7) 现在，一旦改变输入框的内容，`countRef`引用就会更新而且不会触发重新渲染-有效地解决了无限循环问题。 ## 2.无限循环与新对象引用即使你正确地设置了`useEffect()`的依赖，在使用对象类型作为依赖的时候你仍然必须十分小心。比如，以下组件`CountSecrets`监听用户输入的内容，一旦用户输入关键字`'secret'`，`secrets`的计数器就会增加并且显示出来。以下是组件的可能实现： ``` TypeScript import { useEffect, useState } from "react"; function CountSecrets() { const [secret, setSecret] = useState({ value: "", countSecrets: 0 }); useEffect(() => { if (secret.value === 'secret') { setSecret(s => ({...s, countSecrets: s.countSecrets + 1})); } }, [secret]); const onChange = ({ target }) => { setSecret(s => ({ ...s, value: target.value })); }; return (

Number of secrets: {secret.countSecrets}

); } ``` [在线运行demo](https://codesandbox.io/s/infinite-loop-obj-dependency-7t26v?file=/src/App.js)，在输入框中输入内容，尝试输入`'secret'`。一旦输入`'secret'`，状态变量`secret.countSecrets`就会开始不可控地增加。这也导致了无限循环问题。为什么会这样？ `secret`对象作为`useEffect(..., [secret])`的依赖，在副作用回调函数内部，一旦输入框的值为`'secret'`，状态更新函数就会被调用： ``` TypeScript setState(s => ({...s, countSecrets: s.countSecrets + 1})); ``` 状态更新函数增加了计数器`countSecrets`，但是同时也创建了`一个新对象`。 `secret`是一个新对象，因而依赖发生了变化。所以`useEffect, (..., [secret])`又一次被调用，副作用更新了状态变量，进而又会导致一个新的`secret`对象被创建出来，如此反复。 `JavaScript`中`2`个对象相同的判断条件是它们同时引用同一个对象(引用地址相同)。 ### 2.1 避免将对象作为依赖解决创建新对象导致的无限循环问题的最佳方案是避免在`useEffect()`中使用对象作为依赖： ``` TypeScript let count = 0; useEffect(() => { // some logic }, [count]); // Good! let myObject = { prop: 'Value' }; useEffect(() => { // some logic }, [myObject]); // Not good! useEffect(() => { // some logic }, [myObject.prop]); // Good! ``` 修复``组件中的无限循环问题需要改变依赖，将`useEffect(..., [secret])`改为`useEffect(..., [secret.value])`。仅仅在`secret.value`变化的时候调用副作用回调函数就足够了，以下是组件修复后的代码： ``` TypeScript import { useEffect, useState } from "react"; function CountSecrets() { const [secret, setSecret] = useState({ value: "", countSecrets: 0 }); useEffect(() => { if (secret.value === 'secret') { setSecret(s => ({...s, countSecrets: s.countSecrets + 1})); } }, [secret.value]); const onChange = ({ target }) => { setSecret(s => ({ ...s, value: target.value })); }; return (

Number of secrets: {secret.countSecrets}

); } ``` [运行修复后的版本](https://codesandbox.io/s/infinite-loop-obj-dependency-fixed-hyv66?file=/src/App.js)。在输入框中输入一些内容...一旦输入`'secret'`，计数器就会增加，此时也不会导致无限循环问题了。 ## 3. 总结 `useEffect(callback, deps)`是一个在组件渲染之后执行回调(副作用)的钩子，如果你不留心注意副作用做了什么，你就可能会触发组件渲染的无限循环问题。产生无限循环的一个常见的例子是在副作用中更新状态时根本不添加任何依赖参数： ``` TypeScript useEffect(() => { // Infinite loop! setState(count + 1); }); ``` 避免无限循环的一个有效方式是合理设置依赖参数-去控制副作用应该何时运行。 ``` TypeScript useEffect(() => { // No infinite loop setState(count + 1); }, [whenToUpdateValue]); ``` 另外一个可选择的方式是可以使用引用。更新引用不会触发重新渲染： ``` TypeScript countRef.current++; ``` 无限循环的另一种常见方式是使用一个对象作为`useEffect()`的依赖项，并且在副作用中更新该对象(创建一个新对象)： ``` TypeScript useEffect(() => { // Infinite loop! setObject({ ...object, prop: 'newValue' }) }, [object]); ``` 避免使用对象作为依赖项，而是坚持使用特定的属性(其最终结果应该是一个原始值)： ``` TypeScript useEffect(() => { // No infinite loop setObject({ ...object, prop: 'newValue' }) }, [object.whenToUpdateProp]); ``` 使用`React hooks`的其他常见问题是什么？在我之前文章中，我列举了[使用React钩子需要避免的5个错误](https://dmitripavlutin.com/react-hooks-mistakes-to-avoid/) 你还知道使用`useEffect()`过程中其他引发无限循环陷阱的方式吗？欢迎评论区`留言`，`点赞` 小小的`赞`，大大的动力❤️❤️❤️