86张脑图,一口气看完 React 🎉

86张脑图,一口气看完 React 🎉插图

前言

React 18.0 已经发布两周了

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

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

附原图和源文件:

原图和源文件(包括xmindpos文件)已上传 github,如有需要可自行下载

86张脑图

1. 安装

86张脑图,一口气看完 React 🎉插图1

2. 核心概念

JSX 简介

86张脑图,一口气看完 React 🎉插图2

2.2元素渲染

86张脑图,一口气看完 React 🎉插图3

2.3组件 & Props

86张脑图,一口气看完 React 🎉插图4

2.4.1State & 生命周期

86张脑图,一口气看完 React 🎉插图5

2.4.2数据流和正确使用State

86张脑图,一口气看完 React 🎉插图6

2.5事件处理

86张脑图,一口气看完 React 🎉插图7

2.6条件渲染

86张脑图,一口气看完 React 🎉插图8

2.7列表 & Key

86张脑图,一口气看完 React 🎉插图9

2.8表单

86张脑图,一口气看完 React 🎉插图10

2.9状态提升

86张脑图,一口气看完 React 🎉插图11

2.10组合 vs 继承

86张脑图,一口气看完 React 🎉插图12

2.11React 哲学

86张脑图,一口气看完 React 🎉插图13

3. 高级指引

3.1无障碍辅助功能

86张脑图,一口气看完 React 🎉插图14

3.2代码分割

86张脑图,一口气看完 React 🎉插图15

3.3.1Context

86张脑图,一口气看完 React 🎉插图16

3.3.2Context API

86张脑图,一口气看完 React 🎉插图17

3.4错误边界

86张脑图,一口气看完 React 🎉插图18

3.5Refs 转发

86张脑图,一口气看完 React 🎉插图19

3.6Fragments

86张脑图,一口气看完 React 🎉插图20

3.7高阶组件

86张脑图,一口气看完 React 🎉插图21

3.8.1集成带有 DOM 操作的插件

86张脑图,一口气看完 React 🎉插图22

3.8.2与其他第三方库协同

86张脑图,一口气看完 React 🎉插图23

3.9.1JSX 本质

86张脑图,一口气看完 React 🎉插图24

3.9.2JSX 指定 React 元素类型

86张脑图,一口气看完 React 🎉插图25

3.9.3JSX 中指定 props

86张脑图,一口气看完 React 🎉插图26

3.9.4JSX 中的子元素

86张脑图,一口气看完 React 🎉插图27

3.10.1性能优化之生产版本

86张脑图,一口气看完 React 🎉插图28

3.10.2使用 Chrome Performance 标签分析组件

86张脑图,一口气看完 React 🎉插图29

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

86张脑图,一口气看完 React 🎉插图30

3.10.4其他优化

86张脑图,一口气看完 React 🎉插图31

3.11Portals

86张脑图,一口气看完 React 🎉插图32

3.12Profiler API

86张脑图,一口气看完 React 🎉插图33

3.13不使用 ES6

86张脑图,一口气看完 React 🎉插图34

3.14不使用 JSX

86张脑图,一口气看完 React 🎉插图35

[3.15协调

86张脑图,一口气看完 React 🎉插图36

3.16Refs & DOM

86张脑图,一口气看完 React 🎉插图37

3.17Render Props

86张脑图,一口气看完 React 🎉插图38

3.18.1静态类型检查之Flow

86张脑图,一口气看完 React 🎉插图39

3.18.2静态类型检查之TypeScript

86张脑图,一口气看完 React 🎉插图40

3.18.2静态类型检查之其他

86张脑图,一口气看完 React 🎉插图41

3.19严格模式

86张脑图,一口气看完 React 🎉插图42

3.20使用 PropTypes 进行类型检查

86张脑图,一口气看完 React 🎉插图43

3.21非受控组件

86张脑图,一口气看完 React 🎉插图44

3.22Web Components

86张脑图,一口气看完 React 🎉插图45

4. API 参考

4.1.1React 顶层 API之概览

86张脑图,一口气看完 React 🎉插图46

4.1.2React 顶层 API之参考

86张脑图,一口气看完 React 🎉插图47

4.1.3React 顶层 API之参考2

86张脑图,一口气看完 React 🎉插图48

4.2.1React.Component之概述

86张脑图,一口气看完 React 🎉插图49

4.2.2常用的生命周期方法

86张脑图,一口气看完 React 🎉插图50

4.2.3不常用的生命周期方法

86张脑图,一口气看完 React 🎉插图51

4.2.4其他 API

86张脑图,一口气看完 React 🎉插图52

4.2.5Class 属性和实例属性

86张脑图,一口气看完 React 🎉插图53

4.3ReactDOM

86张脑图,一口气看完 React 🎉插图54

4.4ReactDOMClient

86张脑图,一口气看完 React 🎉插图55

4.5ReactDOMServer

86张脑图,一口气看完 React 🎉插图56

4.6DOM 元素

86张脑图,一口气看完 React 🎉插图57

4.7.1合成事件

86张脑图,一口气看完 React 🎉插图58

4.7.2支持的事件

86张脑图,一口气看完 React 🎉插图59

4.7.3支持的事件2

86张脑图,一口气看完 React 🎉插图60

4.7.4支持的事件3

86张脑图,一口气看完 React 🎉插图61

4.8Test Utilities

86张脑图,一口气看完 React 🎉插图62

4.9Test Renderer

86张脑图,一口气看完 React 🎉插图63

4.10JS 环境要求

86张脑图,一口气看完 React 🎉插图64

4.11React 术语词

86张脑图,一口气看完 React 🎉插图65

5. Hook

5.1Hook 简介

86张脑图,一口气看完 React 🎉插图66

5.2Hook 概览

86张脑图,一口气看完 React 🎉插图67

5.3使用 State Hook

86张脑图,一口气看完 React 🎉插图68

5.4使用 Effect Hook

86张脑图,一口气看完 React 🎉插图69

5.5Hook 规则

86张脑图,一口气看完 React 🎉插图70

5.6自定义

86张脑图,一口气看完 React 🎉插图71

Hook API

86张脑图,一口气看完 React 🎉插图72

5.8.1Hooks FAQ之采纳策略

86张脑图,一口气看完 React 🎉插图73

5.8.2Hooks FAQ之从 Class 迁移到 Hook

86张脑图,一口气看完 React 🎉插图74

5.8.3Hooks FAQ之性能优化

86张脑图,一口气看完 React 🎉插图75

5.8.4Hooks FAQ之底层原理

86张脑图,一口气看完 React 🎉插图76

6. 测试

6.1测试概览

86张脑图,一口气看完 React 🎉插图77

6.2测试技巧

86张脑图,一口气看完 React 🎉插图78

6.3测试环境

86张脑图,一口气看完 React 🎉插图79

7. FAQ

7.1AJAX 及 APIs

86张脑图,一口气看完 React 🎉插图80

7.2Babel,JSX 及构建过程

86张脑图,一口气看完 React 🎉插图81

7.3传递函数给组件

86张脑图,一口气看完 React 🎉插图82

[7.4组件状态.png

86张脑图,一口气看完 React 🎉插图83

7.5样式与 CSS.png

86张脑图,一口气看完 React 🎉插图84

7.6项目文件结构

86张脑图,一口气看完 React 🎉插图85

7.7Virtual DOM 及内核

86张脑图,一口气看完 React 🎉插图86

结语

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

发表评论

后才能评论

评论(2)