React.js: Container vs Presentational Components

React.js

實作元件時,決定要做成 Container Components 或 Presentational Components 的主要因素是 是否需要存取資料

Container Components

範例

這個元件 Article 是用來檢視一篇文章,並可刪除這篇文章。

class Article extends Component {
  constructor(props) {
    super(props);

    this.state = { status: 'active' }; // 擁有內部狀態
  }

  componentDidMount() {
    // 擁有 Lifecycle Hooks
    const { id } = this.props.match.params;
    this.props.fetchPost(id); // 發送 Action
  }

  onDeleteClick() {
    const { id } = this.props.match.params;

    this.setState({ status: 'deleting' });

    this.props.deletePost(id, () => {
      // 發送 Action
      this.props.history.push('/'); // 提供 Callback
      this.setState({ status: 'deleted' });
    });
  }

  // 提供資料、包裝子元件
  render() {
    return (
      <div>
        <button onClick={this.onDeleteClick.bind(this)}>Delete Post</button>
        <ArticleDetail post={this.props.post} />
      </div>
    );
  }
}

Presentational Components

範例

這個元件 ArticleDetail 從父層 props 得到 post,接著輸出一段 HTML,內含剛剛從 post 內得到的標題、分類和內容。

const ArticleDetail = ({ post }) => {
  return (
    <div>
      <h3>{post.title}</h3>
      <h6>Categories: {post.categories}</h6>
      <p>{post.content}</p>
    </div>
  );
};

區分為 Container 和 Presentational Components 的優點

建立元件時首選 Presentational Components,之後若有其他需求再重構成 Container Components 即可,這樣會比較簡單乾淨。

References


react.js