如何在React.useEffect()中单独追踪各个状态？

你遇到的问题在React开发里挺常见的——当单个useEffect绑定多个依赖状态时，任何一个状态变动都会触发整个回调逻辑，导致不需要执行的代码也跑起来了。解决思路很直接：把原来的单一useEffect拆成多个独立的useEffect，每个只负责监听自己关心的状态，执行对应的专属逻辑。

拆分后的代码示例： #

// 仅在firebase状态变化时执行的逻辑
React.useEffect(() => {
  addNotify();
  firebaseListening();

  return () => {
    removeFirebaseListening();
  };
}, [firebase]); // 仅将firebase作为依赖

// 仅在status状态变化时执行的逻辑
React.useEffect(() => {
  console.log(status);
}, [status]); // 仅将status作为依赖

为什么这样做能解决问题？ #

• 每个useEffect都有独立的依赖数组，只有当数组内的状态发生变化时，对应的回调函数才会触发，完全隔离了不同状态的影响。
• 原来的清理函数removeFirebaseListening现在只和firebase的监听逻辑绑定，只会在firebase状态变更或组件卸载时执行，不会被status的变化误触发。
• 拆分后的代码逻辑更清晰，每个useEffect的职责单一，后续维护起来也更方便。

内容的提问来源于stack exchange，提问作者Nguyen Khac Sam