const Todo = ({ onClick, complete, text, ...props }) => ( <li onClick={onClick} style={{textDecoration: complete ? "line-through" : "none"}} {...props} > {props.text} </li> )
无状态组件一般会搭配高阶组件（简称：OHC）一起使用，高阶组件用来托管state，Redux 框架就是通过 store 管理数据源和所有状态，其中所有负责展示的组件都使用无状态函数式的写法。
这种模式被鼓励在大型项目中尽可能以简单的写法 来分割原本庞大的组件，而未来 React 也会面向这种无状态的组件进行一些专门的优化，比如避免无意义的检查或内存分配。所以建议大家尽可能在项目中使用无状态组件。
当然，无状态组件也不是万金油，比如它不支持"ref"，原因很简单，因为 React 调用它之前，组件不会被实例化，自然也就没有"ref"，（ref和findDOMNode实际上打破了父子组件之间仅通过 props 来传递状态的约定，违背了 React 的原则，需要避免）。
以上三种写法的比较，以及最佳实践
Facebook 官方早就声明 ES6React.Component将取代React.createClass。随着 React 不断发展，React.createClass暴露出一些问题：
相比React.Component可以有选择性的绑定需要的函数，React.createClass会自动绑定函数，这样会导致不必要的性能开销。
React.createClass亲生的 mixin，React.Component不再支持，事实上 mixin 不够优雅直观，替代方案是使用更流行的高阶组件-HOC，如果你的项目还离不开 也可以使用 react-mixin
总的来说：无状态函数式写法 优于React.createClass，而React.createClass优于React.Component。