Реагировать на методы жизненного цикла

Question

Я уже некоторое время реагирую и знаком с некоторыми методами жизненного цикла, но не знаком с другими

например. didMount явно для запросов ajax или вызова данных из API, а затем загрузки их в приложение

Я думаю, что победил shouldComponentUpdate и понял, что это чисто для исполнения

но static getDerivedStateFromProps Я действительно не могу разобраться. это для производительности или это добавляет что-то еще в приложение?

, а также componentDidUpdate, это снова для производительности или где хороший пример, где я могу их использовать?

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

спасибо

Answer 1

Методы жизненного цикла, позволяющие запускать код в определенное время процесса.

componentDidMount () вызывается сразу после вставки компонента в дерево, мы обычно используем его для выполнения запросов API.

Использование React Hooks

useEffect(() => {
    makeApiRequest()
}, [])

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

Использование React Hooks

useEffect(() => {
    doYourStuff()
})

Разница между componentDidUpdate и Hook выше, что Hook также будет вызываться при начальном рендеринге. Нет 100% альтернативы методу componentDidUpdate ().

componentWillUnmount () вызывается непосредственно перед размонтированием и уничтожением компонента. Выполните любую необходимую очистку с помощью этого метода, такую ​​как аннулирование таймеров, отмена сетевых запросов или очистка любых подписок.

Использование React Hooks

useEffect(() => {
    return () => {
        cleanUp()
    }
})

getDerivedStateFromProps () вызывается непосредственно перед вызовом метода рендеринга как при первоначальном монтировании, так и при последующих обновлениях. Он должен возвращать объект, чтобы обновить состояние, или нуль, чтобы ничего не обновлять.

Подробнее -> Реактивный жизненный цикл Реактивные крючки

Answer 2

Вы можете понять, как ловушки жизненного цикла реагируют через этот блог: https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d