我应该在组件中使用一个还是多个useEffect?


116

我有一些副作用要应用,并且想知道如何组织它们:

  • 一次性使用
  • 或多次使用

在性能和体系结构方面有什么更好的选择?

Answers:


176

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

首先,您可能遇到以下情况:在初始挂载期间需要添加事件侦听器,并在卸载时对其进行清理;而在另一种情况下,则需要清理特定的侦听器并在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])

第三:第三种情况,当您需要对不同的值进行更改时采取不同的操作。在这种情况下,请将相关比较分为不同的useEffects

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

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

1
上面的第二个第三个示例之间的中间点呢?:您有一个逻辑在部分状态/ props更改时运行,但是除了一些需要运行的通用代码之外,每个逻辑都有需要运行的单独逻辑?您不会使用[](因为它只是等待更改的状态/属性的一个子集),但是您还想重用代码。您是否使用单独useEffects的代码并将共享代码放入各自分别调用的函数中?
ecoe

2
正如下面的答案所暗示的那样,React团队建议按关注点分离钩子,因此您可以将其拆分为多个useEffect调用。
hakazvaka19年

33
我喜欢您写useCase的方式。
VerticalGrain

是否总是按照定义的顺序触发它们?即effect1总是先被调用,然后是effect2?
computrius

1
@computriusReact will apply every effect used by the component, in the order they were specified.
八月Janse

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.