Как я могу гарантировать, что строка кода выполняется только один раз, используя перехватчики React в функциональном компоненте?

Question

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

Как я могу сделать это с помощью хуков?

Answer 1

Полагаю, вы ищете реагирует useEffect хук. Это замена ловушки для componentDidMount, componentDidUpdate и componentWillUnmount. Вы можете использовать его так:

useEffect(() => {
  console.log("only executed once")
}, [])

Обратите внимание на пустой массив в качестве второго аргумента, который определяет зависимости для этого эффекта. В этом случае вы не хотите иметь зависимости, чтобы эффект больше не выполнялся.

Есть хорошая статья о том, как заменить предыдущие функции жизненного цикла доступными хуками здесь .

Answer 2

// Аналогично componentDidMount и componentDidUpdate: useEffect (() => {}, [])

React Docs. Крючки - с помощью крючка для эффекта. -> https://reactjs.org/docs/hooks-effect.html