博客

86张脑图，一口气看完 React，想学React的看过来，React知识图谱汇总

  • Post author:
  • Post category:其他




前言


React 18.0

已经发布两周了

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

React

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

附原图和源文件：

原图和源文件（包括xmind和pos文件）已上传

github

，如有需要可自行下载



86张脑图



1. 安装

在这里插入图片描述



2. 核心概念



JSX 简介

在这里插入图片描述



2.2元素渲染

在这里插入图片描述



2.3组件 & Props

在这里插入图片描述



2.4.1State & 生命周期

在这里插入图片描述



2.4.2数据流和正确使用State

在这里插入图片描述



2.5事件处理

在这里插入图片描述



2.6条件渲染

在这里插入图片描述



2.7列表 & Key

在这里插入图片描述



2.8表单

在这里插入图片描述



2.9状态提升

在这里插入图片描述



2.10组合 vs 继承

在这里插入图片描述



2.11React 哲学

在这里插入图片描述



3. 高级指引



3.1无障碍辅助功能

在这里插入图片描述



3.2代码分割

在这里插入图片描述



3.3.1Context

在这里插入图片描述



3.3.2Context API

在这里插入图片描述



3.4错误边界

在这里插入图片描述



3.5Refs 转发

在这里插入图片描述



3.6Fragments

在这里插入图片描述



3.7高阶组件

在这里插入图片描述



3.8.1集成带有 DOM 操作的插件

在这里插入图片描述



3.8.2与其他第三方库协同

在这里插入图片描述



3.9.1JSX 本质

在这里插入图片描述



3.9.2JSX 指定 React 元素类型

在这里插入图片描述



3.9.3JSX 中指定 props

在这里插入图片描述



3.9.4JSX 中的子元素

在这里插入图片描述



3.10.1性能优化之生产版本

在这里插入图片描述



3.10.2使用 Chrome Performance 标签分析组件

在这里插入图片描述



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

在这里插入图片描述



3.10.4其他优化

在这里插入图片描述



3.11Portals

在这里插入图片描述



3.12Profiler API

在这里插入图片描述



3.13不使用 ES6

在这里插入图片描述



3.14不使用 JSX

在这里插入图片描述



3.15协调

在这里插入图片描述



3.16Refs & DOM

在这里插入图片描述



3.17Render Props

在这里插入图片描述



3.18.1静态类型检查之Flow

在这里插入图片描述



3.18.2静态类型检查之TypeScript

在这里插入图片描述



3.18.2静态类型检查之其他

在这里插入图片描述



3.19严格模式

在这里插入图片描述



3.20使用 PropTypes 进行类型检查

在这里插入图片描述



3.21非受控组件

在这里插入图片描述



3.22Web Components

在这里插入图片描述



4. API 参考



4.1.1React 顶层 API之概览

在这里插入图片描述



4.1.2React 顶层 API之参考

在这里插入图片描述



4.1.3React 顶层 API之参考2

在这里插入图片描述



4.2.1React.Component之概述

在这里插入图片描述



4.2.2常用的生命周期方法

在这里插入图片描述



4.2.3不常用的生命周期方法

在这里插入图片描述



4.2.4其他 API

在这里插入图片描述



4.2.5Class 属性和实例属性

在这里插入图片描述



4.3ReactDOM

在这里插入图片描述



4.4ReactDOMClient

在这里插入图片描述



4.5ReactDOMServer

在这里插入图片描述



4.6DOM 元素

在这里插入图片描述



4.7.1合成事件

在这里插入图片描述



4.7.2支持的事件

在这里插入图片描述



4.7.3支持的事件2

在这里插入图片描述



4.7.4支持的事件3

在这里插入图片描述



4.8Test Utilities

在这里插入图片描述



4.9Test Renderer

在这里插入图片描述



4.10JS 环境要求

在这里插入图片描述



4.11React 术语词

在这里插入图片描述



5. Hook



5.1Hook 简介

在这里插入图片描述



5.2Hook 概览

在这里插入图片描述



5.3使用 State Hook

在这里插入图片描述



5.4使用 Effect Hook

在这里插入图片描述



5.5Hook 规则

在这里插入图片描述



5.6自定义

在这里插入图片描述



5.7Hook API

在这里插入图片描述



5.8.1Hooks FAQ之采纳策略

在这里插入图片描述



5.8.2Hooks FAQ之从 Class 迁移到 Hook

在这里插入图片描述



5.8.3Hooks FAQ之性能优化

在这里插入图片描述



5.8.4Hooks FAQ之底层原理

在这里插入图片描述



6. 测试



6.1测试概览

在这里插入图片描述



6.2测试技巧

在这里插入图片描述



6.3测试环境

在这里插入图片描述



7. FAQ



7.1AJAX 及 APIs

在这里插入图片描述



7.2Babel，JSX 及构建过程

在这里插入图片描述



7.3传递函数给组件

在这里插入图片描述



7.4组件状态

在这里插入图片描述



7.5样式与 CSS

在这里插入图片描述



7.6项目文件结构

在这里插入图片描述



7.7Virtual DOM 及内核

在这里插入图片描述