状态组件和无状态组件

类是状态组件（statefull component）

函数是无状态组件(stateless component）

判断组件时状态组件还是无状态组件 

判断一个组件的类型，就是看：该组件是有状态，还是无状态。同样，如果使用一个组件，需要维护一个组件内部的状态，那么就选择有状态的组件类型；相反，如果不需要维护状态，就是无状态类型组件

什么叫状态（state）

状态是一个组件中的数据集合，当有状态的组件（stateful component）被加载到内存中时，这些数据也同时被保存在内存中。当渲染带状态的组件时，状态中数据可能会对该组件及其子组件产生影响。相对而言，如果是一个无状态组件，自己是没有数据，结果就是要么这个无状态组件就是纯粹的渲染 html 内容，不需要对数据进行判断和处理；要么这个组件所需要的数据，都是来自于上层结构（父组件传递下来的数据，或者 Redux 的 store 中的数据）。

因为这种数据从上下向下的流动，所以通常有状态组件会包含若干无状态组件。有状态组件就像一个容器，内部盛放着无状态组件：当无状态组件需要数据，都是从上层的有状态组件提供。

因此有状态组件（stateful component）通常被称为容器（container）或者容器组件，又因为有状态组件控制着无状态组件如何去渲染，逻辑如何变换，所以也被称为聪明组件（smart component）。相反，无状态组件（stateless component）因为不能控制自己的数据，数据都是外部获取，就像一个木偶被上层操控来作为一个表现层，所以被曾为变现性组件（presentational component），也被称为木偶组件，英文是"Dumb component"。

如何为组件增加状态

通常，函数（function）与类（class）最大的区别是：是否能够维护自己的数据（即状态）。函数基本上仅关注动作（action），而不关心数据的维护，不用维持一个状态，不用把自己的数据保存在内存中。函数使用的数据是从外部获取（或者不获取数据），函数运行时，会完成一系列的动作，最后将结果返回（也可能不返回，仅仅是完成指定的动作）。相对而言，类有能力维护状态（保存数据），也可以定义自己的一系列动作。

一般来说，函数的速度较快，适合用于做表现层，而类能够处理复杂逻辑和状态，适合做逻辑层和数据层。所以，对于 React 来说，一般选择函数来无状态组件，得到所谓的无状态函数（stateless function），好处是渲染的速度快，所以多使用无状态组件，尽量不要让数据散落在各个组件中。数据集中管理可以更好的保持数据的一致性和可维护性。

有状态组件就是使用类来生成。类可以有自己的状态，维护自己的数据，也是完全符合有状态组件的要求。但是类相对来说速度比函数慢，影响渲染的性能，同时数据过于分散会给后期的维护带来比较大的困难（这也是为什么状态过多时要使用 Redux 的原因），因此要尽量控制有状态组件的数量。当然，类也可以生成无状态组件，但是既然不需要维护状态的工作，用函数能完成得更好，其实也就没有必要使用类来做无状态组件。

什么时候使用有状态组件，什么时候使用无状态组件

如果想要存储一些数据并且想要对这些数据进行增删改查那么就应该使用有状态的组件，如果只是单纯的处理一些逻辑就是用无状态的组件，我们更多应该是使用的是无状态的组件（因为如果是一个有状态的组件的话那么他就一定会触发生命周期定义的一些函数，一旦触发这些函数就会影响当前项目的运行。所以在尽可能的情况下使用无状态的组件，除非你对当前的组件不是很清晰是否要存储数据，这个时候可能选择使用有状态的组件挥着确定要拥有一些状态去存储数据那么就需要使用有状态的组件）状态的东西都会通过父级去传递，比如Person、Header这些组件如果想用到数据的话我们可以通过传递的形式给它传递过去，即当前的数据能够进行统一的数据管理，比如说通过父级管理数据，其它组件如果想拥有这个组件的话可以通过值得形式给它。

区别

有状态（容器）                                                                                     无状态

可以拥有状态                                                                                        不可以拥有状态

拥有生命周期                                                                                        不拥有生命周期

通过this来接受状态和属性                                                                    可以通过属性实现数据传递

只有在需要管理状态，或者需要使用生命周期时使用                           其它时间用这种