Тело функциональной компоненты против componentDidMount

Question

В двух следующих версиях одного и того же компонента, одного функционала и другого на основе классов, в чем разница, если таковая имеется, между кодом в теле функции и кодом в теле componentDidMount в case case?:

function Foo(props) {

  // some code goes here ...

  return <h1>Foo</h1>;
}


class Foo extends React.Component {
  componentDidMount() {  
    // code goes here ...
  }

  render() {
    return <h1>Foo</h1>;
  }
}

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

Answer 1

Код в функции componentDidMount может ожидать, что компонент был добавлен в дерево. Код за пределами будет вызываться по крайней мере один раз, пока компонент еще не смонтирован. Это верно как для функционального компонента, так и для кода в функции визуализации до возврата в компоненте класса.

componentDidMount () вызывается сразу после монтирования компонента (вставки в дерево). Инициализация, для которой требуются узлы DOM, должна go здесь. Если вам нужно загрузить данные из удаленной конечной точки, это хорошее место для создания экземпляра сетевого запроса.

Зачем это нужно? В некоторых случаях вы хотите запускать определенные функции только после монтирования компонента. Возьмем, например, использование ссылки на элемент, чтобы изменить его цвет. Ссылка будет установлена ​​только после того, как она была смонтирована / визуализирована.

Для функциональных компонентов вы можете использовать хук useEffect для замены функциональности componentDidMount.

См .: https://reactjs.org/docs/react-component.html#componentdidmount и https://reactjs.org/docs/hooks-effect.html

Очень полезно также понять жизненный цикл компонента класса реакции:

См .: https://busypeoples.github.io/post/react-component-lifecycle/