React Hook Flow Diagram

一、概述

Donovon has created this nice flowchart that explains the new lifecycle of a Hooks component.

Comes in handy

https://www.bram.us/2019/03/11/react-hook-flow-diagram/

二、补充说明

提示: 使用多个 Effect 实现关注点分离

使用 Hook 其中一个目的就是要解决 class 中生命周期函数经常包含不相关的逻辑,但又把相关逻辑分离到了几个不同方法中的问题。

React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。

React 何时清除 effect React 会在组件卸载的时候执行清除操作。正如之前学到的,effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。

三、生命周期说明:

1、Mount阶段:

1)初始化 userState和userReducer state

2)顺序执行布局和副作用hooks;

2、Update阶段:

effect 在每次渲染的时候都会执行,所以要清除以前未完成的副作用;

否则会导致执行错乱问题;

3、UnMount阶段

清洗副作用; 

猜你喜欢

转载自www.cnblogs.com/feng9exe/p/11096287.html