React 18.0^[1] 已經(jīng)發(fā)布一段時(shí)間了

所以這兩天抽空重新完整的過(guò)了一遍 React

我將所有內(nèi)容整理為以下86張腦圖，方便以后查閱

附原圖和源文件：

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

86張腦圖

1. 安裝

2. 核心概念

JSX 簡(jiǎn)介

2.2元素渲染

2.3組件 & Props

2.4.1State & 生命周期

2.4.2數(shù)據(jù)流和正確使用State

2.5事件處理

2.6條件渲染

2.7列表 & Key

2.8表單

2.9狀態(tài)提升

2.10組合 vs 繼承

2.11React 哲學(xué)

3. 高級(jí)指引

3.1無(wú)障礙輔助功能

3.2代碼分割

3.3.1Context

3.3.2Context API

3.4錯(cuò)誤邊界

3.5Refs 轉(zhuǎn)發(fā)

3.6Fragments

3.7高階組件

3.8.1集成帶有 DOM 操作的插件

3.8.2與其他第三方庫(kù)協(xié)同

3.9.1JSX 本質(zhì)

3.9.2JSX 指定 React 元素類型

3.9.3JSX 中指定 props

3.9.4JSX 中的子元素

3.10.1性能優(yōu)化之生產(chǎn)版本

3.10.2使用 Chrome Performance 標(biāo)簽分析組件

3.10.3使用開(kāi)發(fā)者工具中的分析器對(duì)組件進(jìn)行分析

3.10.4其他優(yōu)化

3.11Portals

3.12Profiler API

3.13不使用 ES6

3.14不使用 JSX

[3.15協(xié)調(diào)

3.16Refs & DOM

3.17Render Props

3.18.1靜態(tài)類型檢查之Flow

3.18.2靜態(tài)類型檢查之TypeScript

3.18.2靜態(tài)類型檢查之其他

3.19嚴(yán)格模式

3.20使用 PropTypes 進(jìn)行類型檢查

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 屬性和實(shí)例屬性

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 環(huán)境要求

4.11React 術(shù)語(yǔ)詞

5. Hook

5.1Hook 簡(jiǎn)介

5.2Hook 概覽

5.3使用 State Hook

5.4使用 Effect Hook

5.5Hook 規(guī)則

5.6自定義

Hook API

5.8.1Hooks FAQ之采納策略

5.8.2Hooks FAQ之從 Class 遷移到 Hook

5.8.3Hooks FAQ之性能優(yōu)化

5.8.4Hooks FAQ之底層原理

6. 測(cè)試

6.1測(cè)試概覽

6.2測(cè)試技巧

6.3測(cè)試環(huán)境

7. FAQ

7.1AJAX 及 APIs

7.2Babel，JSX 及構(gòu)建過(guò)程

7.3傳遞函數(shù)給組件

[7.4組件狀態(tài).png

7.5樣式與 CSS.png

7.6項(xiàng)目文件結(jié)構(gòu)

7.7Virtual DOM 及內(nèi)核

結(jié)語(yǔ)

以上是本文的所有內(nèi)容，如有問(wèn)題歡迎指正 ??

作者：LBJ

原文：https://juejin.cn/post/7085145274200358949

參考資料