在一个组件中使用多个 useEffects 是否有任何副作用？

Question

我使用了三个 useEffect 来控制不同的状态和 adding/removing 事件侦听器。但我不确定这是否是最佳做法？

 useEffect(() => {
    window.addEventListener('keydown', keyPressHandle)
    return () => {
      window.removeEventListener('keydown', keyPressHandle)
    }
  }, [])

  useEffect(() => {
    // do sth on state_one
  }, [state_one])

  useEffect(() => {
    // do sth on state_two
  }, [state_two])

Answer 1

是的，这是最佳做法 Reactjs also recommends it

Tip: Use Multiple Effects to Separate Concerns

Answer 2

正如 Ryan 所说，这是正确的做法。

在一个 useEffect() 中控制多个状态非常混乱，有时甚至是不可能的，具体取决于您想要实现的目标。

依赖项数组中没有任何内容意味着代码将运行当组件被安装并且功能等同于 componentDidMount()。

当数组中有一个值时，每次更新该值时都会触发副作用。

您可能会说，对这两种情况使用相同的 useEffect() 是不可能的。

在一个组件中使用多个 useEffects 是否有任何副作用？

Does using multiple useEffects in one component have any side effects?

javascript

reactjs

react-hooks

use-effect