useState и useEffect являются частью экосистемы хуков React 16.8+, целью которой является предоставление функциональным компонентам той же функциональности, которая ранее была доступна только для компонентов на основе классов (state / setState и методов жизненного цикла компонентов ( напр. componentDidMount, componentDidUpdate и componentWillUnmount)
useState() прост, он позволяет иметь доступ к состоянию внутри функционального компонента.
useEffect() может объединять componentDidMount, componentDidUpdate и componentWillUnmount, но это сложно.
Вы можете расшифровать большую часть того, что я должен обсудить здесь, из официальных документов для hooks . Легче увидеть хуки на работе, чем рассуждать по тексту.
Жизненный цикл предварительной визуализации
Предварительный рендеринг жизненного цикла события, эквивалентные componentWillReceiveProps или getDerivedStateFromProps и componentWillMount, могут быть просто вещами, которые мы делаем сначала в функциональном компоненте перед возвратом JSX (реагирующий узел) в качестве функции сам по себе эквивалентен render(…) методу компонента, основанного на классе.
Нам не нужны перехватчики для обработки событий жизненного цикла перед рендерингом.
Жизненный цикл после рендеринга
Жизненный цикл после рендеринга события, эквивалентные componentDidMount, componentDidUpdate и componentDidUnmount в компоненте на основе классов.
Нам нужно ****_useEffect(…)_** для обработки этих событий жизненного цикла пост-рендеринга **, поскольку мы не можем написать логику, связанную с этими событиями. События жизненного цикла внутри основной функции компонента, так как они должны запускаться после того, как функция компонента возвращает JSX (реагирующий узел) в react-dom средство визуализации.
Это означает, что у нас есть много, что мы можем сделать с крючками. Как?
Мы знаем useEffect(fn, […watchStates]), принимает 2 аргумента.
fn: (обязательно) useEffect вызывает эту функцию для запуска в качестве побочного эффекта после каждого цикла рендеринга на основе отслеживаемых значений для изменений, заданных аргументом (2). Функция fn может возвращать другую функцию, которая должна быть запущена как очистка перед повторным запуском функции эффекта или отключением компонента […watchValues ]: (необязательно) useEffect значения треков в этом массиве изменились с последнего цикла рендеринга, после чего вызывается только эффект fn. Если этот аргумент не указан, эффект будет выполняться с каждым циклом рендеринга.
Если мы не передадим аргумент (2) все вместе, логика эффекта в fn будет вызываться после каждого цикла рендеринга.
Если мы передадим массив (2) со значениями, которые компонент должен отслеживать для изменений, и вызовем fn при изменении, довольно очевидно.
Самая сложная часть заключается в использовании пустого массива [] в качестве аргумента (2), мы можем ограничить логику побочных эффектов в fn, чтобы она выполнялась только во время фазы монтирования, так как нет изменений, за которыми следит ловушка эффекта. после последующих циклов рендеринга снова вызвать fn.
import React, { useState, useEffect } from "react";
export default props => {
console.log("componentWillMount");
console.log("componentWillReceiveProps", props);
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [moveCount, setMoveCount] = useState(0);
const [cross, setCross] = useState(0);
const mouseMoveHandler = event => {
setX(event.clientX);
setY(event.clientY);
};
useEffect(() => {
console.log("componentDidMount");
document.addEventListener("mousemove", mouseMoveHandler);
return () => {
console.log("componentDidUnmount");
document.removeEventListener("mousemove", mouseMoveHandler);
};
}, []); // empty-array means don't watch for any updates
useEffect(
() => {
// if (componentDidUpdate & (x or y changed))
setMoveCount(moveCount + 1);
},
[x, y]
);
useEffect(() => {
// if componentDidUpdate
if (x === y) {
setCross(x);
}
});
return (
<div>
<p style={{ color: props.color }}>
Your mouse is at {x}, {y} position.
</p>
<p>Your mouse has moved {moveCount} times</p>
<p>
X and Y positions were last equal at {cross}, {cross}
</p>
</div>
);
};
Фрагмент кода прост и не требует пояснений. Вы можете попробовать это на CodePen .
Следует отметить одну важную вещь: если вы изменяете состояние внутри эффекта, убедитесь, что вы исключаете изменяющееся внутри него состояние из массива наблюдения.
Например, во втором эффекте (который подсчитывает движения мыши) мы запускаем его только при обновлении по x и y, передавая [x , y] в качестве второго аргумента, потому что
- Логически правильно наблюдать за изменениями x и y, чтобы зарегистрировать движение мыши
- Если мы не исключаем moveCount из отслеживаемого, этот useEffect войдет в бесконечный цикл, так как мы будем обновлять то же значение, которое мы также наблюдаем за изменениями
Эта статья также доступна в моей Средней публикации. Если вам нравится артиллерия, или у вас есть какие-либо комментарии и предложения, пожалуйста, хлоп или оставьте комментарии на Средний .