一般来说，在单个组件中使用一个或多个 useEffect 钩子更好吗? [英] In general is it better to use one or many useEffect hooks in a single component?

问题描述

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

I have some side effects to apply in my react component and want to know how to organize them:

• 作为单次使用效果
• 或几个 useEffects

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

Which is better in terms of performance and architecture?

推荐答案

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

The pattern that you need to follow depends on your use case.

第一:您可能会遇到需要在初始挂载时添加事件侦听器并在卸载时清理它们的情况，以及需要清理并重新添加特定侦听器的另一种情况道具变化.

First: You might have a situation where you need to add event listener during the initial mount and clean them up at unmount and another case where a particular listener needs to be cleaned up and re-added on a prop change.

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

In such a case, using two different useEffect is better to keep the relevant logic together as well as having performance benefits

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 与要监控的相关依赖项会更好

Second: You need to trigger an API call or some other side-effect when any of the state or props change from a defined set. In such a case a single useEffect with the relevant dependencies to monitor would be better

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

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

Third: You need separate side-effect for different sets of changes. In such a case, separate out relevant side-effects into different useEffects

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

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

这篇关于一般来说，在单个组件中使用一个或多个 useEffect 钩子更好吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！