Реагировать Методы жизненного цикла Синхронный или Асинхронный?

Question

Я новый ученик React. В настоящее время я изучаю крючки. Я изучал около useEffect крючок. Это в основном сравнивается с методами жизненного цикла (componentDidMount, componentDidUpdate, componentWillUnmount и т. Д.). Мой вопрос о поведении этих функций. Методы жизненного цикла работают синхронно или синхронно? А как насчет useEffect?

Answer 1

В отличие от componentDidMount или componentDidUpdate, эффекты, запланированные с помощью useEffect, не блокируют браузер от обновления экрана. Это делает ваше приложение более отзывчивым. Большинство эффектов не должно происходить синхронно. В редких случаях, когда они это делают (например, измерение макета), существует отдельный хук useLayoutEffect с API, идентичным API useEffect. Вы должны просмотреть документацию , чтобы иметь четкое представление.

Answer 2

Что касается использования useEffect, оно выполняется асинхронно, то работает так:

Вы вызываете рендеринг каким-либо образом (изменение состояния или повторное рендеринг родителя)

React рендерит вашкомпонент (вызывает его)

Экран визуально обновляется

ТО запускается useEffect

React также имеет синхронный useEffect, который является useLayoutEffect

Вы вызываете рендеринг каким-либо образом (изменение состояния или родительский рендеринг)

React рендерит ваш компонент (вызывает его)

useLayoutEffect запускается, и React ожидает его завершения.

Экран визуально обновляется

Вы можете узнать больше о useLayoutEffect

Надеюсь, это поможет

Answer 3

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

в хуках, вы можете использовать useEffect вместо методов жизненного цикла, как показано в примере ниже

  componenDidMount(){
    //in class component
    }

this life cycle method define in hooks like below,
    useEffect({
    // hooks 
    },[])