参考资料：
React 中的五种组件形式
作者：scq000

无状态组件 （Stateless Component）

函数定义组件
节本组成结构： 属性(props) + return 函数。

const PureComponent = (props) => ( 
    <div> 
           // props.xxx 
    </div>
)

如果组件需要声明周期的hook函数，就需要使用 Class Component的写法。

有状态组件

如果组件自己维护一些状态（state）且 状态随着事件或者外部的消息而发生改变的时候，这个组件就是有状态组件（Stateful Component）。
有状态组件通常会带有生命周期（lifecycle），可以在不同的时刻触发状态的更新。

class StatefulComponent extends Component {

    state = {
        // 定义状态
   }

    componentWillMount() {
        //do something
    }

    componentDidMount() {
        //do something
    }
    ... //其他生命周期

    render() {
        return (
            //render
        );
    }
}

容器组件 ( Container Component )

前端通常都需要请求后端数据，并且也需要对数据进一步处理。
为了让组件的职责更加单一，引入容器组件（ Container Component ）的概念。
将数据获取和处理的逻辑放在容器组件中。

class ContainerComponent extends Component {
 state = {
   user: null,
  };

  componentDidMount() {
    this.setState({
        user: this.getUser()
    });
  }

 getUser() {
    axios.get(`/xxx/xxx`)...
  }


  render() {
      return (<UserInfo user={this.state.user}/>);
  }

}

高阶组件 （Higher-Order Component - HOC）（待理解）

返回组件的组件。更确切地说，它其实是一个会返回组件的函数。

做为一个高阶组件，可以在原有组件的基础上，对其增加新的功能和行为。我们一般希望编写的组件尽量纯净或者说其中的业务逻辑尽量单一。但是如果各种组件间又需要增加新功能，如打印日志，获取数据和校验数据等和展示无关的逻辑的时候，这些公共的代码就会被重复写很多遍。因此，我们可以抽象出一个高阶组件，用以给基础的组件增加这些功能，类似于插件的效果。
一个比较常见的例子是表单的校验。
不太理解这一块的代码

//检验规则，表格组件
const FormValidator = (WrappedComponent, validator, trigger) => {

   getTrigger(trigger, validator) {
      var originTrigger = this.props[trigger];

      return function(event) {
          //触发验证机制,更新状态
          // do something ...
          originTrigger(event);
      }
  }

  var newProps = {
    ...this.props,
    [trigger]:   this.getTrigger(trigger, validator) //触发时机,重新绑定原有触发机制
  };

  return <WrappedComponent  {...newProps} />
}

值得提一句，同样是给组件增加新功能的方法，相比于使用mixins这种方式高阶组件则更加简洁和职责更加单一。你如果使用过多个mixins的时候，状态污染就十分容易发生，以及你很难从组件的定义上看出隐含在mixins中的逻辑。而高阶组件的处理方式则更加容易维护。
？?什么是mixins？？

另一方面，ES7中新的语法Decorator(装饰器)也可以用来实现和上面写法一样的效果。

function LogDecorator(msg) {
  return (WrappedComponent) => {
    return class LogHoc extends Component {
      render() {
        // do something with this component
        console.log(msg);
        <WrappedComponent {...this.props} />
      }
    }
  }
}

@LogDecorator('hello world')
class HelloComponent extends Component {

  render() {
    //...
  }
}

Render Callback组件 （待理解）

还有一种组件模式是在组件中使用渲染回调的方式，将组件中的渲染逻辑委托给其子组件。就像这样：

import { Component } from "react";

class RenderCallbackCmp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "hello"
    };
  }

  render() {
    return this.props.children(this.state.msg);
  }
}

const ParentComponent = () =>
  (<RenderCallbackCmp>
    {msg =>
      //use the msg
      <div>
        {msg}
      </div>}
  </RenderCallbackCmp>);

父组件获取了内部的渲染逻辑，因此在需要控制渲染机制时可以使用这种组件形式。