5.3ReactComponent-React全家桶--前端开发与实例(上)

当前位置:　首页>> 技术小册>> React全家桶--前端开发与实例(上)

### 5.3 React Component：构建React应用的基石

在React的广阔世界里，组件（Component）是构建用户界面的基石。它们是React应用中最小的独立单元，负责封装UI的一部分，同时可以包含自己的状态（state）、属性（props）、生命周期方法等。本章节将深入探讨React组件的基本概念、分类、创建方式、状态与属性的使用、以及组件间的通信，帮助读者全面掌握React Component的核心知识。

#### 5.3.1 组件基础概念

React组件是函数或类，它们接受输入（称为“props”）并返回React元素作为输出。这些元素可以是DOM节点、其他组件或它们的组合。React组件的核心思想是将UI划分为独立的、可复用的部分，每个部分都是自包含的，只关注自己的逻辑和渲染。

- **函数组件**：使用JavaScript函数定义的组件。在React 16.8及以后的版本中，通过引入Hooks，函数组件也能拥有状态和其他React特性，从而更加灵活和强大。
- **类组件**：通过继承`React.Component`类创建的组件。类组件包含更多React特性，如状态（state）、生命周期方法等，但在最新的React版本中，官方推荐使用函数组件加Hooks的组合，因为这样的代码更简洁、易于理解和维护。

#### 5.3.2 创建React组件

##### 函数组件

函数组件是最简单的React组件形式。它们接收props作为参数，并返回JSX。这里是一个简单的函数组件示例：

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

在这个例子中，`Welcome`是一个函数组件，它接收一个名为`props`的对象作为参数，该对象包含传递给组件的所有属性。然后，它返回一个JSX元素，即一个`h1`标签，其中包含了一个通过`props.name`动态插入的问候语。

##### 类组件

虽然类组件的使用在减少，但了解它们仍然是有价值的。下面是一个类组件的示例：

```jsx
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
```

在类组件中，我们通过`this.props`来访问传递给组件的属性。`render`方法是类组件中唯一必须实现的方法，它负责返回组件的JSX。

#### 5.3.3 状态（State）与属性（Props）

- **属性（Props）**：属性是父组件传递给子组件的数据。它们是只读的，并且组件不能修改传递给它的props。props主要用于父子组件之间的通信。

- **状态（State）**：状态是组件内部维护的数据，它决定了组件的渲染输出。与props不同，组件可以自由修改自己的状态。状态的更新会导致组件的重新渲染。

在类组件中，状态通过`this.state`来访问和修改。而在函数组件中，由于它们本身不支持状态，我们通常会使用Hooks（如`useState`）来添加状态。

#### 5.3.4 组件间的通信

React组件间的通信是构建复杂应用的关键。常见的通信方式包括：

- **父组件向子组件通信**：通过props传递数据。
- **子组件向父组件通信**：通过回调函数（作为props传递）来实现。子组件可以调用这个回调函数，并传递数据作为参数，父组件在回调函数中处理这些数据。
- **兄弟组件间的通信**：通常通过共同的父组件来间接通信。兄弟组件之一可以通知父组件更新状态，父组件再将新的状态通过props传递给另一个兄弟组件。
- **使用Context API**：对于跨多层组件的通信，React提供了Context API，允许你在组件树之间传递数据而无需手动地将props通过每个层级的组件传递下去。

#### 5.3.5 组件的生命周期

在类组件中，组件的生命周期指的是组件从创建到销毁的整个过程。React为这个过程提供了一系列的生命周期方法，允许你在特定的时刻执行代码，如组件挂载、更新、卸载等。然而，随着Hooks的引入，函数组件现在也能使用Hooks来模拟生命周期行为（如`useEffect`用于模拟`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`）。

- **挂载（Mounting）**：当组件被实例化和插入到DOM中时，会依次调用`constructor`、`getDerivedStateFromProps`、`render`和`componentDidMount`。
- **更新（Updating）**：当组件的props或state发生变化时，组件会重新渲染。此时会调用`getDerivedStateFromProps`、`shouldComponentUpdate`、`render`和`componentDidUpdate`（如果组件被更新）。
- **卸载（Unmounting）**：当组件从DOM中移除时，会调用`componentWillUnmount`。这是执行清理工作的好地方，比如取消网络请求、移除定时器等。

#### 5.3.6 组件性能优化

随着应用的增长，组件的性能优化变得尤为重要。React提供了一些工具和技术来帮助我们优化组件的性能：

- **避免不必要的渲染**：使用`React.memo`或`shouldComponentUpdate`（类组件）来阻止不必要的组件渲染。
- **使用PureComponent**：`React.PureComponent`是一个对props进行浅比较的类组件，如果props没有变化，则不会重新渲染。但请注意，对于深层嵌套的props或包含复杂数据结构的props，`PureComponent`可能无法正确工作。
- **使用Fragment和Keys**：在渲染列表或集合时，使用`<React.Fragment>`来避免不必要的DOM节点，同时确保每个列表项都有一个唯一的key属性，以提高渲染性能。
- **代码分割（Code Splitting）**：通过动态导入（`import()`）将应用拆分成多个小的代码块，以实现按需加载，从而加快应用的初始加载时间。

#### 结语

React Component是构建React应用的基石。掌握组件的基本概念、分类、创建方式、状态与属性的使用以及组件间的通信，对于开发高效、可维护的React应用至关重要。此外，了解组件的生命周期和性能优化技巧，也是提升React应用性能的关键。希望本章节的内容能为读者在React的学习之路上提供坚实的基础。

该分类下的相关小册推荐：

React全家桶--前端开发与实例(下)

深入学习React实战进阶

ReactJS面试指南

剑指Reactjs

React 进阶实践指南