一张思维大图入门React

1,301 阅读1分钟

俗话说的好“好记性不如烂笔头”,今天秉承着后期复习方便的态度,整理了一份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.欢迎关注公众号前端点线面,开启编程救赎之路。