对多个状态使用 React.JS useEffect hook 的好习惯是什么

Question

监听多个状态变化React.JS useEffect时使用 hook 的最佳实践是什么

第一的：

  useEffect(() => {
    if ( first ) {
      // do the stuff for first state changes
    }

    if ( second ) {
      // do the stuff for second state changes
    }
  })

第二：

  useEffect(() => {
  // do the stuff for first state changes 
  }, [first])



  useEffect(() => {
    // do the stuff for second state changes 
  }, [second])

这两种方法有何优缺点？

Answer 1

这取决于具体情况，但在大多数情况下，您应该useEffect为每个用例单独使用。

如果你这样做：

  useEffect(() => {
    if ( first ) {
      // do the stuff for first state changes
    }

    if ( second ) {
      // do the stuff for second state changes
    }
  }, [first, second])

这useEffect将每次运行first并second发生变化。你应该问自己，当发生变化时我是否需要检查first并更新它second，反之亦然。如果是这种情况，您应该将它们组合成一个useEffect，尽管我个人不会为此使用单独的状态变量。

在第二种情况下，您隔离更改。

  useEffect(() => {
  // do the stuff for first state changes 
  }, [first])


  useEffect(() => {
    // do the stuff for second state changes 
  }, [second])

当first发生变化时，您将处理 的状态变化，first并处理 的状态变化second。为了避免任何副作用，您应该尝试分开调用useEffect。