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

您是正确的。虽然，我会在每个效果器调用中分别检查人员属性。查看react docs 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])

Answer 2

虽然以这种方式编写代码是可以接受的，但是您可能希望对效果进行实际处理。即

// 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效果钩子用于相同的依赖项

2 个答案: