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

【问题标题】：Multiple React effect hooks for the same dependency同一依赖项的多个 React 效果挂钩
【发布时间】：2020-02-27 21:24:57
【问题描述】：

假设我有一个具有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])

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

【问题讨论】：

不，没关系。
旁注：您可以将对象属性指定为依赖项而不是整个对象。例如。 [person.name] 和 [person.age]

标签： javascript reactjs react-native react-hooks use-effect

【解决方案1】：

你是对的。虽然，我会分别检查每个单独效果调用的人员属性。检查反应文档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])

【讨论】：

【解决方案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])

【讨论】：