同一依赖项的多个 React 效果挂钩

Question

假设我有一个效果挂钩，它具有遵循架构 Person: {name: string, age: number} 的 Person 依赖项。我对这个 Person 依赖项的效果挂钩目前看起来像这样：

useEffect(() => {
  if (person.name === 'Mike') {
    doSomething()
  }

  if (person.age > 21) {
    somethingElse()
  }
}, [person])

将此逻辑分离到具有相同依赖关系的它们自己的效果挂钩中是否是有效代码：

// effect that handles any logic for a person's name
useEffect(() => {
  if (person.name === 'Mike') {
    doSomething()
  }
}, [person])

// effect that handles any logic for a person's age
useEffect(() => {
  if (person.age > 21) {
    somethingElse()
  }
}, [person])

我试图在我的一些组件中将不相关的代码彼此分开，我想知道这是否会被视为反模式或者是否会导致不需要的问题？

Answer 1

虽然以这种方式编写代码是可以接受的，但您可能希望运行对他们实际关心的内容产生影响。即

// effect that handles any logic for a person's name
useEffect(() => {
  if (person.name === 'Mike') {
    doSomething()
  }
}, [person.name])

// effect that handles any logic for a person's age
useEffect(() => {
  if (person.age > 21) {
    somethingElse()
  }
}, [person.age])

Answer 2

你是对的。虽然，我会分别检查每个单独效果调用的人员属性。查看反应文档 here 以获得一个很好的例子。（我真的不喜欢别人在回答我还在打字...）

 // effect that handles any logic for a person's name
useEffect(() => {
  if (person.name === 'Mike') {
    doSomething()
  }
}, [person.name])

// effect that handles any logic for a person's age
useEffect(() => {
  if (person.age > 21) {
    somethingElse()
  }
}, [person.age])

同一依赖项的多个 React 效果挂钩

Multiple React effect hooks for the same dependency

javascript

reactjs

react-native

react-hooks

use-effect