一张思维导图入门React

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

4aac8adb92180c47981d84b724c30606.png
React.png

一、项目初始化

7926af613186c95ef0dc486dd17c3478.png
项目初始化1.png

二、UI层面

88e1fa4843fa8172d5d101ec5a0507e6.png
UI层面2.png

2.1 JSX基础

47f9ada7222e0e5953d67931cab948ab.png
JSX基础2_1.png

2.2 进阶

2.2.1 事件处理

6a09d8696bf68f902b6783b25d2b2600.png
事件处理2_2_1.png

2.2.2 条件渲染

f6de0ac07996ef4f2c184219c70ca636.png
条件渲染2_2_2.png

2.2.3 列表

c7deeb86f498b12c12f51f2131ef6388.png
列表2_2_3.png

2.2.4 表单

c9a52dcc41d4582bc1bf3606c784276f.png
表单2_2_4.png

三、组件

daf56cf5c194d9cbc70b26d7a2255e8e.png
组件3.png

3.1 class组件

3.1.1 使用class组件需满足条件

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

3.1.2 相关属性方法

a9f4c174c593241ca9f7fa7cfd9cd615.png
相关属性方法3_2.png

3.1.3 声明周期图谱

198c776ca3208d3a115620a1b4eb7e3c.png
生命周期图谱3_3.png

3.2 function组件

07949f036d3fa0431dd2f65f6fa8dda7.png
function组件3_4.png

3.2.1 HOOK

16b9a8516b4119013cb4b639162005ca.png
HOOK3_5.png
3.2.1.1 函数
e0d18dd8bae817f4ab9b28e1a11a202e.png
函数3_6.png
3.2.1.2 HOOK规则
12011ab57e41106fafde415c1877874f.png
HOOK规则3_7.png
3.2.1.3 自定义HOOK
980aa2047fd3dcdb0e5175c59ca78b67.png
自定义Hook3_9.png

3.3 高阶组件

1d1272cf5ae6ecbec1e1277d7ef25fa6.png
高阶组件3_10.png

四、数据层面

65dd16db8c9ec6c4927d097e14408d02.png
数据层面4.png

五、重要包

9ef4430b6cf96bb27be849d1e0c5cc51.png
重要包5.png

六、感悟

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

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

    HOOK的出现基本上让function组件一统天下,不必再使用class组件;

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

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

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

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

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

437cfa399f943c9f3f7b938acfc639dd.png

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

cb8d64435f0d50083888f0cd3367ab4c.png

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

来源url
栏目