react useEffect(): Hello 只记录一次

Question

我想知道为什么 '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>;
    }

Answer 1

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

Answer 2

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

Answer 3

props.visible 来自父组件，因此在 useEffect 中添加了 depedecy 数组，如果 props.visible 发生变化，则 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>;
  )
}

Answer 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

react useEffect(): Hello 只记录一次

react useEffect(): Hello only logs one time

reactjs

use-effect