在 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'}
。