函数式组件

React函数式组件使用函数声明一个组件，而不是类，现在我们用函数式组件写一个HelloReact组件

点击查看【codepen】

其中函数式组件接收一个参数props，通我们在类组件中介绍的props相同。函数式组件与类组件不同的是，函数式组件没有state和生命周期函数，所以函数式组件又被称为无状态组件，从某种意义上说类组件具有更加强大的功能。

为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。其官方指出：在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等；这种通过多个简单然后合并成一个大应用的设计模式被提倡。

无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：

  1. 组件不会被实例化，整体渲染性能得到提升

因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。

  1. 组件不能访问this对象

无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件

  1. 组件无法访问生命周期的方法

因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。

  1. 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件。

组件分类

组件按写法分可以分为类组件和函数式组件，在上面已经详细介绍过。按照组件有无状态又可以将组价分为有状态组件和无状态组件。按照组件的功能分又可以将组件分为容器组件和展示组件，又或者称为Smart组件和Dumb组件。这里主要介绍容器组件和展示组件。

展示组件：

  • 只关注看起来怎么样
  • 内部可能包含有展示组件或容器组件，并且通常有DOM标签和样式
  • 不用指明数据是如何加载或者变化的
  • 只通过props接收数据和回调函数
  • 一般写为函数式组件，除非它们需要状态、生命周期函数或者性能优化

容器组件：

  • 只关注如何工作的
  • 内部也许包含展示组件或容器组件，但一般不会有DOM标签除非一个包装的div，不可能会有样式
  • 为展示组件或其他容器组件提供数据和回调函数
  • 一般是有状态的，被认为是数据源
  • 一般是从高阶组件生成的

通过将组件分为这两种，可以有以下优点：

  • 关注点更好的分离
  • 更好的复用性