目录
React简介
起源与设计理念
React，由Facebook开发并维护，自2013年首次开源以来，迅速成为前端开发领域的一颗璀璨明星。React的设计初衷是为了解决Facebook在构建大型Web应用时遇到的性能和维护性问题。其核心设计理念包括声明式编程和组件化。
声明式编程：React鼓励开发者以声明的方式描述UI，即告诉React“你希望界面看起来像什么”，而不是“如何一步步更新DOM”。这种方式使得代码更加清晰、易于理解和维护。
组件化：React将UI拆分成独立的、可复用的组件，每个组件都封装了自己的逻辑、状态和UI。这种模块化的设计方式不仅提高了开发效率，还促进了代码的重用和团队的协作。
JSX语法
什么是JSX？
JSX是JavaScript XML的缩写，是React推荐的一种语法扩展。它允许开发者在JavaScript代码中直接编写类似HTML的标记，这种标记最终会被Babel等编译器转换成React可以理解的JavaScript对象。
为什么使用JSX？
JSX让React的组件更加直观和易于理解。通过直接在JavaScript代码中编写HTML结构，开发者可以更加自然地描述UI布局，同时享受JavaScript的强大功能，如变量、条件渲染和循环等。
JSX的转换过程
JSX本身不是有效的JavaScript代码，因此在浏览器或Node.js环境中直接运行之前，需要通过如Babel这样的工具进行转换。转换过程中，JSX会被转换成React.createElement()的调用，每个HTML元素都会转换为一个JavaScript对象，这些对象最终会被React用来构建DOM树。
组件化架构
React组件的概念
React组件是构建React应用的基本单位，它们可以接受输入（props）并返回React元素树，这些元素树描述了界面的一部分。组件可以是类组件或函数组件，它们都是React应用的积木。
分类：函数组件 vs 类组件
函数组件：接受props作为参数并返回React元素的简单函数。它们没有自己的状态（state）和生命周期方法，但可以使用Hooks来添加这些功能。
代码示例：
import React from 'react';
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
export default function App() {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
</div>
);
}在这个例子中，我们定义了一个Welcome函数组件，它接收一个props对象作为参数，并返回一个包含问候语的h1元素。然后，在App组件中，我们两次渲染了Welcome组件，分别传递了不同的name属性。
类组件：通过继承React.Component创建的组件，拥有自己的状态（state）和生命周期方法。类组件相对复杂，但在某些场景下（如需要状态管理或复杂的生命周期逻辑时）更为强大。
代码示例：
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
export default class App extends Component {
render() {
return (
<div>
<Welcome name="Charlie" />
<Welcome name="David" />
</div>
);
}
}这个示例与上面的函数组件一样，但使用了类组件的语法。Welcome类继承自React.Component，并通过this.props访问传递给它的属性。然后，在App类中，我们渲染了两个Welcome组件实例。
状态管理
React组件的状态（state）是驱动UI更新的关键。无论是类组件中的this.state（类组件中状态管理只能使用state）还是函数组件中的useState Hook（在18版本往后类组件开始摒弃，推荐使用函数组件以及函数组件专有的hook来进行状态管理），状态都允许组件在内部保存数据，并在数据变化时重新渲染界面。
Props传递
Props（属性）是父组件向子组件传递数据的方式。它们类似于函数的参数，是只读的，这有助于保持组件的封装性和可预测性。
虚拟DOM
高效DOM更新的秘密
React之所以能够实现高效的DOM更新，主要归功于其虚拟DOM机制。虚拟DOM是真实DOM的内存表示，React在内存中构建整个UI的虚拟树，并仅在必要时（即虚拟树发生变化时）才更新真实DOM。
工作原理
当React组件的状态或props发生变化时，React会重新渲染组件并生成新的虚拟DOM树。然后，React会比较新旧两棵虚拟DOM树的差异，并仅将这些差异应用到真实DOM上。这种差异比较和最小更新策略极大地提高了DOM操作的性能。