3. React 元素（JS对象）和 React 组件（函数或类）React 元素和 React 组件，React

React 元素（JS对象）和 React 组件（函数或类）

React 元素 是个普通的 JavaScript 对象，它包含了描述 UI 内容和结构的必要信息。就是 告诉 React “我想要显示什么样的界面” 。React 组件 是 定义 UI 和行为的函数（函数组件）或类（类组件）。React 元素是 React 组件的输出。

1 React 元素

在 React 中，React 元素 是构建 用户界面 的 基本单位。它是一个 JavaScript 对象，描述了在 UI 中应该 渲染的内容。

React 元素 可以是 DOM 元素（如 <div>, <button> 等）或自定义的 React 组件（如 MyComponent）。React 使用这些元素来创建和更新浏览器中的 UI。

1.1 React 元素的基本结构

React 元素 是通过 React.createElement() 函数 创建的。每个 React 元素都包含以下信息：

类型（type） ：元素的类型，例如 DOM 元素类型（'div', 'h1' 等），或 React 组件（如 MyComponent）；
属性（props） ：元素的属性，类似 HTML 元素的属性。例如，对于一个 <button> 元素，可以有 onClick、disabled 等属性；
子元素（children） ：元素的内容，通常是其他 React 元素 或者文本。

1.2 React 元素的创建

React 元素 通常通过 JSX 来创建，但实际上它们被转换为 React.createElement() 调用。

const element = <h1>Hello, world!</h1>;
// 上面这个 JSX 会被编译为下面代码
const element = React.createElement('h1', null, 'Hello, world!');

'h1'：元素的类型（一个 DOM 元素类型）；
null：没有传递属性（props）；
'Hello, world!'：子元素，文本内容。

1.3 React 元素是不可变的

React 元素 一旦创建，就 不能修改。如果你想 改变 UI，React 会 重新创建元素 并通过 虚拟 DOM 来 比较差异 并高效更新 实际 DOM。

1.4 React 元素示例

基本 DOM 元素

const element = <h1>Hello, world!</h1>;

这行代码会生成一个 React 元素，描述一个 h1 标签，且内容为 "Hello, world!"。

带属性的元素

const element = <button disabled={true}>Click Me</button>;

这是一个 包含属性 的 React 元素，disabled={true} 表示该按钮被禁用。

嵌套子元素

const element = (
  <div>
    <h1>Welcome to React</h1>
    <p>This is a simple React example.</p>
  </div>
);

这是一个包含 多个子元素 的 React 元素，<div> 包裹了 两个子元素：<h1> 和 <p>。

传递动态数据

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

这行代码展示了如何在 React 元素中 插入动态数据。{name} 是一个 JavaScript 表达式，会被替换为 "Alice"。

1.5 React 元素与虚拟 DOM

React 使用 虚拟 DOM 来 优化 UI 更新。虚拟 DOM 是 React 在内存中 保持的一个轻量级的表示树。

每当 React 元素 的状态或属性发生变化时，React 会 重新创建虚拟 DOM 树 并与 实际 DOM 进行对比（称为“diff 算法”），然后 只更新差异部分。

这使得 React 能够有效地进行 批量更新，减少对 实际 DOM 的操作，提高性能。

1.6 React 元素的更新

React 元素本身是不可变的。当你更新组件的状态（state）时，React 会在内存中重新创建一个新的元素树（虚拟 DOM）。React 会将这个新的元素树与旧的元素树（实际 DOM）进行比较，然后进行高效更新。

1.7 React 元素的限制

React 元素是不可变的，不能直接修改其属性或内容。如果需要更新某个部分，应该通过更新组件的 state 或 props 来触发 重新渲染。

React 元素 不能包含 JavaScript 逻辑。对于复杂的 UI 或行为，应该使用 React 组件 来处理。

2 React 元素和 React 组件的区别

React 元素

React 元素 并不是直接渲染的 UI 元素，而是一个普通的 JavaScript 对象。把 React 元素看作一个 UI 组件的抽象描述，它没有具体的 DOM 元素功能，但描述了要渲染的内容，告诉 React “我想要显示什么样的界面”。React 会通过这些描述来创建实际的 DOM 元素并显示在浏览器中。

// React 元素示例
const element = <h1>Hello, world!</h1>; // 这是一个 React 元素，它描述了一个 <h1> 标签和文本内容 'Hello, world!'

console.log(element); 
// 输出（JavaScript 对象）：{type: 'h1', props: {children: 'Hello, world!'}}

element 变量是一个 React 元素，它包含一个 <h1> 标签和它的文本内容 "Hello, world!"；
这并不是一个 HTML 元素，而是一个 JavaScript 对象，描述了这个 <h1> 元素以及它的内容。

React 会将这个描述转化为实际的 DOM 元素并渲染到页面上。

React 组件

React 组件 是 定义 UI 和行为的函数（函数组件）或类（类组件）。React 元素是 React 组件的输出。你可以在 组件内部返回 React 元素，React 组件的实例 也是一个 React 元素。

// React 函数组件示例
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>; // 使用 props 来动态渲染内容
}

const element = <Greeting name="Alice" />;
console.log(element);
// 输出：<Greeting name="Alice" />

Greeting 是一个 函数式组件，，它接受 props 并 返回一个 React 元素（在此示例中是 <h1> 标签）；
element 变量存储的是 Greeting 组件的 一个实例，它被渲染时会显示内容：Hello, Alice!。

当我们写 <Greeting name="Alice" /> 时，React 会通过调用 Greeting 函数来得到一个 React 元素，该元素描述了要渲染的内容。

3. React 元素（JS对象） 和 React 组件（函数或类）

React 元素（JS对象） 和 React 组件（函数或类）