Containers vs Presentational Components

2024-01-08 15:49:01

容器和展示组件：解锁可重用、可测试和可理解的 React 应用程序

在构建 React 应用程序时，我发现了一种巧妙的开发范式，它可以简化代码并提升应用程序的质量。它将组件划分为两个互补的类别：容器组件和展示组件。本文将深入探讨这些组件，重点介绍它们的职责、优点，并通过一个示例来说明它们如何协同工作。

容器组件：业务逻辑中心

容器组件是负责业务逻辑的中心。它们负责与 Redux（一个状态管理库）进行交互，从存储中获取数据、创建操作并分发它们。容器组件的核心职责是管理数据流，但它们与界面的外观无关。换句话说，它们注重幕后的功能，而不过分关注视觉呈现。

展示组件：UI 呈现大师

与容器组件形成鲜明对比的是展示组件，它们是 UI 呈现的大师。它们从容器组件接收数据并负责渲染用户界面。展示组件不关心数据是如何获取或处理的，它们只关注如何美观、有效地呈现它。这样，UI 逻辑与业务逻辑保持分离，确保代码的可维护性和灵活性。

为何将组件拆分为容器和展示组件？

将组件拆分为容器和展示组件具有多重优势，使 React 开发变得更加高效和可管理：

可重用性： 展示组件与业务逻辑无关，因此可以轻松地在不同的容器组件中重复使用。这可以节省大量的开发时间和精力，因为相同的 UI 组件可以用于不同的用途。
可测试性： 拆分组件提高了测试的便利性。容器组件可以专注于测试业务逻辑，而展示组件可以针对 UI 行为进行测试。这种分离使测试过程更加高效和准确。
可理解性： 清晰地将组件划分为容器和展示组件有助于增强代码的可理解性。它提供了清晰的职责分离，使开发人员可以轻松地识别每个组件的作用和范围。

一个代码示例

为了更好地理解容器和展示组件是如何协同工作的，让我们考虑一个示例。假设我们有一个应用程序，它显示博客文章的列表。我们可以创建一个容器组件来管理文章数据，然后将它传递给展示组件来渲染列表：

ContainerComponent.js

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchArticles } from '../actions/articleActions';

const ContainerComponent = () => {
  const dispatch = useDispatch();
  const articles = useSelector(state => state.articles);

  useEffect(() => {
    dispatch(fetchArticles());
  }, [dispatch]);

  return (
    <DisplayComponent articles={articles} />
  );
};

export default ContainerComponent;

DisplayComponent.js

import React from 'react';

const DisplayComponent = ({ articles }) => {
  return (
    <ul>
      {articles.map((article) => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  );
};

export default DisplayComponent;