反应useEffect触发器虽然依赖值保持不变？

Question

为什么我没有执行 setTest 来更改测试值，但仍然触发日志？我预计第一次日志不应该触发，因为测试值保持为 0？

function App() {
  const [test, setTest ] = useState(0)

  useEffect(() => {
    console.log('log')
  }, [test])

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

我有一个这样的场景。在第一次加载时不做任何事情，然后如果用户在页面上选择一个选项然后做某事，我该如何使用 useEffect 来做到这一点？

Answer 1

来自 https：Using the Effect Hook

useEffect 有什么作用？通过使用这个 Hook，你告诉 React 你的 组件需要在渲染后做一些事情。 React 会记住 您传递的函数（我们将其称为“效果”），然后调用它 稍后执行 DOM 更新。

您的组件已渲染，useEffect 已触发，并且您的日志已运行。

听起来您可能会将useEffect（只接受一个参数，一个回调）与其他接受多个参数的钩子混淆。

---- 编辑（评论相关）----

useEffect不是直接替代基于类的componentDidMount 和componentDidUpdate 方法，但由于运行时间的原因，它通常可以用来替代这些方法。 See 了解更多信息。您可能还想了解相关的 useLayoutEffect 钩子。

如果您的意图是在“加载”时连接一些逻辑，例如事件处理程序，则不需要挂钩来执行此操作。相反，您只需要一个 React 事件处理程序属性，例如。

<option onChange={changeHandler} />

（See 了解更多信息。）

Answer 2

(1)第一个 useEffect 调用是在组件挂载时。

useEffect(() => {
    console.log('log')
  }, [test])

(2)如果您将第二个 Array 依赖项参数传递给 useEffect 并且该参数不为空，那么任何时候该依赖项更改之一都会调用 useEffect。

useEffect(() => {
    console.log('log')
  }, [test])

(3) 如果依赖数组为空，则仅调用一次useEffect（在组件第一次挂载后）。

useEffect(() => {
    console.log('log')
  }, [])

(4)如果 useEffect 在没有第二个参数的情况下实现，任何时候组件状态更新 useEffect 也被调用。

useEffect(() => {
    console.log('log')
  })

根据您的情况，您可以检查 test 是否为 0 取消执行 useEffect 正文代码，如下所示：

function App() {
  const [test, setTest ] = useState(0)

  useEffect(() => {
   if(test < 1) return;
    console.log('log')
  }, [test])


  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}