Зачем заключать код в «useEffect» без второго параметра и нечего убирать? - PullRequest
Новая
       106

Зачем заключать код в «useEffect» без второго параметра и нечего убирать?

1 голос
/ 29 января 2020

В большинстве примеров реакции, которые я видел, люди, кажется, избегают помещать код непосредственно в тело функционального компонента, а вместо этого помещают его в useEffect(() => {...}). Например, в официальных документах : 

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Почему это лучше, чем просто писать: 

function Example() {
  const [count, setCount] = useState(0);
  document.title = `You clicked ${count} times`;

  return (...);
}

В обоих случаях заголовок документа будет установлен на каждом рендере , (Я полагаю, что с useEffect() код выполняется после рендеринга, но в данном примере это не так, верно)

Я понимаю значение useEffect(), если :

  • Состояния передаются как второй параметр, поэтому код будет выполняться не при каждом рендеринге, а с учетом указанных изменений состояния.
  • Мы используем преимущества механики очистки .

Но без этого? Есть ли еще причина заключать код в useEffect()?

Ответы [ 3 ]

0 голосов
/ 29 января 2020

См. Официальный do c здесь по поводу использования Effect hook . useEffect аналогично componentDidMount, componentDidUpdate и componentWillUnmount вместе взятым. Это дает вам подсказку?

0 голосов
/ 25 марта 2020

Отвечая на мой собственный вопрос. Насколько я могу судить сейчас, нет никакой причины или оправдания иметь useEffect() без второго параметра в вашем коде.

Причина, по которой учебные пособия похожи на учебники по reactjs .org используйте его таким образом, что, кажется, только для образовательных целей: они, вероятно, хотят, чтобы вы сосредоточились на чем-то другом, а не путали вас с этим вторым параметром. Однако это может привести к (ложному) впечатлению, что второй параметр не всегда необходим.

Еще раз, для меня это был урок, что учебный код не всегда готов для использования в реальных проектах. Также в реальном проекте правила lint, такие как react-hooks/exhaustive-deps (по умолчанию включены в create-реакции-приложение ), немедленно сообщат вам, что useEffect() без второго параметра не подходит.

0 голосов
/ 29 января 2020 
useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]);

Код должен быть таким, потому что теперь useEffect будет вызываться только тогда, когда состояние счетчика изменится

...