React的无状态和有状态组件

众所周知，React是一个专注于View层的前端框架，组件也】是React核心理念之一，一个完整的应用将由一个个独立的组件拼装而成，组件也是React最基础的一部分，学习React就需要先学习组件。

React中创建组件的方式

在了解React中的无状态和有状态的组件之前，先来了解在React中创建组件的三种方式：

• ES5写法：React.createClass；

• ES6写法：React.Component；

• 无状态的函数写法，又称为纯组件SFC。

React.createClass

React.createClass是React刚开始推荐的创建组件的方式。这是ES5的原生的JavaScript来实现的React组件。React.createClass这个方法构建一个组件“类”，它接受一个对象为参数，对象中必须声明一个render()方法，render()方法将返回一个组件实例。例如：

React.createClass是用来创建有状态的组件，这些组件在使用时是要被实例化的，并且可以访问组件的生命周期方法。不过React.createClass创建React组件有其自身的问题存在：

• React.createClass会自动绑定函数方法，导致不必要的性能开销，增加代发过时的可能性；

• React.createClass的mixins不够自然、直观，易读性差。

React.Component

React.Component是以ES6的形式来创建React组件，也是现在React官方推荐的创建组件的方式，其和React.createClass创建的组件一样，也是创建有状态的组件。React.Component正在逐渐取代React.createClass，上面的例子使用React.Component实现如下。

相比React.createClass方式，React.Component带来了诸多语法上的改进

import

ES6使用import方式替代ES5的require方式来导入模块，其中import { }可以直接从模块中导入变量名，此种写法更加简洁直观。

初始化 state

在ES6的语法规则中，React的组件使用的类继承的方式来实现，去掉了ES5的getInitialState的hook函数，state的初始化则放在constructor构造函数中声明。

this绑定

React.Component创建组件时，事件函数并不会自动绑定this，需要我们手动绑定，不然this将不会指向当前组件的实例对象。 
以下有三种绑定this的方法： 
1，在constructor中使用bind()进行硬绑定。

直接在元素上使用bind()绑定。

ES6 有个很有用的语法糖：Arrow Function（箭头函数）它可以很方便的使this直接指向class SwitchButton。

无状态组件

无状态的函数创建的组件是无状态组件，它是一种只负责展示的纯组件，它的特点是不需要管理状态state，数据直接通过props传入，这也符合 React 单向数据流的思想。例如：

对于这种无状态的组件，使用函数式的方式声明，会使得代码的可读性更好，并能大大减少代码量，箭头函数则是函数式写法的最佳搭档。

上面定义的 Todo 组件，输入输出数据完全由props决定，而且不会产生任何副作用，对于props为 Object 类型时，还可以使用 ES6 的解构赋值。

无状态组件一般会搭配高阶组件（简称：HOC）一起使用，高阶组件用来托管state，Redux 框架就是通过 store 管理数据源和所有状态，其中所有负责展示的组件都使用无状态函数式的写法。

无状态组件内部其实是可以使用ref功能的，虽然不能通过this.refs访问到，但是可以通过将ref内容保存到无状态组件内部的一个本地变量中获取到。例如，下面这段代码可以使用ref来获取组件挂载到DOM中后所指向的DOM元素:

无状态组件 vs 有状态组件

无状态组件：无状态组件(Stateless Component)是最基础的组件形式，由于没有状态的影响所以就是纯静态展示的作用。一般来说，各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性（props）加上一个渲染函数（render）。由于不涉及到状态的更新，所以这种组件的复用性也最强。

有状态组件：在无状态组件的基础上，如果组件内部包含状态（state）且状态随着事件或者外部的消息而发生改变的时候，这就构成了有状态组件（Stateful Component）。有状态组件通常会带有生命周期(lifecycle)，用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的，根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同。

在React中，我们通常通过props和state来处理两种类型的数据。props是只读的，只能由父组件设置。state在组件内定义，在组件的生命周期中可以更改。基本上，无状态组件（也称为哑组件）使用props来存储数据，而有状态组件（也称为智能组件）使用state来存储数据。

总的来说：无状态函数式写法 优于React.createClass，而React.Component优于React.createClass。能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

本文转载自异步社区

原文链接：https://www.epubit.com/articleDetails?id=N282b4b24-457b-4844-9e40-399a826752db