Вот примеры наиболее распространенных жизненных циклов:
componentDidMount
Передать пустой массив в качестве второго аргумента useEffect(), чтобы запустить только обратный вызов только при монтировании.
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, []); // Pass an empty array to run only callback on mount only.
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
componentDidUpdate (свободно)
Передав только один аргумент в useEffect, он будет запускаться после каждого рендеринга. Это свободный эквивалент, потому что здесь есть небольшая разница: componentDidUpdate не будет работать после первого рендера, но эта версия ловушек запускается после каждого рендера.
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}); // No second argument, so run after every render.
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
componentDidUpdate (строго)
Разница этого примера с примером выше в том, что обратный вызов здесь не будет выполняться при начальном рендеринге, строго эмулируя семантику componentDidUpdate. Этот ответ принадлежит Толле , вся заслуга ему.
function Example() {
const [count, setCount] = useState(0);
const firstUpdate = useRef(true);
useLayoutEffect(() => {
if (firstUpdate.current) {
firstUpdate.current = false;
return;
}
console.log('componentDidUpdate');
});
return (
<div>
<p>componentDidUpdate: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
componentWillUnmount
Возвращает обратный вызов в аргументе обратного вызова useEffect, и он будет вызван перед размонтированием.
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// Return a callback in useEffect and it will be called before unmounting.
return () => {
console.log('componentWillUnmount!');
};
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
shouldComponentUpdate
Вы уже можете достичь этого на уровне компонентов, используя React.PureComponent или React.memo. Для предотвращения повторного рендеринга дочерних компонентов этот пример взят из React docs :
function Parent({ a, b }) {
// Only re-rendered if `a` changes:
const child1 = useMemo(() => <Child1 a={a} />, [a]);
// Only re-rendered if `b` changes:
const child2 = useMemo(() => <Child2 b={b} />, [b]);
return (
<>
{child1}
{child2}
</>
)
}
getDerivedStateFromProps
Снова взято из React docs
function ScrollView({row}) {
let [isScrollingDown, setIsScrollingDown] = useState(false);
let [prevRow, setPrevRow] = useState(null);
if (row !== prevRow) {
// Row changed since last render. Update isScrollingDown.
setIsScrollingDown(prevRow !== null && row > prevRow);
setPrevRow(row);
}
return `Scrolling down: ${isScrollingDown}`;
}
getSnapshotBeforeUpdate
Нет эквивалента для крючков.
componentDidCatch
Нет эквивалента для крючков.