React 深入系列2：组件分类

fizz 发布于2019-08-22 17:26 / 2776人阅读

摘要：无状态组件和有状态组件无状态组件和有状态组件，划分依据是根据组件内部是否维护。展示型组件和容器型组件展示型组件和容器型组件，划分依据是根据组件的职责。

React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。

React 组件有很多种分类方式，常见的分类方式有函数组件和类组件，无状态组件和有状态组件，展示型组件和容器型组件。好吧，这又是一篇咬文嚼字的文章。但是，真正把这几组概念咬清楚、嚼明白后，对于页面的组件划分、组件之间的解耦是大有裨益的。

函数组件和类组件

函数组件(Functional Component )和类组件(Class Component)，划分依据是根据组件的定义方式。函数组件使用函数定义组件，类组件使用ES6 class定义组件。下面是函数组件和类组件的简单示例：

// 函数组件
function Welcome(props) {
  return Hello, {props.name};
}

// 类组件
class Welcome extends React.Component {
  render() {
    return Hello, {this.props.name};
  }
}

上面的两种写法是等价的，但函数组件的写法要比类组件简洁，不过类组件比函数组件功能更加强大。类组件可以维护自身的状态变量，即组件的state，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。

类组件有这么多优点，是不是我们在开发中应该首选使用类组件呢？其实不然。函数组件更加专注和单一，承担的职责也更加清晰，它只是一个返回React 元素的函数，只关注对应UI的展现。函数组件接收外部传入的props，返回对应UI的DOM描述，仅此而已。当然，如上面例子所示，使用只包含一个render方法的类组件，可以实现和函数组件相同的效果。但函数组件的使用可以从思想上迫使你在设计组件时多做思考，更加关注逻辑和显示的分离，设计出更加合理的页面上组件树的结构。实际操作上，当一个组件不需要管理自身状态时，可以把它设计成函数组件，当你有足够的理由发现它需要“升级”为类组件时，再把它改造为类组件。因为函数组件“升级”为类组件是有一定成本的，这样就会要求你做这个改造前更认真地思考其合理性，而不是仅仅为了一时的方便就使用类组件。

无状态组件和有状态组件

无状态组件(Stateless Component )和有状态组件(Stateful Component)，划分依据是根据组件内部是否维护state。无状态组件内部不使用state，只根据外部组件传入的props返回待渲染的React 元素。有状态组件内部使用state，维护自身状态的变化，有状态组件根据外部组件传入的props和自身的state，共同决定最终返回的React 元素。

很容易知道，函数组件一定是无状态组件，类组件则既可以充当无状态组件，也可以充当有状态组件。但如上文所述，当一个组件不需要管理自身状态时，也就是无状态组件，应该优先设计为函数组件。

展示型组件和容器型组件

展示型组件(Presentational Component)和容器型组件(Container Component)，划分依据是根据组件的职责。

展示型组件的职责是：组件UI长成什么样。展示型组件不关心组件使用的数据是如何获取的，以及组件数据应该如何修改，它只需要知道有了这些数据后，组件UI是什么样子的即可。外部组件通过props传递给展示型组件所需的数据和修改这些数据的回调函数，展示型组件只是它们的使用者。展示型组件一般是无状态组件，不需要state，因为展示型组件不需要管理数据，但当展示型组件需要管理自身的UI状态时，例如控制组件内部弹框的显示与隐藏，是可以使用state的，这时的state属于UI state。既然大部分情况下展示型组件不需要state，应该优先考虑使用函数组件实现展示型组件。

容器型组件的职责是：组件数据如何工作。容器型组件需要知道如何获取子组件所需数据，以及这些数据的处理逻辑，并把数据和逻辑通过props提供给子组件使用。容器型组件一般是有状态组件，因为它们需要管理页面所需数据。

例如，下面的例子中，UserListContainer是一个容器型组件，它获取用户列表数据，然后把用户列表数据传递给展示型组件UserList，由UserList负责UI的展现。

class UserListContainer extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      users: []
    }
  }
  
  componentDidMount() {
    var that = this;
    fetch("/path/to/user-api").then(function(response) {
      response.json().then(function(data) {
        that.setState({users: data})
      });
    });
  }

  render() {
    return (
      
    )
  }
}

function UserList(props) {
  return (
    
      
        {props.users.map(function(user) {
          return (
            
              {user.name}
            
          );
        })}
      
    
  )  
}

展示型组件和容器型组件是可以互相嵌套的，展示型组件的子组件既可以包含展示型组件，也可以包含容器型组件，容器型组件也是如此。例如，当一个容器型组件承担的数据管理工作过于复杂时，可以在它的子组件中定义新的容器型组件，由新组件分担数据的管理。展示型组件和容器型组件的划分完全取决于组件所做的事情。

总结

通过上面的介绍，可以发现这三组概念有很多重叠部分。这三组概念都体现了关注点分离的思想：UI展现和数据逻辑的分离。函数组件、无状态组件和展示型组件主要关注UI展现，类组件、有状态组件和容器型组件主要关注数据逻辑。但由于它们的划分依据不同，它们并非完全等价的概念。它们之间的关联关系可以归纳为：函数组件一定是无状态组件，展示型组件一般是无状态组件；类组件既可以是有状态组件，又可以是无状态组件，容器型组件一般是有状态组件。

下篇预告：

React 深入系列3：State 和 Props

我的新书《React进阶之路》已上市，请大家多多支持！
链接：京东当当

云服务器 GPU云服务器深入理解系列 javascript深入系列 ecs系列2 react

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

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

React 深入系列２：组件分类

摘要：无状态组件和有状态组件无状态组件和有状态组件，划分依据是根据组件内部是否维护。展示型组件和容器型组件展示型组件和容器型组件，划分依据是根据组件的职责。文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 React 深入系列2：组件分类 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使...

Karrdy 2019-08-22 16:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0
React 深入系列7：React 常用模式

摘要：本篇是深入系列的最后一篇，将介绍开发应用时，经常用到的模式，这些模式并非都有官方名称，所以有些模式的命名并不一定准确，请读者主要关注模式的内容。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。本篇是React深入系列的最后一篇，将介绍开发React应用时，经常用到的模式，这些模式并非都有...

Chao 2019-08-22 17:28 评论0 收藏0