一张思维大图入门React

2021-10-19

俗话说的好“好记性不如烂笔头”，今天秉承着后期复习方便的态度，整理了一份React基础知识点，并以思维导图的方式呈现出来，方便跟老铁们一起查漏补缺。“React”完整思维导图也有呀！！！

文章图片

一、项目初始化

文章图片

二、UI层面

文章图片

2.1 JSX基础

文章图片

2.2 进阶
2.2.1 事件处理

文章图片

2.2.2 条件渲染

文章图片

2.2.3 列表

文章图片

2.2.4 表单

文章图片

三、组件

文章图片

3.1 class组件
3.1.1 使用class组件需满足条件

文章图片

3.1.2 相关属性方法

文章图片

3.1.3 声明周期图谱

文章图片

3.2 function组件

文章图片

3.2.1 HOOK 【一张思维大图入门React】

文章图片

3.2.1.1 函数

文章图片

3.2.1.2 HOOK规则

文章图片

3.2.1.3 自定义HOOK

文章图片

3.3 高阶组件

文章图片

四、数据层面

文章图片

五、重要包

文章图片

六、感悟

在整理这些基础知识点的过程中，有以下几点感悟，不一定正确，分享出来与大家探讨：

React中很多功能在开发中用的并不多，例如：数据传输方面Redux+props即可满足很多需求、Hook中常用的也只有useState、useEffect等，实现的一些功能仅仅是为了满足整个框架的完整性；
HOOK的出现基本上让function组件一统天下，不必再使用class组件；
框架在不断向着越来越简单的方向发展。

1.如果觉得这篇文章还不错，来个分享、点赞吧，让更多的人也看到
2.欢迎关注公众号前端点线面,开启编程救赎之路。

推荐阅读

上一篇：Nuxt如何使用scss预编译器

下一篇：SpringBoot|SpringBoot 如何配置 quartz 为分布式定时任务