86张脑图，一口气看完 React

Posted 2022-04-18 前端开发博客

关注公众号 前端开发博客，领27本电子书

回复加群，自助秒进前端群

前言

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]

https://react.docschina.org/blog/2022/03/29/react-v18.html

[2]

https://github.com/jCodeLife/mind-map/tree/master/React

- 完 -

推荐阅读

彻底解决新手对 react 的恐惧！

44道JS难题，做对一半就是高手

聊聊前端开发日常的协作工具（全）

关注公众号：前端开发博客

1. 回复「小抄」，领取Vue、javascript 和 WebComponent 小抄 PDF

2. 回复「Vue脑图」获取 Vue 相关脑图

3. 回复「思维图」获取 JavaScript 相关思维图

4. 回复「简历」获取简历制作建议

5. 回复「简历模板」获取精选的简历模板

6. 回复「加群」进入500人前端精英群

7. 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。

8. 回复「知识点」下载高清JavaScript知识点图谱

 👍🏻 点赞 + 在看 支持小编