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

QLQ 发布于2019-08-20 10:50 / 3200人阅读

摘要：的绑定库包含了容器组件和展示组件相分离的开发思想。明智的做法是只在最顶层组件如路由操作里使用。其余内部组件仅仅是展示性的，所有数据都通过传入。

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  {this.state.comments.map(renderComment)} ;
  }
  renderComment({body, author}) {
    return {body}—{author};
  }
}

可用性：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.js
class CommentList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() { 
    return  {this.props.comments.map(renderComment)} ;
  }
  renderComment({body, author}) {
    return {body}—{author};
  }
}

这样就做到了数据提取和渲染分离，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

迫使你分离标签，达到更高的可用性

容器云存储计算分离-计算组件组件和组件通信 c 组件和服务器排序组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80349.html

前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
React组件拆分之道

摘要：划分标准根据稿，不同的展示模块分为不同的组件。比如顶部底部导航列表等容器组件业务组件与数据源后台本地存储进行数据传输操作不止是划分标准根据业务功能划分。最常见的是列表组件。为什么要拆分组件提高可读性、可维护性如果不拆分代码量大，所有内容集中在一起相同组件无法复用业务开发分工不明确，开发人员要关心非业务的代码改代码时，可能会影响其他业务，牵一发动全身(耦合) 任何一个操作...

terasum 2019-08-23 18:23 评论0 收藏0
React与Redux整合技术简介

摘要：展示组件与容器组件的绑定库的基本开发思想是展示组件与容器组件相分离。技术上讲，容器组件就是使用从树中读取部分数据，并通过来把这些数据提供给要渲染的组件。说明：阅读本篇文章需要对Redux有一定的了解，对Redux不了解的同学可先看看这篇文章Redux技术架构简介（一） 1. React中引入react-redux 为了让Redux和React更好的配合，Facebook专门开发了一个...

idealcn 2019-08-22 17:20 评论0 收藏0
页面搭建工具总结及架构思考

摘要：在初步完成了在线流程图编辑工具之后又接到了在线搭建页面工具的需求刚开始其实并不想接项目因为从历史以及现实原因来看个性化及动态渲染都是很难解决的痛点各种页面搭建工具的不温不火早已说明了这条路并没有这么好走但从另一个方面来说既然有了这样的需求那在初步完成了在线流程图编辑工具之后,又接到了在线搭建页面工具的需求,刚开始其实并不想接项目,因为从历史以及现实原因来看,个性化及动态渲染都是很难解决的痛...

William_Sang 2019-04-23 11:57 评论0 收藏0
翻译 | React AJAX最佳实践

摘要：作者沪江前端开发工程师本文原创翻译，有不当的地方欢迎指出。管理数据，而提供服务器上的数据，因此应用于处理网络请求。结论使用建立的应用都是模块化的会成为其中一个模块，库是另一个模块。原文原创新书移动前端高效开发实战已在亚马逊京东当当开售。作者：Oral （沪江Web前端开发工程师）本文原创翻译，有不当的地方欢迎指出。转载请指明出处。当你问起有关AJAX与React时，老司机们首先就会...

DirtyMind 2019-08-20 19:07 评论0 收藏0