一张思维大图入门React

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

一张思维大图入门React_第1张图片

一、项目初始化

一张思维大图入门React_第2张图片

二、UI层面

一张思维大图入门React_第3张图片

2.1 JSX基础

一张思维大图入门React_第4张图片

2.2 进阶

2.2.1 事件处理

一张思维大图入门React_第5张图片

2.2.2 条件渲染

一张思维大图入门React_第6张图片

2.2.3 列表

一张思维大图入门React_第7张图片

2.2.4 表单

一张思维大图入门React_第8张图片

三、组件

一张思维大图入门React_第9张图片

3.1 class组件

3.1.1 使用class组件需满足条件

一张思维大图入门React_第10张图片

3.1.2 相关属性方法

一张思维大图入门React_第11张图片

3.1.3 声明周期图谱

一张思维大图入门React_第12张图片

3.2 function组件

一张思维大图入门React_第13张图片

3.2.1 HOOK

一张思维大图入门React_第14张图片

3.2.1.1 函数

一张思维大图入门React_第15张图片

3.2.1.2 HOOK规则

一张思维大图入门React_第16张图片

3.2.1.3 自定义HOOK

一张思维大图入门React_第17张图片

3.3 高阶组件

一张思维大图入门React_第18张图片

四、数据层面

一张思维大图入门React_第19张图片

五、重要包

一张思维大图入门React_第20张图片

六、感悟

在整理这些基础知识点的过程中,有以下几点感悟,不一定正确,分享出来与大家探讨:
  1. React中很多功能在开发中用的并不多,例如:数据传输方面Redux+props即可满足很多需求、Hook中常用的也只有useState、useEffect等,实现的一些功能仅仅是为了满足整个框架的完整性;
  2. HOOK的出现基本上让function组件一统天下,不必再使用class组件;
  3. 框架在不断向着越来越简单的方向发展。

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

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

你可能感兴趣的:(前端react.js)