React展示组件和容器组件模式的理解

前端

2024-01-27 18:20:34

在编写React应用时，有一个简单的模式我觉得非常有用。如果你已经做了一段时间的React，你可能已经发现了它。

在React组件中，展示组件和容器组件是两个常见的组件类型。展示组件负责渲染UI，而容器组件负责业务逻辑和状态管理。这种分离可以帮助我们更轻松地构建和维护我们的React应用。

展示组件

展示组件是React组件的一个子集，它们只负责渲染UI。它们不包含任何业务逻辑或状态管理。这使得它们非常易于测试和维护。

展示组件通常使用函数式组件来编写。函数式组件只接受props作为参数，并返回一个React元素。这使得它们非常易于阅读和理解。

容器组件

容器组件是React组件的另一种类型，它们负责业务逻辑和状态管理。它们通常使用类组件来编写。类组件具有状态和生命周期方法，这使得它们可以管理复杂的状态和业务逻辑。

容器组件通常负责以下任务：

管理组件的状态
处理用户交互
与API交互
路由

展示组件和容器组件分离的好处

展示组件和容器组件分离有许多好处，包括：

代码的可复用性： 展示组件可以很容易地被复用在不同的容器组件中。这使得我们可以在不同的上下文中使用相同的UI组件。
代码的可测试性： 展示组件非常易于测试，因为它们只负责渲染UI。这使得我们可以在编写单元测试时专注于业务逻辑。
代码的可维护性： 展示组件和容器组件分离可以帮助我们更轻松地维护我们的React应用。当我们需要更改UI时，我们只需要更改展示组件。当我们需要更改业务逻辑时，我们只需要更改容器组件。

如何将展示组件和容器组件分离应用于React应用

将展示组件和容器组件分离应用于React应用非常简单。我们可以按照以下步骤进行：

首先，我们需要创建一个展示组件。展示组件只负责渲染UI。
然后，我们需要创建一个容器组件。容器组件负责业务逻辑和状态管理。
最后，我们需要将展示组件作为props传递给容器组件。

下面是一个示例：

// 展示组件
const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.body}</p>
    </div>
  );
};

// 容器组件
class MyContainerComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: 'My Title',
      body: 'My Body'
    };
  }

  render() {
    return (
      <MyComponent
        title={this.state.title}
        body={this.state.body}
      />
    );
  }
}

// 渲染容器组件
ReactDOM.render(
  <MyContainerComponent />,
  document.getElementById('root')
);