useLayoutEffect
мог выполнить это с пустым множеством наблюдателей ([]
), если функциональность будет на самом деле схожа componentWillMount
то - она будет работать, прежде чем первое содержание добирается до DOM - хотя существует на самом деле два обновления, но они синхронны прежде, чем потянуть на экран.
, например:
function MyComponent({ ...andItsProps }) {
useLayoutEffect(()=> {
console.log('I am about to render!');
},[]);
return (<div>some content</div>);
}
преимущество более чем useState
с инициализатором/методом set или useEffect
- то, хотя оно может вычислить передачу рендеринга, нет никакого фактического перерендеринга к DOM, который заметит пользователь, и оно выполняется прежде первый noticable рендеринг, который не имеет место для useEffect
. Оборотная сторона является, конечно, небольшой задержкой Вашего первого рендеринга, так как проверка/обновление должна произойти прежде, чем нарисовать для экранирования. Это действительно зависит от Вашего примера использования, все же.
я думаю лично, useMemo
прекрасен в некоторых нишевых случаях, где необходимо сделать что-то тяжелое - пока Вы имеете в виду, что это - исключение по сравнению с нормой.
В большинстве случаев useComponentDidMount
является инструментом для использования. Это будет работать только однажды, после того, как компонент смонтируется (начальный рендеринг).
const useComponentDidMount = func => useEffect(func, []);
важно отметить, что в компонентах класса componentWillMount
считается наследием. Если Вы должны кодировать для выполнения только однажды, компонент смонтировался, можно использовать конструктора. [Еще 116] об этом здесь . Так как функциональный компонент не имеет equivelant конструктора, с помощью рычага для выполнения кода только однажды, компонент монтируется, мог бы иметь смысл в определенных случаях. Можно достигнуть его с пользовательским рычагом.
const useComponentWillMount = func => {
const willMount = useRef(true);
if (willMount.current) {
func();
}
useComponentDidMount(() => {
willMount.current = false;
});
};
Однако существует ловушка. Не используйте его для асинхронной установки состояния (e.x после запроса к серверу. Поскольку Вы могли бы ожидать, что это будет влиять на рендеринг начальной буквы, который это не будет). Такие случаи должны быть обработаны с useComponentDidMount
.
const Component = (props) => {
useComponentWillMount(() => console.log("Runs only once before component mounts"));
useComponentDidMount(() => console.log("Runs only once after component mounts"));
...
return (
<div>{...}</div>
);
}
https://reactjs.org/docs/hooks-reference.html#usememo
Помнит, что функция передала выполнениям useMemo во время рендеринга. Don’t делают что-либо там, что Вы wouldn’t обычно делаете при рендеринге. Например, побочные эффекты принадлежат useEffect, не useMemo.
Я записал пользовательский рычаг, который выполнит функцию однажды первый рендеринг.
использование useBeforeFirstRender.js
import { useState, useEffect } from 'react'
export default (fun) => {
const [hasRendered, setHasRendered] = useState(false)
useEffect(() => setHasRendered(true), [hasRendered])
if (!hasRendered) {
fun()
}
}
:
import React, { useEffect } from 'react'
import useBeforeFirstRender from '../hooks/useBeforeFirstRender'
export default () => {
useBeforeFirstRender(() => {
console.log('Do stuff here')
})
return (
<div>
My component
</div>
)
}