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>
  );
}

反应useEffect触发器，尽管依存值保持不变？

2 个答案: