Реагировать Методы жизненного цикла Синхронный или Асинхронный? - PullRequest
2 голосов
/ 08 ноября 2019

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

Ответы [ 3 ]

0 голосов
/ 08 ноября 2019

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

0 голосов
/ 08 ноября 2019

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

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

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

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

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

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

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

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

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

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

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

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

0 голосов
/ 08 ноября 2019

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

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

  componenDidMount(){
    //in class component
    }

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