一张思维大图入门React

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

一、项目初始化

项目初始化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.1.3 声明周期图谱

生命周期图谱3_3.png

3.2 function组件

function组件3_4.png

3.2.1 HOOK

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

六、感悟

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

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

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

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