React组件设计模式：展示组件与容器组件分离（基于react-bits项目）-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00542/article/details/148375522

React组件设计模式：展示组件与容器组件分离（基于react-bits项目）

引言

在React应用开发中，组件设计模式的选择直接影响代码的可维护性和可扩展性。react-bits项目中提出的"展示组件与容器组件分离"模式，是一种被广泛认可的最佳实践。本文将深入解析这一模式的核心思想、实现方式以及实际应用场景。

传统组件设计的问题

让我们先看一个典型的时钟组件实现：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {time: this.props.time};
    this._update = this._updateTime.bind(this);
  }

  render() {
    var time = this._formatTime(this.state.time);
    return <h1>{ time.hours } : { time.minutes } : { time.seconds }</h1>;
  }
  
  // 其他生命周期方法和辅助方法...
}

这种实现方式存在几个明显问题：

数据逻辑与UI渲染耦合在一起
组件职责不单一，既处理业务逻辑又负责展示
难以复用相同的UI展示逻辑
测试时需要同时考虑业务逻辑和UI表现

解决方案：展示组件与容器组件分离

react-bits项目提出的解决方案是将组件拆分为两部分：

容器组件(Container Component)

容器组件是"聪明"的组件，它：

负责数据获取和状态管理
包含业务逻辑和数据处理
不关心具体的UI实现
通常使用高阶组件(HOC)模式实现

改造后的容器组件示例：

class ClockContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {time: props.time};
    this._update = this._updateTime.bind(this);
  }

  render() {
    return <Clock {...this._extract(this.state.time)} />;
  }

  _extract(time) {
    return {
      hours: time.getHours(),
      minutes: time.getMinutes(),
      seconds: time.getSeconds()
    };
  }
  
  // 其他数据相关方法...
}

展示组件(Presentational Component)

展示组件是"傻瓜"组件，它：

只关心UI如何呈现
不包含业务逻辑
通常是无状态函数组件
通过props接收所有数据

对应的展示组件实现：

function Clock({ hours, minutes, seconds }) {
  [hours, minutes, seconds] = [hours, minutes, seconds]
    .map(num => num < 10 ? '0' + num : num);

  return <h1>{ hours } : { minutes } : { seconds }</h1>;
}

模式优势分析

关注点分离：业务逻辑与UI渲染解耦
可复用性：同一个展示组件可以被不同容器组件复用
可维护性：修改业务逻辑不会影响UI，反之亦然
可测试性：可以单独测试业务逻辑和UI表现
灵活性：可以轻松切换不同的UI实现

进阶技巧：高阶容器组件

react-bits还展示了一种更灵活的实现方式，使用高阶函数生成容器组件：

export default function (Component) {
  return class Container extends React.Component {
    render() {
      return <Component {...this._extract(this.state.time)} />;
    }
    // 其他容器逻辑...
  }
}

这种方式允许我们：