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

Question

假设我有一个带有Person依赖项的效果挂钩，它遵循架构Person: {name: string, age: number} 。 我对这个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

虽然以这种方式编写代码是可以接受的，但您可能希望对它们实际关心的内容运行效果。 IE

// 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])