缘由：写这篇文章重假如为了加强自身的影象，同时也是为了分享一下我们经常运用的建立组建的要领，重假如四种(createClass, component, PureComponet,Stateless Functional Component)，启示来自于不知的博客呀，有兴致的人可以去看看他的博客！

叙说： 我们在用react的时刻斟酌最多的实在就是怎样谋划组建的分别，组建的嵌套，可以做到更省时、省力。做过了一个react的项目，如今依旧在继续，一上来我们就运用了es6的语法堂，用component来，细致看过官方文档后，发明不必es6语法的同时只能运用createClass。在写组建的同时我们也都邑说到这两个词语，状况组建和pure组建（纯函数）。本日就来也许引见一下各自的特性：

一、createClass

var React = require("react");
var FirstComponent = React.createClass({
  propTypes: {
    name: React.PropTypes.string 
    //属性校验 (string, number, bool, func, array, object...... )
  },
  
  getDefaultProps: function() {
    return {
      name: 'Mary' 
    };
    // 初始化props
  }, 
    
  getInitialState: function() {
    return {count: this.props.initialCount}; 
    //初始化props
  },
  
  handleClick: function() {
    //.....
  },
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});
module.exports = FirstComponent;

这类体式格局下，组件的props、state等都是以对象object属性的体式格局组合在一起，在createClass中，React对属性中的一切函数都举行了this绑定，也就是如上面的hanleClick实在相当于handleClick.bind(this) 。

二、component es6语法堂

import React from 'react';
class FirstComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
       count: props.initialCount
    };
  }
  static propTypes ＝ {
    name: React.PropTypes.string
  }
  statice props = {
    name: 'Mary'
  }
  handleClick() {
    //点击事宜的处置惩罚函数
  }
  
  render() {
    return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;
  }
}
export default FirstComponent;

这段代码指定了FirstComponent继续extends React.Component的属性，经由过程constructor来构函数，初始化state，this的绑定也在这内里举行，由于这类体式格局react并没有对this举行绑定，一切须要手动输入绑定。这类要领建立组建由于继续了component的属性，因而这内里可以写react的一切性命周期函数,比方componentDidMount等系列，并在函数内容经由过程this.state来转变状况state，dom就会随即革新，也可以手动静止更新，细致的细节是在某个性命周期中举行，细致的可以看看我的这篇文章

三、PureComponet

上面的要领中都不是纯函数的组织，由于state是可以在内容起到作用的，内容就可以掌握是不是从新衬着状况。
而这类要领我也很罕用过，看过许多文章才邃晓！实在大多数情况下我们也很难用到如许的体式格局，在官网的位置都不是很起眼，所以就也许复述一下－不知－博客的内容吧！

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

大多数情况下， 我们运用PureComponent可以简化我们的代码，而且进步机能，然则PureComponent的自动为我们增加的shouldComponentUpate函数，只是对props和state举行浅比较(shadow comparison)，当props或许state自身是嵌套对象或数组等时，浅比较并不能获得预期的效果，这会致使现实的props和state发生了变化，但组件却没有更新的题目。固然照样有处理的要领的，所以发起照样罕用。

四、Stateless Functional Component

上面提到的要领都包含了内部有交互和状况的庞杂的组建，假如组建自身就是用来展现的，那末就可以用stateless的要领来建立组建。

import React from 'react';
const Button = ({day,increment}) => {
  return (
    <div>
      <button onClick={increment}>Today is {day}</button>
    </div>
  )
}

Button.propTypes = {
  day: PropTypes.string.isRequired,
  increment: PropTypes.func.isRequired,
}

export default Button;

假如像变动显现的效果只能转变传入的props;

以上就是四种建立组建的体式格局，来点个人的发起吧！

如今我公司的项目就是采纳了第四种体式格局来举行组建的建立，那末一定会有人问，那末请求接口，返回数据从新衬着怎么做，一定照样会有一部分用到es6建立的要领，一部分采纳stateless的要领，固然这类也是可以的，不过看起来就会轻微的有些乱，用两种体式格局定义组建也并非一个好的团队应当看到的。所以给人人引荐一些react+webpack+react-redux 以及vda这类体式格局，细致的材料可以参考这个上面说的很细致，这类体式格局的长处就在于将逻辑和展现完整的分开了。

末了人人可以依据自身的喜好以及项目的请求挑选一种体式格局来举行组建的建立，轻易自身的影象，也供人人参考运用，同时也来提一下更好的要领。

参考：
http://www.cnblogs.com/Unknw/…
https://segmentfault.com/a/11…