React中创建组件的方式

在了解React中的无状态和有状态的组件之前，先来了解在React中创建组件的姿势。

  • ES6写法：React.Component
  • 无状态的函数写法，又称为纯组件SFC

    React.Component

    React.Component是以ES6的形式来创建React组件，也是现在React官方推荐的创建组件的方式，
    对于这种无状态的组件，使用函数式的方式声明，会使得代码的可读性更好，并能大大减少代码量，箭头函数则是函数式写法的最佳搭档：
  1. export default class treeGraph extends React.Component {
  2. //写函数
  3. render () {
  4.     return (
  5.       <div >
  6.         <div id="mountNode" ref="mountNode" >  </div>
  7.       </div>
  9.     );
  10.   }
  11. }

无状态的函数写法

无状态的函数创建的组件是无状态组件，它是一种只负责展示的纯组件：

  1. const aaa =({dispatch,props,chainMain})=>{
  2.  return(
  3.     <div>
  4.       1111
  5.     </div>
  6.  )
  7. }
  8. TreeProductLink.propTypes = {
  9.   dispatch: PropTypes.func,
  10. };
  11. function mapState ({ chainMain }) {
  12.   return {
  13.   }
  14. }
  15. export default connect(chainMain)(aaa);

建议大家尽可能在项目中使用无状态组件。
有状态组件中，拥有this的指向问题。在无状态组件中，我们可以忽略this指向问题，而且不用去考虑生命周期的写法。

没有this关键字

就如上面的例子所示，无状态组件只是一个函数。因此，所有与Javascript语言中this 关键字有关的让人疑惑，使人讨厌的情况都会避免。没有了this 关键字之后，整个组件就会更加容易让人理解。只需要比较一下上例中的click 事件处理器，就能明白了。

  1. onClick={this.sayHi.bind(this)}>Say Hi</a> // class组件的写法
  2. onClick={sayHi}>Say Hi</a> // 无状态组件的写法 需要说明的是，对于无状态组件而言，bind这个关键字并非必须的。将Class 去掉之后，我们也无需通过绑定来将this关键字与上下文联系起来。 Javascript 中的 this 关键字给如此多的开发者造成了困惑，能够尽量不用this 是无状态组件的另一个优势。
    无状态组件是非常有用的表现类组件。表现类组件应该专注于UI层面而不是交互，应该避免在表现类组件中使用状态。状态应当通过更高水平的容器类组件，或者是通过FLUX/Redux 等等来管理。无状态组件不支持状态或者生命周期。这是一件好事。为什么这么说呢？因为它迫使你不再懒惰，让你不得不把容器类组件和表现类组件分离开来。
    当然，你总是很愿意将状态添加到表现类组件之中，这也的确是一种很快的方法来实现一个功能。然而，无状态组件并不支持本地状态，你并不能够轻而易举地实现状态。因此，无状态组件就自动迫使当前组件保持纯函数形式。你也要被迫把状态管理放到它相应的位置：在更高水平的容器类组件中。