一张思维导图入门React

俗话说的好“好记性不如烂笔头”，今天秉承着后期复习方便的态度，整理了一份React基础知识点，并以思维导图的方式呈现出来，方便跟老铁们一起查漏补缺。(关注我回复“React"领取本篇思维导图，回复“百题斩”领取前端高频面试题，回复“大会”进“前端早早聊”合作群）

React.png

一、项目初始化

项目初始化1.png

二、UI层面

UI层面2.png

2.1 JSX基础

JSX基础2_1.png

2.2 进阶

2.2.1 事件处理

事件处理2_2_1.png

2.2.2 条件渲染

条件渲染2_2_2.png

2.2.3 列表

列表2_2_3.png

2.2.4 表单

表单2_2_4.png

三、组件

组件3.png

3.1 class组件

3.1.1 使用class组件需满足条件

使用class组件需满足条件3_1.png

3.1.2 相关属性方法

相关属性方法3_2.png

3.1.3 声明周期图谱

生命周期图谱3_3.png

3.2 function组件

function组件3_4.png

3.2.1 HOOK

HOOK3_5.png

3.2.1.1 函数

函数3_6.png

3.2.1.2 HOOK规则

HOOK规则3_7.png

3.2.1.3 自定义HOOK

自定义Hook3_9.png

3.3 高阶组件

高阶组件3_10.png

四、数据层面

数据层面4.png

五、重要包

重要包5.png

六、感悟

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

1. React中很多功能在开发中用的并不多，例如：数据传输方面Redux+props即可满足很多需求、Hook中常用的也只有useState、useEffect等，实现的一些功能仅仅是为了满足整个框架的完整性；

2. HOOK的出现基本上让function组件一统天下，不必再使用class组件；

3. 框架在不断向着越来越简单的方向发展。

1.如果觉得这篇文章还不错，来个分享、点赞吧，让更多的人也看到

2.欢迎关注公众号前端点线面,开启编程救赎之路。

················· 执鸢者简介 ·················

你好，我是执鸢者，毕业于华中科技大学，现在是一名百度前端研发工程师，写有多篇原创文章，分享自己在学习中的点滴收获，近期撰写了《前端百题斩》系列文章(回复“百题斩”获取）、go入门文章，近期在撰写React系列文章，欢迎喜欢的小伙伴领取相关资料。

识别上方二维码加我微信、拉你进交流群

[1] 五万字前端面试宝典——前端百题斩（上）新鲜出炉