掌握 React.js 前端开发的生命周期方法
掌握 React.js 前端开发的生命周期方法
关键词：React.js、生命周期方法、前端开发、组件、挂载、更新、卸载
摘要：本文深入探讨了 React.js 前端开发中的生命周期方法。首先介绍了学习 React.js 生命周期方法的背景信息，包括目的、预期读者等。接着详细阐述了核心概念，通过文本示意图和 Mermaid 流程图展示其原理和架构。然后对核心算法原理进行讲解，并给出 Python 源代码示例。同时，介绍了相关的数学模型和公式。在项目实战部分，提供了开发环境搭建、源代码实现和解读。之后列举了实际应用场景，推荐了学习资源、开发工具框架以及相关论文著作。最后总结了未来发展趋势与挑战，并解答了常见问题，给出扩展阅读和参考资料，旨在帮助开发者全面掌握 React.js 的生命周期方法。
1. 背景介绍
1.1 目的和范围
在现代前端开发中，React.js 已经成为了最受欢迎的 JavaScript 库之一。React.js 的组件化开发模式使得代码的可维护性和可复用性大大提高。而生命周期方法是 React.js 组件的重要特性，它描述了组件从创建到销毁的整个过程。掌握这些生命周期方法对于开发者来说至关重要，因为它们可以帮助我们在组件的不同阶段执行特定的操作，例如数据获取、DOM 操作、事件绑定和解绑等。
本文的范围将涵盖 React.js 所有主要的生命周期方法，包括旧版本（React 16.3 之前）和新版本（React 16.3 及以后）的生命周期方法，详细解释每个方法的用途和使用场景，并通过实际的代码示例来演示如何在项目中正确使用这些方法。
1.2 预期读者
本文的预期读者是对 React.js 有一定了解，想要深入学习 React.js 生命周期方法的前端开发者。无论你是初学者还是有一定经验的开发者，通过阅读本文，你都可以对 React.js 的生命周期方法有更深入的理解，并能够在实际项目中灵活运用这些方法。
1.3 文档结构概述
本文将按照以下结构进行组织：
- 背景介绍：介绍学习 React.js 生命周期方法的目的、预期读者和文档结构概述。
- 核心概念与联系：详细解释 React.js 生命周期方法的核心概念，包括组件的挂载、更新和卸载阶段，并通过文本示意图和 Mermaid 流程图展示其原理和架构。
- 核心算法原理 & 具体操作步骤：讲解 React.js 生命周期方法的核心算法原理，并使用 Python 源代码来详细阐述每个方法的实现。
- 数学模型和公式 & 详细讲解 & 举例说明：介绍 React.js 生命周期方法相关的数学模型和公式，并通过具体的例子进行说明。
- 项目实战：代码实际案例和详细解释说明：通过一个实际的项目案例，展示如何在项目中使用 React.js 生命周期方法，包括开发环境搭建、源代码实现和代码解读。
- 实际应用场景：列举 React.js 生命周期方法在实际项目中的常见应用场景。
- 工具和资源推荐：推荐一些学习 React.js 生命周期方法的资源，包括书籍、在线课程、技术博客和网站，以及开发工具框架和相关论文著作。
- 总结：未来发展趋势与挑战：总结 React.js 生命周期方法的未来发展趋势和面临的挑战。
- 附录：常见问题与解答：解答一些关于 React.js 生命周期方法的常见问题。
- 扩展阅读 & 参考资料：提供一些扩展阅读的资料和参考资料。
1.4 术语表
1.4.1 核心术语定义
- React.js：一个用于构建用户界面的 JavaScript 库，采用虚拟 DOM 和组件化开发模式。
- 组件：React.js 应用的基本构建块，可分为类组件和函数组件。
- 生命周期方法：组件从创建到销毁过程中不同阶段自动调用的方法。
- 挂载：组件被创建并插入到 DOM 中的过程。
- 更新：组件的 props 或 state 发生变化时，重新渲染的过程。
- 卸载：组件从 DOM 中移除的过程。
1.4.2 相关概念解释
- 虚拟 DOM：React.js 为了提高性能而引入的一种轻量级 JavaScript 对象，它是真实 DOM 的抽象表示。React.js 通过比较虚拟 DOM 的差异，只更新需要更新的真实 DOM 部分。
- 状态（state）：组件内部的私有数据，用于存储组件的动态信息。当状态发生变化时，组件会重新渲染。
- 属性（props）：父组件传递给子组件的数据，是只读的，子组件不能直接修改 props。
1.4.3 缩略词列表
- DOM：Document Object Model，文档对象模型，是 HTML 和 XML 文档的编程接口。
- JSX：JavaScript XML，一种 JavaScript 的语法扩展，用于在 JavaScript 代码中编写类似 XML 的结构。
2. 核心概念与联系
2.1 旧版本 React.js 生命周期方法概述
在 React 16.3 之前，React.js 的生命周期方法可以分为三个主要阶段：挂载阶段、更新阶段和卸载阶段。
2.1.1 挂载阶段
挂载阶段是组件被创建并插入到 DOM 中的过程，涉及以下生命周期方法：
componentWillMount()：在组件即将挂载到 DOM 之前调用，在这个方法中可以进行一些初始化操作，如设置初始状态。render()：必须实现的方法，用于返回组件的 JSX 结构。componentDidMount()：在组件挂载到 DOM 之后调用，通常用于进行数据获取、事件绑定等操作。
2.1.2 更新阶段
更新阶段是组件的 props 或 state 发生变化时，重新渲染的过程，涉及以下生命周期方法：
componentWillReceiveProps(nextProps)：在组件接收到新的 props 时调用，可以根据新的 props 更新组件的状态。shouldComponentUpdate(nextProps, nextState)：用于决定组件是否需要重新渲染，返回true表示需要重新渲染，返回false表示不需要重新渲染。componentWillUpdate(nextProps, nextState)：在组件即将更新之前调用，不能在这个方法中调用setState()。render()：再次调用render()方法进行重新渲染。componentDidUpdate(prevProps, prevState)：在组件更新完成之后调用，可以进行一些 DOM 操作。
2.1.3 卸载阶段
卸载阶段是组件从 DOM 中移除的过程，涉及以下生命周期方法：
componentWillUnmount()：在组件即将卸载之前调用，通常用于清理一些资源，如取消定时器、解绑事件等。
2.2 新版本 React.js 生命周期方法概述
在 React 16.3 及以后，React.js 对生命周期方法进行了一些调整，引入了一些新的方法，同时标记了一些旧方法为废弃方法。新版本的生命周期方法同样可以分为三个主要阶段：挂载阶段、更新阶段和卸载阶段。
2.2.1 挂载阶段
constructor()：组件的构造函数，用于初始化组件的状态和绑定方法。static getDerivedStateFromProps(props, state)：静态方法，在组件挂载和更新时都会调用，用于根据 props 更新组件的状态。render()：返回组件的 JSX 结构。componentDidMount()：在组件挂载到 DOM 之后调用。
2.2.2 更新阶段
static getDerivedStateFromProps(props, state)：在组件更新时再次调用。shouldComponentUpdate(nextProps, nextState)：决定组件是否需要重新渲染。render()：重新渲染组件。getSnapshotBeforeUpdate(prevProps, prevState)：在组件更新之前调用，返回一个快照值，用于在componentDidUpdate()中使用。componentDidUpdate(prevProps, prevState, snapshot)：在组件更新完成之后调用。
2.2.3 卸载阶段
componentWillUnmount()：在组件即将卸载之前调用。
2.3 核心概念原理和架构的文本示意图
+---------------------+
| 挂载阶段 |
|---------------------|
| constructor() |
| getDerivedStateFromProps() |
| render() |
| componentDidMount() |
+---------------------+
| 更新阶段 |
|---------------------|
| getDerivedStateFromProps() |
| shouldComponentUpdate() |
| render() |
| getSnapshotBeforeUpdate() |
| componentDidUpdate() |
+---------------------+
| 卸载阶段 |
|---------------------|
| componentWillUnmount() |
+---------------------+
2.4 Mermaid 流程图
3. 核心算法原理 & 具体操作步骤
3.1 旧版本生命周期方法的 Python 模拟实现
虽然 React.js 是用 JavaScript 编写的，但我们可以使用 Python 来模拟实现其生命周期方法，以更好地理解其原理。
# 模拟 React 组件类
class ReactComponent:
def __init__(self, props):
self.props = props
self.state = {}
# 模拟挂载前调用 componentWillMount
self.componentWillMount()
def componentWillMount(self):
print("componentWillMount: 组件即将挂载")
def render(self):
print("render: 渲染组件")
return "Component"
def componentDidMount(self):
print("componentDidMount: 组件已挂载")
def componentWillReceiveProps(self, nextProps):
print(f"componentWillReceiveProps: 接收到新的 props {nextProps}")
def shouldComponentUpdate(self, nextProps, nextState):
print("shouldComponentUpdate: 检查是否需要更新")
return True
def componentWillUpdate(self, nextProps, nextState):
print("componentWillUpdate: 组件即将更新")
def componentDidUpdate(self, prevProps, prevState):
print("componentDidUpdate: 组件已更新")
def componentWillUnmount(self):
print("componentWillUnmount: 组件即将卸载")
# 模拟更新组件
def update(self, newProps):
self.componentWillReceiveProps(newProps)
if self.shouldComponentUpdate(newProps, self.state):
self.componentWillUpdate(newProps, self.state)
self.render()
self.componentDidUpdate(self.props, self.state)
self.props = newProps
# 模拟卸载组件
def unmount(self):
self.componentWillUnmount()
# 创建组件实例
props = {"name": "John"}
component = ReactComponent(props)
component.render()
component.componentDidMount()
# 更新组件
newProps = {"name": "Jane"}
component.update(newProps)
# 卸载组件
component.unmount()
3.2 新版本生命周期方法的 Python 模拟实现
# 模拟 React 组件类
class ReactComponent:
def __init__(self, props):
self.props = props
self.state = {}
@staticmethod
def getDerivedStateFromProps(props, state):
print("getDerivedStateFromProps: 根据 props 更新状态")
return state
def render(self):
print("render: 渲染组件")
return "Component"
def componentDidMount(self):
print("componentDidMount: 组件已挂载")
def shouldComponentUpdate(self, nextProps, nextState):
print("shouldComponentUpdate: 检查是否需要更新")
return True
def getSnapshotBeforeUpdate(self, prevProps, prevState):
print("getSnapshotBeforeUpdate: 获取更新前的快照")
return None
def componentDidUpdate(self, prevProps, prevState, snapshot):
print("componentDidUpdate: 组件已更新")
def componentWillUnmount(self):
print("componentWillUnmount: 组件即将卸载")
# 模拟更新组件
def update(self, newProps):
newState = self.getDerivedStateFromProps(newProps, self.state)
if self.shouldComponentUpdate(newProps, newState):
snapshot = self.getSnapshotBeforeUpdate(self.props, self.state)
self.render()
self.componentDidUpdate(self.props, self.state, snapshot)
self.props = newProps
self.state = newState
# 模拟卸载组件
def unmount(self):
self.componentWillUnmount()
# 创建组件实例
props = {"name": "John"}
component = ReactComponent(props)
component.getDerivedStateFromProps(props, component.state)
component.render()
component.componentDidMount()
# 更新组件
newProps = {"name": "Jane"}
component.update(newProps)
# 卸载组件
component.unmount()
3.3 具体操作步骤
3.3.1 挂载阶段
- 在
constructor()中初始化组件的状态和绑定方法。 - 在
getDerivedStateFromProps()中根据 props 更新组件的状态。 - 调用
render()方法返回组件的 JSX 结构。 - 在
componentDidMount()中进行数据获取、事件绑定等操作。
3.3.2 更新阶段
- 在
getDerivedStateFromProps()中再次根据新的 props 更新组件的状态。 - 调用
shouldComponentUpdate()决定组件是否需要重新渲染。 - 如果需要重新渲染，调用
render()方法重新渲染组件。 - 在
getSnapshotBeforeUpdate()中获取更新前的快照。 - 在
componentDidUpdate()中进行一些 DOM 操作。
3.3.3 卸载阶段
在 componentWillUnmount() 中清理一些资源，如取消定时器、解绑事件等。
4. 数学模型和公式 & 详细讲解 & 举例说明
4.1 数学模型和公式
虽然 React.js 的生命周期方法本身并没有直接的数学模型和公式，但我们可以从性能优化的角度来考虑一些数学概念。例如，在 shouldComponentUpdate() 方法中，我们可以通过比较新旧 props 和 state 的差异来决定是否需要重新渲染组件。
假设我们有一个组件，它的 props 是一个对象，我们可以通过比较对象的属性来判断是否需要重新渲染。设旧的 props 为 P o l d P_{old} Pold，新的 props 为 P n e w P_{new} Pnew，我们可以定义一个函数 f ( P o l d , P n e w ) f(P_{old}, P_{new}) f(Pold,Pnew) 来判断是否需要重新渲染：
f ( P o l d , P n e w ) = { t r u e , if ∃ k ∈ P o l d ∪ P n e w , P o l d [ k ] ≠ P n e w [ k ] f a l s e , otherwise f(P_{old}, P_{new}) = \begin{cases} true, & \text{if } \exists k \in P_{old} \cup P_{new}, P_{old}[k] \neq P_{new}[k] \\ false, & \text{otherwise} \end{cases} f(Pold,Pnew)={true,false,if ∃k∈Pold∪Pnew,Pold[k]=Pnew[k]otherwise
其中 k k k 是对象的属性名。
4.2 详细讲解
在 shouldComponentUpdate() 方法中，我们可以使用上述函数来决定组件是否需要重新渲染。例如：
def shouldComponentUpdate(self, nextProps, nextState):
for key in set(self.props.keys()) | set(nextProps.keys()):
if key not in self.props or key not in nextProps or self.props[key] != nextProps[key]:
return True
return False
4.3 举例说明
假设我们有一个组件，它的 props 是一个包含 name 和 age 属性的对象：
class MyComponent:
def __init__(self, props):
self.props = props
def shouldComponentUpdate(self, nextProps, nextState):
for key in set(self.props.keys()) | set(nextProps.keys()):
if key not in self.props or key not in nextProps or self.props[key] != nextProps[key]:
return True
return False
# 创建组件实例
props = {"name": "John", "age": 25}
component = MyComponent(props)
# 更新 props
newProps = {"name": "John", "age": 25}
print(component.shouldComponentUpdate(newProps, {})) # 输出 False
newProps = {"name": "Jane", "age": 25}
print(component.shouldComponentUpdate(newProps, {})) # 输出 True
在这个例子中，当 name 属性发生变化时，shouldComponentUpdate() 方法返回 True，表示组件需要重新渲染；当 name 和 age 属性都没有变化时，返回 False，表示组件不需要重新渲染。
5. 项目实战：代码实际案例和详细解释说明
5.1 开发环境搭建
5.1.1 安装 Node.js 和 npm
首先，你需要安装 Node.js 和 npm（Node Package Manager）。你可以从 Node.js 官方网站 下载并安装适合你操作系统的版本。安装完成后，打开终端，运行以下命令检查是否安装成功：
node -v
npm -v
5.1.2 创建 React 项目
使用 create-react-app 工具创建一个新的 React 项目：
npx create-react-app react-lifecycle-demo
cd react-lifecycle-demo
5.1.3 启动开发服务器
在项目根目录下，运行以下命令启动开发服务器：
npm start
打开浏览器，访问 http://localhost:3000，你应该可以看到一个默认的 React 应用界面。
5.2 源代码详细实现和代码解读
5.2.1 创建一个类组件
在 src 目录下创建一个新的文件 LifecycleComponent.js，并编写以下代码：
import React, { Component } from 'react';
class LifecycleComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
console.log('constructor: 初始化组件状态');
}
static getDerivedStateFromProps(props, state) {
console.log('getDerivedStateFromProps: 根据 props 更新状态');
return null;
}
componentDidMount() {
console.log('componentDidMount: 组件已挂载');
this.timer = setInterval(() => {
this.setState(prevState => ({
count: prevState.count + 1
}));
}, 1000);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('shouldComponentUpdate: 检查是否需要更新');
return true;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('getSnapshotBeforeUpdate: 获取更新前的快照');
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('componentDidUpdate: 组件已更新');
}
componentWillUnmount() {
console.log('componentWillUnmount: 组件即将卸载');
clearInterval(this.timer);
}
render() {
console.log('render: 渲染组件');
return (
Count: {this.state.count}
);
}
}
export default LifecycleComponent;
5.2.2 在 App.js 中使用该组件
打开 src/App.js 文件，修改代码如下：
import React from 'react';
import LifecycleComponent from './LifecycleComponent';
function App() {
return (
5.3 代码解读与分析
5.3.1 constructor()
在 constructor() 中，我们初始化了组件的状态 count 为 0，并打印了一条日志信息。
5.3.2 getDerivedStateFromProps()
这是一个静态方法，在组件挂载和更新时都会调用。在这个方法中，我们只是打印了一条日志信息，没有对状态进行更新。
5.3.3 componentDidMount()
在 componentDidMount() 中，我们打印了一条日志信息，并使用 setInterval() 函数每隔 1 秒更新一次组件的状态。
5.3.4 shouldComponentUpdate()
在 shouldComponentUpdate() 中，我们打印了一条日志信息，并返回 true，表示组件需要重新渲染。
5.3.5 getSnapshotBeforeUpdate()
在 getSnapshotBeforeUpdate() 中，我们打印了一条日志信息，并返回 null。
5.3.6 componentDidUpdate()
在 componentDidUpdate() 中，我们打印了一条日志信息。
5.3.7 componentWillUnmount()
在 componentWillUnmount() 中，我们打印了一条日志信息，并使用 clearInterval() 函数清除定时器，以避免内存泄漏。
5.3.8 render()
在 render() 中，我们打印了一条日志信息，并返回一个包含计数器值的 h1 标签。
6. 实际应用场景
6.1 数据获取
在 componentDidMount() 方法中进行数据获取是非常常见的场景。例如，我们可以使用 fetch API 从服务器获取数据，并将数据存储在组件的状态中：
import React, { Component } from 'react';
class DataFetchingComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => this.setState({ data }));
}
render() {
const { data } = this.state;
return (
{data ? (
{JSON.stringify(data, null, 2)}
) : (
Loading...
)}
);
}
}
export default DataFetchingComponent;
6.2 事件绑定和解绑
在 componentDidMount() 中绑定事件，在 componentWillUnmount() 中解绑事件，以避免内存泄漏。例如：
import React, { Component } from 'react';
class EventBindingComponent extends Component {
handleScroll = () => {
console.log('Scroll event triggered');
};
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
render() {
return (
Scroll the window to trigger the event
);
}
}
export default EventBindingComponent;
6.3 性能优化
使用 shouldComponentUpdate() 方法来避免不必要的重新渲染，提高组件的性能。例如：
import React, { Component } from 'react';
class PerformanceOptimizationComponent extends Component {
shouldComponentUpdate(nextProps, nextState) {
return this.props.value !== nextProps.value;
}
render() {
return (
Value: {this.props.value}
);
}
}
export default PerformanceOptimizationComponent;
7. 工具和资源推荐
7.1 学习资源推荐
7.1.1 书籍推荐
- 《React.js 实战》：本书详细介绍了 React.js 的核心概念和开发技巧，包括生命周期方法的使用。
- 《React Native 实战》：如果你想学习如何使用 React.js 开发移动应用，这本书是一个不错的选择。
7.1.2 在线课程
- React.js 官方文档：官方文档是学习 React.js 的最佳资源，包含了详细的教程和文档。
- MDN Web Docs：MDN 提供了丰富的前端开发教程，包括 React.js 的入门教程。
7.1.3 技术博客和网站
- React官方博客：官方博客会发布 React.js 的最新消息和技术文章。
- React Router官方文档：如果你想学习 React.js 的路由管理，这个文档是必不可少的。
7.2 开发工具框架推荐
7.2.1 IDE和编辑器
- Visual Studio Code：一款功能强大的开源代码编辑器，支持 React.js 开发，有丰富的插件可以使用。
- WebStorm：JetBrains 公司开发的专业前端开发 IDE，对 React.js 有很好的支持。
7.2.2 调试和性能分析工具
- React DevTools：一款 Chrome 浏览器插件，用于调试 React.js 应用。
- Chrome DevTools：Chrome 浏览器自带的开发者工具，可以进行性能分析和调试。
7.2.3 相关框架和库
- React Router：用于实现 React.js 应用的路由管理。
- Redux：用于管理 React.js 应用的状态。
7.3 相关论文著作推荐
7.3.1 经典论文
- React: Facebook’s JavaScript Library for Building User Interfaces：这篇文章介绍了 React.js 的设计理念和优势。
- Virtual DOM and Diffing：详细解释了 React.js 的虚拟 DOM 和差异比较算法。
7.3.2 最新研究成果
- Concurrent React：介绍了 React.js 的并发模式，这是 React.js 的一个重要发展方向。
- React Server Components：介绍了 React.js 的服务器组件，用于解决数据获取和渲染的性能问题。
7.3.3 应用案例分析
- How Airbnb Uses React：介绍了 Airbnb 如何使用 React.js 开发其前端应用。
- React at Instagram：介绍了 Instagram 如何使用 React.js 开发其移动端应用。
8. 总结：未来发展趋势与挑战
8.1 未来发展趋势
8.1.1 并发模式
React.js 的并发模式是未来的一个重要发展方向。并发模式允许 React.js 同时处理多个任务，提高应用的响应性能。通过并发模式，React.js 可以在不阻塞主线程的情况下进行渲染和数据获取，从而提供更流畅的用户体验。
8.1.2 服务器组件
服务器组件是 React.js 的另一个重要发展方向。服务器组件允许在服务器端进行部分渲染，减少客户端的渲染负担，提高应用的性能。服务器组件还可以更好地处理数据获取和缓存，提供更好的 SEO 支持。
8.1.3 与其他技术的融合
React.js 可能会与其他技术进行更深入的融合，例如与 GraphQL、WebAssembly 等技术结合，提供更强大的功能和更好的性能。
8.2 挑战
8.2.1 学习曲线
随着 React.js 的不断发展，新的特性和概念不断涌现，这增加了开发者的学习成本。开发者需要不断学习和掌握新的知识，才能跟上 React.js 的发展步伐。
8.2.2 性能优化
虽然 React.js 本身已经有很多性能优化的机制，但在复杂的应用场景下，仍然需要开发者进行手动优化。例如，合理使用 shouldComponentUpdate() 方法、避免不必要的重新渲染等。
8.2.3 生态系统的兼容性
随着 React.js 生态系统的不断壮大，不同的库和框架之间可能会存在兼容性问题。开发者需要仔细选择和使用第三方库，确保它们与 React.js 兼容。
9. 附录：常见问题与解答
9.1 为什么 componentWillReceiveProps() 被标记为废弃方法？
componentWillReceiveProps() 被标记为废弃方法是因为它可能会导致一些难以调试的问题。在这个方法中，开发者可能会错误地根据新的 props 更新组件的状态，从而导致组件的状态与 props 不一致。为了解决这个问题，React.js 引入了 static getDerivedStateFromProps() 方法，它是一个静态方法，只能用于根据 props 更新组件的状态，避免了副作用。
9.2 shouldComponentUpdate() 方法的返回值有什么作用？
shouldComponentUpdate() 方法的返回值决定了组件是否需要重新渲染。如果返回 true，组件将重新渲染；如果返回 false，组件将不会重新渲染。通过合理使用这个方法，可以避免不必要的重新渲染，提高组件的性能。
9.3 在 componentWillUnmount() 中需要做什么？
在 componentWillUnmount() 中，通常需要清理一些资源，如取消定时器、解绑事件等。这是因为组件即将被卸载，如果不清理这些资源，可能会导致内存泄漏。
9.4 如何在 getDerivedStateFromProps() 中更新状态？
getDerivedStateFromProps() 是一个静态方法，不能直接访问 this。要更新状态，需要返回一个新的状态对象。例如：
static getDerivedStateFromProps(props, state) {
if (props.value !== state.value) {
return {
value: props.value
};
}
return null;
}
10. 扩展阅读 & 参考资料
10.1 扩展阅读
- React.js 官方文档：深入学习 React.js 的最佳资源。
- React.js 官方博客：获取 React.js 最新消息和技术文章。
- MDN Web Docs：提供丰富的前端开发教程。
10.2 参考资料
- 《React.js 实战》
- 《React Native 实战》
- React Router官方文档
- Redux官方文档
- React DevTools
- Chrome DevTools
- How Airbnb Uses React
- React at Instagram
- React: Facebook’s JavaScript Library for Building User Interfaces
- Virtual DOM and Diffing
- Concurrent React
- React Server Components