86張腦圖，一口氣看完 React

語言: CN / TW / HK
時間 2022-04-12 09:57:53
主題:

前言

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

結語

以上是本文的所有內容，如有問題歡迎指正 :two_hearts:

作者：LBJ

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

參考資料

[1]

React 18.0: https://link.juejin.cn?target=https%3A%2F%2Freact.docschina.org%2Fblog%2F2022%2F03%2F29%2Freact-v18.html

[2]

github: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FjCodeLife%2Fmind-map%2Ftree%2Fmaster%2FReact

創作不易， 加個 點贊、在看   支援一下哦！

「」