react useEffect(): Hello只记录一次

Question

我想知道为什么'Hello'只记录一次，因为有setCounter(1)会触发重新渲染，对我来说'Hello'将被记录两次。也许这与依赖数组有关?因为道具。不传递，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中添加了依赖数组，如果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 2

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

Answer 3

好吧，道具。可见的不会改变，这就是为什么，如果你将counter作为一个依赖项传递给useEffect，那么你应该看到每次改变counter时的输出。(对你来说，再来一次)

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