Несколько ловушек React для одной и той же зависимости - PullRequest
Новая
       59

Несколько ловушек React для одной и той же зависимости

0 голосов
/ 28 февраля 2020

Допустим, у меня есть ловушка эффектов с зависимостью Person, которая следует схеме Person: {name: string, age: number}. Мой хук эффектов для этой Person зависимости в настоящее время выглядит следующим образом: 

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

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

Будет ли правильным кодом разделить эти логи c на их собственные хуки эффектов с такими же зависимостями: 

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

Я пытаюсь отделить несвязанный код друг от друга в некоторых моих компонентах, и мне интересно, будет ли это рассматриваться как анти-шаблон или это может привести к нежелательным проблемам?

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

Вы правы. Хотя я бы проверял индивидуальные свойства каждого отдельного вызова эффекта отдельно. Проверьте хороший документ здесь для хорошего примера. (Мне очень не нравится, когда другие отвечают, и я все еще печатаю ...) 

 // 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])
0 голосов
/ 28 февраля 2020

Хотя это приемлемо для написания кода, возможно, вы захотите применить эффекты к тому, чем они на самом деле занимаются. 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])
...