86张脑图，一口气看完 React [脑图干货]

前言

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

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

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

附原图和源文件：

原图和源文件（包括xmind和pos文件）已上传 github^[2]，如有需要可自行下载：https://github.com/jCodeLife/mind-map/tree/master/React

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

结语

最后, 送人玫瑰，手留余香，觉得有收获的朋友可以点赞，关注一波 ，我们组建了高级前端交流群，如果您热爱技术，想一起讨论技术，交流进步，不管是面试题，工作中的问题，难点热点都可以在交流群交流，为了拿到大Offer，邀请您进群，入群就送前端精选100本电子书以及 阿里面试前端精选资料 添加 下方小助手二维码或者扫描二维码 就可以进群。让我们一起学习进步.

推荐阅读

（点击标题可跳转阅读）

[极客前沿]-你不知道的 React 18 新特性

[极客前沿]-写给前端的 K8s 上手指南

[极客前沿]-写给前端的Docker上手指南

[面试必问]-你不知道的 React Hooks 那些糟心事

[面试必问]-一文彻底搞懂 React 调度机制原理

[面试必问]-一文彻底搞懂 React 合成事件原理

[面试必问]-全网最简单的React Hooks源码解析

[面试必问]-一文掌握 Webpack 编译流程

[面试必问]-全网最全 React16.0-16.8 特性总结

[架构分享]- 微前端qiankun+docker+nginx自动化部署

[自我提升]-送给React开发者十九条性能优化建议

[大前端之路]-连前端都看得懂的《Nginx 入门指南》

[软实力提升]-金三银四,如何写一份面试官心中的简历

觉得本文对你有帮助？请分享给更多人

关注「React中文社区」加星标，每天进步