86張腦圖,一口氣看完 React
前言
React 18.0 [1] 已經發布兩週了
所以這兩天抽空重新完整的過了一遍 React
我將所有內容整理為以下 86
張腦圖,方便以後查閱
附原圖和原始檔:
原圖和原始檔(包括 xmind
和 pos
檔案)已上傳 github [2] ,如有需要可自行下載
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自定義

Hook 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元件狀態.png

7.5樣式與 CSS.png

7.6專案檔案結構

7.7Virtual DOM 及核心

結語
以上是本文的所有內容,如有問題歡迎指正 :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
創作不易, 加個 點贊、在看 支援一下哦!
「其他文章」
- AI 聯動!現在前端都流行這樣開發~ 效率提升 100%
- Git 還沒完全會用呢,就給它貢獻了程式碼!
- 如何基於 HTTP 快取失效策略實現 Request 快取?
- 圍觀!我國第一個推進到瀏覽器標準的 ECMaScript 提案!
- CSS 實現輪播效果,根本不需要 JS
- 2022網際網路大廠端午禮盒大比拼!
- 真的不要錯過這幾個 React 工具好嗎?
- 在國外當程式設計師爽不爽?
- JS 執行機制最全面的一次梳理
- JavaScript 框架發展的四個時代,以後的發展方向是什麼?
- Python 已可在瀏覽器端執行,來搶前端飯碗?
- 2022 年值得推薦的 76個 React 庫!
- 我發現 React18 文件裡寫錯了
- 僅用一個HTML標籤,實現帶動畫的抖音Logo
- Node 12 結束維護,Node 18 來了
- 12個可能你沒見過,但非常實用的 HTML 標籤
- 不用跑專案,元件效果所見即所得,絕了!
- 86張腦圖,一口氣看完 React
- 身在上海,這個外掛幫我搶了一個月的菜!感謝!
- 煥然一新的 Vue3 中文文件來了!