组件

组件允许将 UI 拆分成独立可复用的片段，每个片段独立进行构建并独立完成相关功能。在 React 中，组件的概念类似于 JavaScript 中的函数，可以接受任意的入参（props），并返回用于描述 UI 内容的 React 元素。React 中的组件都是不可变的，组件一旦被创建，其属性和子元素就不能再发生任何变化，要理解 React 组件的这个特性，可以将其理解为 UI 界面在每一特定时刻的状态，如果 UI 要发生任何变化，那么就将是下一个时刻的状态了，而且在这个新的时刻，组件也将通过重新创建的方法更新。但是对于整个页面 DOM 来说，React 将只更新发生了改变的那些组件。

在 React 中定义组件有两种方法：使用函数定义组件和使用 ES6 中的class定义组件。但是在目前比较新的 React 版本中，使用 ES6 中的class来定义类组件已经不再推荐了，使用函数来定义组件会使得组建的定义更加轻量、灵活。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

以上两个组件的定义示例是等效的。在 16.8.0 Hook 概念出现之前，使用class来定义 React 组件是一个比较通用的方法，在 Hook 概念出现之后，使用函数来定义组件变得更加简单，代码也被大大简化。所以如果使用 16.8.0 以上的 React 版本，推荐考虑使用函数来定义组件。

在 React 项目中，组件在使用时必须在作用域中存在。通常一个 JSX 文件中定义一个组件，在其他的组件中使用这个组件时，需要先使用import或者require将其引入自己的作用域。

组件树

一个 React 项目在正常运行的时候，其中的组件会像 HTML DOM 一样组成一个树形结构。所以在设计和实现项目中的组件的时候，也一样需要考虑到组件在这个树形结构中可能存在的位置，以及其可能处于的上下文。在 React 项目中，组件树中的每一个节点就是一个组件，组件树的根就是最开始的App，是 React 渲染的第一个组件。