时间戳

首页 > 解决方案 > 一般来说，在单个组件中使用一个或多个 useEffect 挂钩更好吗？

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

问题描述

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

在性能和架构方面哪个更好？

标签： reactjsperformancereact-hooksarchitectureuse-effect

解决方案

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

首先：您可能会遇到需要在初始挂载期间添加事件侦听器并在卸载时清理它们的情况，以及需要清理特定侦听器并在道具更改时重新添加的另一种情况。

在这种情况下，使用两个不同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的 s

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

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

推荐阅读