reactjs - 一般来说，在单个组件中使用一个或多个 useEffect 钩子(Hook)更好吗？

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 1 年前。

社区 1 年前审核了是否重新开放此问题，并将其关闭:

原始关闭原因未解决

Improve this question

我有一些副作用要应用到我的 react 组件中，并且想知道如何组织它们:

• 作为单一 useEffect
• 或多个 useEffects

性能和架构哪个更好？

Answer 1

您需要遵循的模式取决于您的用例。

首先:您可能会遇到这样的情况:您需要在初始安装期间添加事件监听器并在卸载时清理它们，而另一种情况则需要清理并重新添加特定监听器关于 Prop 更改。

在这种情况下，使用两个不同的 useEffect 可以更好地将相关逻辑保持在一起并具有性能优势

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

第二:当任何状态或属性从定义的集合发生变化时，您需要触发 API 调用或其他一些副作用。在这种情况下，使用具有要监视的相关依赖项的单个 useEffect 会更好

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

第三:对于不同的更改集，您需要单独的副作用。在这种情况下，请将相关副作用分离到不同的 useEffect 中

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])