React 之容器组件和展现组件相分离解密

2024年2月10日 116次阅读 来源: Siyi厶弋

Redux 的 React 绑定库包括了 容器组件和展现组件相星散 的开辟头脑。明智的做法是只在最顶层组件（如路由操纵）里运用 Redux。其他内部组件仅仅是展现性的，一切数据都经由过程 props 传入。

那末为何须要容器组件和展现组件相星散呢？

这里有个基本原则：容器组件仅仅做数据提取，然后衬着对应的子组件，记着这个点，Trust me！

看下面这个展现列表的例子，不辨别容器和展现组件的状况

// CommentList.js
class CommentList extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
    return <ul> {this.state.comments.map(renderComment)} </ul>;
  }
  renderComment({body, author}) {
    return <li>{body}—{author}</li>;
  }
}

  • 可用性：CommentList不能够复用

  • 数据结构：组件应当对所须要的数据有所预期，但这里实在没有，PropTypes能够很好的做到这一点

那末来看下星散的状况：

// CommentListContainer.js
class CommentListContainer extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
    return <CommentList comments={this.state.comments} />;
  }
}


// CommentList.js
class CommentList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() { 
    return <ul> {this.props.comments.map(renderComment)} </ul>;
  }
  renderComment({body, author}) {
    return <li>{body}—{author}</li>;
  }
}

如许就做到了数据提取和衬着星散，CommentList能够复用，CommentList能够设置PropTypes推断数据的可用性

来看下容器组件和展现组件的区分:

展现组件容器组件
关注事物的展现关注事物怎样事情
能够包括展现和容器组件，而且平常会有DOM标签和css款式能够包括展现和容器组件，而且不会有DOM标签和css款式
经常许可经由过程this.props.children通报供应数据和行动给容器组件或许展现组件
对第三方没有任何依靠，比方store 或许 flux action挪用flux action 而且供应他们的回调给展现组件
不要指定数据怎样加载和变化作为数据源，一般采纳较高阶的组件，而不是本身写，比方React Redux的connect(), Relay的createContainer(), Flux Utils的Container.create()
仅经由过程属性猎取数据和回调
很少有本身的状况，纵然有，也是本身的UI状况
除非他们须要的本身的状况，生命周期，或机能优化才会被写为功用组件

上风：

  • 展现和容器更好的星散，更好的明白应用程序和UI

  • 重用性高，展现组件能够用于多个差别的state数据源

  • 展现组件就是你的调色板，能够把他们放到零丁的页面，在不影响应用程序的状况下，让设计师调解UI

  • 迫使你星散标签，到达更高的可用性

    原文作者：Siyi厶弋
    原文地址: https://segmentfault.com/a/1190000006845396
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞