vlambda
2022-04-12

86张脑图，一口气看完 React

前言

React 18.0^[1] 已经发布两周了

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

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

附原图和源文件：

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

86张脑图

1. 安装

1.安装.png

2. 核心概念

JSX 简介

86张脑图，一口气看完 React — 2.1JSX 简介.png

2.2元素渲染

86张脑图，一口气看完 React — 2.2元素渲染.png

2.3组件 & Props

86张脑图，一口气看完 React — 2.3组件 & Props.png

2.4.1State & 生命周期

86张脑图，一口气看完 React — 2.4.1State & 生命周期.png

2.4.2数据流和正确使用State

86张脑图，一口气看完 React — 2.4.2数据流和正确使用State.png

2.5事件处理

86张脑图，一口气看完 React — 2.5事件处理.png

2.6条件渲染

86张脑图，一口气看完 React — 2.6条件渲染.png

2.7列表 & Key

86张脑图，一口气看完 React — 2.7列表 & Key.png

2.8表单

86张脑图，一口气看完 React — 2.8表单.png

2.9状态提升

86张脑图，一口气看完 React — 2.9状态提升.png

2.10组合 vs 继承

86张脑图，一口气看完 React — 2.10组合 vs 继承.png

2.11React 哲学

86张脑图，一口气看完 React — 2.11React 哲学.png

3. 高级指引

3.1无障碍辅助功能

86张脑图，一口气看完 React — 3.1无障碍辅助功能.png

3.2代码分割

86张脑图，一口气看完 React — 3.2代码分割.png

3.3.1Context

86张脑图，一口气看完 React — 3.3.1Context.png

3.3.2Context API

86张脑图，一口气看完 React — 3.3.2Context API.png

3.4错误边界

86张脑图，一口气看完 React — 3.4错误边界.png

3.5Refs 转发

86张脑图，一口气看完 React — 3.5Refs 转发.png

3.6Fragments

86张脑图，一口气看完 React — 3.6Fragments.png

3.7高阶组件

86张脑图，一口气看完 React — 3.7高阶组件.png

3.8.1集成带有 DOM 操作的插件

86张脑图，一口气看完 React — 3.8.1集成带有 DOM 操作的插件.png

3.8.2与其他第三方库协同

86张脑图，一口气看完 React — 3.8.2与其他第三方库协同.png

3.9.1JSX 本质

86张脑图，一口气看完 React — 3.9.1JSX 本质.png

3.9.2JSX 指定 React 元素类型

86张脑图，一口气看完 React — 3.9.2JSX 指定 React 元素类型.png

3.9.3JSX 中指定 props

86张脑图，一口气看完 React — 3.9.3JSX 中指定 props.png

3.9.4JSX 中的子元素

86张脑图，一口气看完 React — 3.9.4JSX 中的子元素.png

3.10.1性能优化之生产版本

86张脑图，一口气看完 React — 3.10.1性能优化之生产版本.png

3.10.2使用 Chrome Performance 标签分析组件

86张脑图，一口气看完 React — 3.10.2使用 Chrome Performance 标签分析组件.png

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

86张脑图，一口气看完 React — 3.10.3使用开发者工具中的分析器对组件进行分析.png

3.10.4其他优化

86张脑图，一口气看完 React — 3.10.4其他优化.png

3.11Portals

86张脑图，一口气看完 React — 3.11Portals.png

3.12Profiler API

86张脑图，一口气看完 React — 3.12Profiler API.png

3.13不使用 ES6

86张脑图，一口气看完 React — 3.13不使用 ES6.png

3.14不使用 JSX

86张脑图，一口气看完 React — 3.14不使用 JSX.png

[3.15协调

86张脑图，一口气看完 React — 3.15协调.png

3.16Refs & DOM

86张脑图，一口气看完 React — 3.16Refs & DOM.png

3.17Render Props

86张脑图，一口气看完 React — 3.17Render Props.png

3.18.1静态类型检查之Flow

86张脑图，一口气看完 React — 3.18.1静态类型检查之Flow.png

3.18.2静态类型检查之TypeScript

86张脑图，一口气看完 React — 3.18.2静态类型检查之TypeScript.png

3.18.2静态类型检查之其他

86张脑图，一口气看完 React — 3.18.2静态类型检查之其他.png

3.19严格模式

86张脑图，一口气看完 React — 3.19严格模式.png

3.20使用 PropTypes 进行类型检查

86张脑图，一口气看完 React — 3.20使用 PropTypes 进行类型检查.png

3.21非受控组件

86张脑图，一口气看完 React — 3.21非受控组件.png

3.22Web Components

86张脑图，一口气看完 React — 3.22Web Components.png

4. API 参考

4.1.1React 顶层 API之概览

86张脑图，一口气看完 React — 4.1.1React 顶层 API之概览.png

4.1.2React 顶层 API之参考

86张脑图，一口气看完 React — 4.1.2React 顶层 API之参考.png

4.1.3React 顶层 API之参考2

86张脑图，一口气看完 React — 4.1.3React 顶层 API之参考2.png

4.2.1React.Component之概述

86张脑图，一口气看完 React — 4.2.1React.Component之概述.png

4.2.2常用的生命周期方法

86张脑图，一口气看完 React — 4.2.2常用的生命周期方法.png

4.2.3不常用的生命周期方法

86张脑图，一口气看完 React — 4.2.3不常用的生命周期方法.png

4.2.4其他 API

86张脑图，一口气看完 React — 4.2.4其他 API.png

4.2.5Class 属性和实例属性

86张脑图，一口气看完 React — 4.2.5Class 属性和实例属性.png

4.3ReactDOM

86张脑图，一口气看完 React — 4.3ReactDOM.png

4.4ReactDOMClient

86张脑图，一口气看完 React — 4.4ReactDOMClient.png

4.5ReactDOMServer

86张脑图，一口气看完 React — 4.5ReactDOMServer.png

4.6DOM 元素

86张脑图，一口气看完 React — 4.6DOM 元素.png

4.7.1合成事件

86张脑图，一口气看完 React — 4.7.1合成事件.png

4.7.2支持的事件

86张脑图，一口气看完 React — 4.7.2支持的事件.png

4.7.3支持的事件2

86张脑图，一口气看完 React — 4.7.3支持的事件2.png

4.7.4支持的事件3

86张脑图，一口气看完 React — 4.7.4支持的事件3.png

4.8Test Utilities

86张脑图，一口气看完 React — 4.8Test Utilities.png

4.9Test Renderer

86张脑图，一口气看完 React — 4.9Test Renderer.png

4.10JS 环境要求

86张脑图，一口气看完 React — 4.10JS 环境要求.png

4.11React 术语词

86张脑图，一口气看完 React — 4.11React 术语词.png

5. Hook

5.1Hook 简介

86张脑图，一口气看完 React — 5.1Hook 简介.png

5.2Hook 概览

86张脑图，一口气看完 React — 5.2Hook 概览.png

5.3使用 State Hook

86张脑图，一口气看完 React — 5.3使用 State Hook.png

5.4使用 Effect Hook

86张脑图，一口气看完 React — 5.4使用 Effect Hook.png

5.5Hook 规则

86张脑图，一口气看完 React — 5.5Hook 规则.png

5.6自定义

86张脑图，一口气看完 React — 5.6自定义 Hook.png

Hook API

86张脑图，一口气看完 React — 5.7Hook API.png

5.8.1Hooks FAQ之采纳策略

86张脑图，一口气看完 React — 5.8.1Hooks FAQ之采纳策略.png

5.8.2Hooks FAQ之从 Class 迁移到 Hook

86张脑图，一口气看完 React — 5.8.2Hooks FAQ之从 Class 迁移到 Hook.png

5.8.3Hooks FAQ之性能优化

86张脑图，一口气看完 React — 5.8.3Hooks FAQ之性能优化.png

5.8.4Hooks FAQ之底层原理

86张脑图，一口气看完 React — 5.8.4Hooks FAQ之底层原理.png

6. 测试

6.1测试概览

86张脑图，一口气看完 React — 6.1测试概览.png

6.2测试技巧

86张脑图，一口气看完 React — 6.2测试技巧.png

6.3测试环境

86张脑图，一口气看完 React — 6.3测试环境.png

7. FAQ

7.1AJAX 及 APIs

86张脑图，一口气看完 React — 7.1AJAX 及 APIs.png

7.2Babel，JSX 及构建过程

86张脑图，一口气看完 React — 7.2Babel，JSX 及构建过程.png

7.3传递函数给组件

86张脑图，一口气看完 React — 7.3传递函数给组件.png

[7.4组件状态.png

86张脑图，一口气看完 React — 7.4组件状态.png

7.5样式与 CSS.png

86张脑图，一口气看完 React — 7.5样式与 CSS.png

7.6项目文件结构

86张脑图，一口气看完 React — 7.6项目文件结构.png

7.7Virtual DOM 及内核

86张脑图，一口气看完 React — 7.7Virtual DOM 及内核.png

结语

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

原文：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

往期推荐

创作不易，加个点赞、在看支持一下哦！