同一依賴項的多個 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])