react创建组件的3种不同方式的区别 createClass ES6Class Statelessfunction

Stateless Function V.S. ES6 Classes

上代码，

//来一个stateless function，用ES6的语法写
const SimpleComponent = ({text,onClick}) => (
    <div onClick={onClick}>
       Your text is {text}. Click to say.
    </div>
)

如果换成ES6 Classes的写法：

//原谅我不能写出更简单的案例了，`ES6 Classes`的写法就是会复杂些
class SimpleComponent extends React.Component {

  //这个是构造函数，绑定事件，初始化state
  constructor() {
    super();
    this.state = {
      text: 'say something!'
    };
    this.handleClick = this.handleClick.bind(this);
  }

  //上面那个函数的实现
  handleClick() {
    this.setState({liked: !this.state.liked});
  }

  //熟悉的render
  render() {
    return (
      <div onClick={this.handleClick}>
        Your text is {text}. Click to say.
      </div>
    );
  }
}

区别是：

用ES6 Classes方式写的组件，有this，以及this.state和this.setState等属性和方法，
纯函数写的组件只能依赖外界传入的参数，不能拥有自己的state

引用官方文档：

“尽量让你的组件保持无状态。
一个通常的做法是，创建一些无状态的组件，只是简单的把传入数据渲染出来。
然后在最顶层用一个带有状态(state)的组件给这些组件传递数据”

一个有状态的父组件，带领一堆没有状态的子组件，把它的state传递给子组件，这也是redux的方式

另外

官方推荐使用stateless function，这是最近推出的方式，在性能上更有优越性

而createClass是这三个里面最老的api，不过我觉得createClass更方便，不用写construct

---

参考文献 ：
1.官方文档
2.James K Nelson的博客文章