React Hook Flow Diagram
React hook Flow Diagram
2023-09-11 14:18:44 时间
一、概述
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阶段
清洗副作用;
相关文章
- React组件属性部类(propTypes)校验
- React-Native 之 GD (八)GET 网络请求封装
- react-native 制作购物车ShopCart
- React vscode 创建 react 项目流程
- react中的setState是同步还是异步?react为什么要将其设计成异步?
- react-native-swiper的Github地址
- React-native 环境配置及项目创建
- React 组件
- React -- State Hook 详细介绍(函数组件也可以使用state了)
- React Native常用第三方组件汇总--史上最全[转]
- Why React Is Favored by Front-End Specialists
- react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)
- React教程:4 个 useState Hook 示例
- React Crud
- React Native Android入门实战及深入源代码分析系列(2)——React Native源代码编译
- React项目打包整合到SpringBoot 再打成jar包教程
- 全栈开发React-私有路由
- react-HOOK---一篇搞定react-hook,既生react,何生hook,深挖hook中常用的四个API