react useEffect(): 你好只记录一次答案

【问题标题】：react useEffect(): Hello only logs one timereact useEffect(): 你好只记录一次
【发布时间】：2021-12-12 16:07:04
【问题描述】：

我想知道为什么 'Hello' 只记录一次，因为 setCounter(1) 会触发重新渲染，对我来说，'Hello' 将记录两次。也许与依赖数组有关？既然没有通过 props.visible，那么 useEffect() 只会运行一次？

这是我的 CodeSandBox：https://codesandbox.io/s/peaceful-brattain-hw0mm?file=/src/App.js:23-287

感谢任何帮助。

import { useState, useEffect } from "react";

    export default function App(props) {
      const [counter, setCounter] = useState(0);
      useEffect(() => {
        console.log("Hello");
        setCounter(1);
      }, [props.visible]);
      return <div className="App">{counter}</div>;
    }

【问题讨论】：

每次检测到依赖项发生变化时都会运行效果。在您的示例中，将计数器设置为 1 不会更改 props.visible 的值，因此效果不会重新触发

标签： reactjs use-effect

【解决方案1】：

props.visible 来自父组件，因此如果 props.visible 更改，则在 useEffect 中添加 depedecy 数组，然后再次调用 useEffect。

如果您将counter 添加为依赖数组并更改counter 的值，则useEffect 将被调用。

示例：

import { useState, useEffect } from "react";

export default function App(props) {
   const [counter, setCounter] = useState(0);

   useEffect(() => {
        console.log("Hello");
   }, [counter]);

  return (
   <div className="App">
     {counter}
    <button onClick={() => setCounter(counter + 1)} > Increment </button>

   </div>;
  )
}

【讨论】：

【解决方案2】：

useEffect 中的函数在初始渲染时运行一次，然后在每次依赖数组中的值发生变化时运行。如果props.visible 没有改变，即使组件由于状态改变而重新渲染，useEffect 也不会被触发。

【讨论】：

【解决方案3】：

好吧，props.visible 不会改变，这就是为什么，如果你将 counter 作为 useEffect 的依赖项传递，那么你应该看到 counter 每次更改的输出。（在你的情况下，再一次）

【讨论】：

【解决方案4】：

您认为依赖数组是问题的原因是正确的。

如果您在依赖数组中提供值，那么只有在提供的值发生更改时，react 才会重新渲染。您提供了prop.visible，它不会更新也不会导致重新渲染发生。

为了使这个示例正确，您的代码需要如下所示：

export default function App(props) {
      const [counter, setCounter] = useState(0);
      useEffect(() => {
        console.log("Hello");
        setCounter(1);
      }, [counter]);
      return <div className="App">{counter}</div>;
    }

https://reactjs.org/docs/hooks-effect.html

【讨论】：