React核心概念学习思维导图

1. JSX

1.1. 基本概念

1.1.1. JavaScript语法扩展

1.1.2. 类似HTML的语法

1.1.3. 编译为React.createElement()

1.2. 核心特性

1.2.1. 表达式嵌入{}

1.2.2. 属性命名(camelCase)

1.2.3. 子元素与嵌套

1.3. 注意事项

1.3.1. 必须闭合标签

1.3.2. 必须有一个根元素

1.3.3. 使用className代替class

2. 组件

2.1. 组件类型

2.1.1. 函数组件

2.1.1.1. 无状态组件

2.1.1.2. 使用Hooks添加状态

2.1.2. 类组件

2.1.2.1. 继承React.Component

2.1.2.2. 生命周期方法

2.2. 组件通信

2.2.1. Props（父传子）

2.2.2. 回调函数（子传父）

2.2.3. Context API（跨层级）

2.3. 生命周期（类组件）

2.3.1. 挂载阶段

2.3.1.1. constructor()

2.3.1.2. render()

2.3.1.3. componentDidMount()

2.3.2. 更新阶段

2.3.2.1. shouldComponentUpdate()

2.3.2.2. render()

2.3.2.3. componentDidUpdate()

2.3.3. 卸载阶段

2.3.3.1. componentWillUnmount()

3. Hooks

3.1. 基础Hooks

3.1.1. useState

3.1.1.1. 状态声明与更新

3.1.1.2. 函数式更新

3.1.2. useEffect

3.1.2.1. 副作用处理

3.1.2.2. 依赖数组控制

3.1.2.3. 清理函数

3.1.3. useContext

3.1.3.1. Context值消费

3.2. 额外Hooks

3.2.1. useReducer

3.2.1.1. 复杂状态管理

3.2.2. useCallback

3.2.2.1. 函数记忆化

3.2.3. useMemo

3.2.3.1. 值记忆化

3.2.4. useRef

3.2.4.1. DOM引用

3.2.4.2. 可变值容器

3.3. Hooks规则

3.3.1. 只在顶层调用

3.3.2. 只在React函数中调用

4. 状态管理

4.1. 组件内状态

4.1.1. useState

4.1.2. useReducer

4.2. 组件间状态共享

4.2.1. 状态提升

4.2.2. Context API

4.2.3. 第三方状态管理库

4.3. 状态管理原则

4.3.1. 单一数据源

4.3.2. 状态只读

4.3.3. 纯函数修改

5. 常用生态库

5.1. 状态管理库

5.1.1. Redux

5.1.1.1. 核心概念

5.1.1.1.1. Store

5.1.1.1.2. Action

5.1.1.1.3. Reducer

5.1.1.2. React-Redux

5.1.1.2.1. Provider