在 React中元素（ element）和组件（ component）有什么区别？

React面试题 5月前 0 212

在 React 中，元素和组件是两个非常重要的概念，它们之间有一些明显的区别：

元素（Element）：React 元素是描述屏幕上应该显示什么的对象。它们是不可变的，并且一旦被创建就不能更改。React 元素是纯对象，它们是便宜的，并且React DOM 使用它们来更新 DOM。你可以把它们看作为 DOM 节点或者其他组件的描述。例如，<div /> 和 <MyComponent /> 都是 React 元素。
组件（Component）：React 组件是可以接收输入并返回 React 元素的函数或类。组件可以有状态（通过 this.state 或者 useState hook），也可以没有状态。组件可以复用和组合，你可以在一个组件中包含其他组件。组件名必须以大写字母开头。

这是一个简单的例子来说明这两者的区别：

// 这是一个组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 这是一个元素，它代表了一个组件的实例
const element = <Welcome name="Sara" />;

在这个例子中，Welcome 是一个组件，它接收 props 作为输入并返回一个 React 元素。element 是一个元素，它代表了 Welcome 组件的一个实例，带有 props {name: 'Sara'}。