React设计模式：容器组件与展示组件分离实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00255/article/details/148392022

React设计模式：容器组件与展示组件分离实践

react-in-patterns A free book that talks about design patterns/techniques used while developing with React. 项目地址: https://gitcode.com/gh_mirrors/re/react-in-patterns

在React应用开发中，组件设计是一个核心话题。随着应用规模的增长，如何合理组织组件结构成为开发者面临的重要挑战。本文将深入探讨React中容器组件(Container Components)与展示组件(Presentational Components)的分离模式，这种模式能显著提升代码的可维护性和复用性。

什么是容器组件与展示组件

容器组件和展示组件是React中一种常见的组件分类方式：

容器组件：负责处理业务逻辑、数据获取和状态管理，通常包含生命周期方法和状态
展示组件：专注于UI呈现，接收props并渲染界面，通常是无状态函数组件

这种分离遵循了"关注点分离"原则，使组件各司其职，更易于理解和维护。

案例分析：时钟组件

让我们通过一个时钟组件的例子来理解这种模式。初始实现如下：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: this.props.time };
    this._update = this._updateTime.bind(this);
  }
  
  render() {
    const time = this._formatTime(this.state.time);
    return (
      <h1>
        { time.hours } : { time.minutes } : { time.seconds }
      </h1>
    );
  }
  
  componentDidMount() {
    this._interval = setInterval(this._update, 1000);
  }
  
  componentWillUnmount() {
    clearInterval(this._interval);
  }
  
  _formatTime(time) {
    var [ hours, minutes, seconds ] = [
      time.getHours(),
      time.getMinutes(),
      time.getSeconds()
    ].map(num => num < 10 ? '0' + num : num);

    return { hours, minutes, seconds };
  }
  
  _updateTime() {
    this.setState({
      time: new Date(this.state.time.getTime() + 1000)
    });
  }
};

这个组件虽然能工作，但存在几个问题：

同时处理业务逻辑(时间更新)和UI呈现
时间格式化函数既处理数据提取又处理显示格式
状态管理完全内部化，难以与其他组件共享

重构为容器+展示组件

容器组件实现

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) }/>;
  }
  
  componentDidMount() {
    this._interval = setInterval(this._update, 1000);
  }
  
  componentWillUnmount() {
    clearInterval(this._interval);
  }
  
  _extract(time) {
    return {
      hours: time.getHours(),
      minutes: time.getMinutes(),
      seconds: time.getSeconds()
    };
  }
  
  _updateTime() {
    this.setState({
      time: new Date(this.state.time.getTime() + 1000)
    });
  }
};

容器组件负责：

管理时间状态
设置定时器更新状态
从Date对象提取时间数据
将处理后的数据传递给展示组件

展示组件实现

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

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

展示组件仅负责：