86张脑图，一口气看完 React

共 3336字，需浏览 7分钟

· 2022-04-29

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

前言

React 18.0^[1] 已经发布一段时间了

所以这两天抽空重新完整的过了一遍 React

我将所有内容整理为以下86张脑图，方便以后查阅

附原图和源文件：

原图和源文件（包括xmind和pos文件）已上传 github^[2]，如有需要可自行下载

86张脑图

1. 安装

1.安装.png

2. 核心概念

JSX 简介

2.1JSX 简介.png

2.2元素渲染

2.2元素渲染.png

2.3组件 & Props

2.3组件 & Props.png

2.4.1State & 生命周期

2.4.1State & 生命周期.png

2.4.2数据流和正确使用State

2.4.2数据流和正确使用State.png

2.5事件处理

2.5事件处理.png

2.6条件渲染

2.6条件渲染.png

2.7列表 & Key

2.7列表 & Key.png

2.8表单

2.8表单.png

2.9状态提升

2.9状态提升.png

2.10组合 vs 继承

2.10组合 vs 继承.png

2.11React 哲学

2.11React 哲学.png

3. 高级指引

3.1无障碍辅助功能

3.1无障碍辅助功能.png

3.2代码分割

3.2代码分割.png

3.3.1Context

3.3.1Context.png

3.3.2Context API

3.3.2Context API.png

3.4错误边界

3.4错误边界.png

3.5Refs 转发

3.5Refs 转发.png

3.6Fragments

3.6Fragments.png

3.7高阶组件

3.7高阶组件.png

3.8.1集成带有 DOM 操作的插件

3.8.1集成带有 DOM 操作的插件.png

3.8.2与其他第三方库协同

3.8.2与其他第三方库协同.png

3.9.1JSX 本质

3.9.1JSX 本质.png

3.9.2JSX 指定 React 元素类型

3.9.2JSX 指定 React 元素类型.png

3.9.3JSX 中指定 props

3.9.3JSX 中指定 props.png

3.9.4JSX 中的子元素

3.9.4JSX 中的子元素.png

3.10.1性能优化之生产版本

3.10.1性能优化之生产版本.png

3.10.2使用 Chrome Performance 标签分析组件

3.10.2使用 Chrome Performance 标签分析组件.png

3.10.3使用开发者工具中的分析器对组件进行分析

3.10.3使用开发者工具中的分析器对组件进行分析.png

3.10.4其他优化

3.10.4其他优化.png

3.11Portals

3.11Portals.png

3.12Profiler API

3.12Profiler API.png

3.13不使用 ES6

3.13不使用 ES6.png

3.14不使用 JSX

3.14不使用 JSX.png

[3.15协调

3.15协调.png

3.16Refs & DOM

3.16Refs & DOM.png

3.17Render Props

3.17Render Props.png

3.18.1静态类型检查之Flow

3.18.1静态类型检查之Flow.png

3.18.2静态类型检查之TypeScript

3.18.2静态类型检查之TypeScript.png

3.18.2静态类型检查之其他

3.18.2静态类型检查之其他.png

3.19严格模式

3.19严格模式.png

3.20使用 PropTypes 进行类型检查

3.20使用 PropTypes 进行类型检查.png

3.21非受控组件

3.21非受控组件.png

3.22Web Components

3.22Web Components.png

4. API 参考

4.1.1React 顶层 API之概览

4.1.1React 顶层 API之概览.png

4.1.2React 顶层 API之参考

4.1.2React 顶层 API之参考.png

4.1.3React 顶层 API之参考2

4.1.3React 顶层 API之参考2.png

4.2.1React.Component之概述

4.2.1React.Component之概述.png

4.2.2常用的生命周期方法

4.2.2常用的生命周期方法.png

4.2.3不常用的生命周期方法

4.2.3不常用的生命周期方法.png

4.2.4其他 API

4.2.4其他 API.png

4.2.5Class 属性和实例属性

4.2.5Class 属性和实例属性.png

4.3ReactDOM

4.3ReactDOM.png

4.4ReactDOMClient

4.4ReactDOMClient.png

4.5ReactDOMServer

4.5ReactDOMServer.png

4.6DOM 元素

4.6DOM 元素.png

4.7.1合成事件

4.7.1合成事件.png

4.7.2支持的事件

4.7.2支持的事件.png

4.7.3支持的事件2

4.7.3支持的事件2.png

4.7.4支持的事件3

4.7.4支持的事件3.png

4.8Test Utilities

4.8Test Utilities.png

4.9Test Renderer

4.9Test Renderer.png

4.10JS 环境要求

4.10JS 环境要求.png

4.11React 术语词

4.11React 术语词.png

5. Hook

5.1Hook 简介

5.1Hook 简介.png

5.2Hook 概览

5.2Hook 概览.png

5.3使用 State Hook

5.3使用 State Hook.png

5.4使用 Effect Hook

5.4使用 Effect Hook.png

5.5Hook 规则

5.5Hook 规则.png

5.6自定义

5.6自定义 Hook.png

Hook API

5.7Hook API.png

5.8.1Hooks FAQ之采纳策略

5.8.1Hooks FAQ之采纳策略.png

5.8.2Hooks FAQ之从 Class 迁移到 Hook

5.8.2Hooks FAQ之从 Class 迁移到 Hook.png

5.8.3Hooks FAQ之性能优化

5.8.3Hooks FAQ之性能优化.png

5.8.4Hooks FAQ之底层原理

5.8.4Hooks FAQ之底层原理.png

6. 测试

6.1测试概览

6.1测试概览.png

6.2测试技巧

6.2测试技巧.png

6.3测试环境

6.3测试环境.png

7. FAQ

7.1AJAX 及 APIs

7.1AJAX 及 APIs.png

7.2Babel，JSX 及构建过程

7.2Babel，JSX 及构建过程.png

7.3传递函数给组件

7.3传递函数给组件.png

[7.4组件状态.png

7.4组件状态.png

7.5样式与 CSS.png

7.5样式与 CSS.png

7.6项目文件结构

7.6项目文件结构.png

7.7Virtual DOM 及内核

7.7Virtual DOM 及内核.png

结语

以上是本文的所有内容，如有问题欢迎指正 💕

作者：LBJ
原文：https://juejin.cn/post/7085145274200358949

参考资料

[1]

React 18.0: https://link.juejin.cn?target=https%3A%2F%2Freact.docschina.org%2Fblog%2F2022%2F03%2F29%2Freact-v18.html

[2]

github: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FjCodeLife%2Fmind-map%2Ftree%2Fmaster%2FReact

往期推荐

来分享面经了，4年经验的前端在上海金三银四遨游。

秒啊！答好这5个问题，就入门Docker了

(字节/华为/美团)前端面经记录冷冷清清的金三银四

最后

欢迎加我微信，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧

浏览 30

点赞

收藏

分享

举报

评论

图片

表情

智慧城市一张图，空天信息企业两条路

图源：《未来城市》纪录片撰文 | 朱君编辑 | 神璐璐审核 | 刘玉琳封面 | 《未来城市》纪录片4月2日，国家数据局就《深化智慧城市发展推进城市全域数字化转型的指导意见》（以下简称《意见》）向社会公开征求意见，智慧城市建设方向再次明确。图源：国家数据局《意见》明确指出，鼓励有

日语五十音图学习难吗？

学习日语的初学者们都知道，我们学习日语最初就必须要接触日语五十音图，虽然相对其他语言来说，五十音图挺不是很难学，但是很多初学者可能会记不住，别担心，老师为大家带来了学习经验分享，一起来看看吧！五十音图就是日语最基础的基础，也就是地基。由于日语的元音比较单调，只有a/i/u/e/o这五种，再和各种辅音

超越原生，散点图实现华夫饼图

之前我们介绍过了如何使用新卡片图实现华夫饼图。参考：超越原生，PowerBI 华夫饼图实现但是利用卡片图实现的华夫饼图有一些缺点，形状之间的大小跟间距不太好把握，而且有时形状大一点的话显示就会不正常，需要做出二次调整。今天给大家介绍一种原生视觉对象生成华夫饼图的更佳方案，既简单又美观。上图是利用散点

PowerBI战友联盟

一张图看工业互联网标识六年发展

采写：王改静编辑：改静指导：新文延伸阅读：工业互联网标识建设六年系列做大做深，工业互联网标识解析还需突破几个难题？激活工业互联网标识数据要素价值，还要几步走？释放数据要素X效应，工业互联网标识体系能做什么？释放工业数据最大潜能：如何跨越标识规模化应用三重障碍？专家谈 I 标识“爬坡”：提档加力与未来

工业互联网世界

永久激活GPT4.0 + 多模态（文生图+图片解析）！终身使用！我上车了

GPT 4.0，太牛了🔥！！用GPT4.0生成个代码，轻轻松松就能帮你搞定如果你有想拍视频的想法，或者从事相关新媒体职业，那这个视频脚本生成就很适合你GPT4.0好用是好用，但它的价格也是真贵啊！一个月要 20 美元，折合大概 150 块人民币，一年就是 1800。MJ 绘画更是高攀不起的

Llama 3恐怖如斯，400B+版本即将到来！还有文生图Imagine Flash三步成图！

点蓝色字关注“机器学习算法工程师”设为星标，干货直达！简单总结一下：Llama 3包含8B和70B两个版本（包含预训练模型和Instruction tuning模型），性能相比Llama 2有明显提升，其中最大的模型Llama 3 70B人工评测超过GPT-3.5，未来还会推出参数量更大（400B+

机器学习算法工程师

全网最全网络基础思维导图（38张）

来源：架构师技术联盟计算机网络基础知识点多且杂，想要系统地学习，思维导图肯定是必不可少的。今天整理了38张思维导图，帮助你轻松理清思路，快速掌握关键内容。建议你收藏起来慢慢看，在看过之后最好能重新动手画一画，让计算机网络知识在你的大脑中连接起来。 01 TCP/IP网

iMeta | 最全可视化韦恩图和集合图工具EVenn使用手册

通讯点击蓝字关注我们最全可视化集合工具EVenn使用手册iMeta主页：http://www.imeta.science研究论文● 原文链接DOI: https://doi.org/10.1002/imt2.184● 2024年4月11日，中国中医科学院陈同、黄璐琦和中国农科院

20个惊艳的React组件库，每一个都值得收藏

在上一篇文章中，20个惊艳的React组件库，每一个都值得收藏（上），我们一起探索了10款令人惊艳的React组件库，它们各自以独特的功能和优势，极大地丰富了我们的React开发工具箱。今天，我们将继续这一系列的分享，从React Markdown到React Copy to Clipboard，为

收藏 | 论文画图工具：25个常用Matplotlib图的Python代码总结

点击上方“小白学视觉”，选择加"星标"或“置顶”重磅干货，第一时间送达仅作学术分享，不代表本公众号立场，侵权联系删除转载于：作者丨zsx_yiyiyi来源丨python大本营编辑丨极市平台# !pip install brewer2mplimport nump

小白学视觉

点赞

收藏

分享

举报