13. React 声明组件有哪几种方法, 有什么不同？

13. React 声明组件有哪几种方法, 有什么不同？

React 声明组件的三种方式:

• 函数式定义的无状态组件
• ES5 原生方式 React.createClass 定义的组件
• ES6 形式的 extends React.Component 定义的组件

无状态函数式组件

它是为了创建纯展示组件, 这种组件只负责根据传入的 props 来展示, 不涉及到 state 状态的操作, 组件不会被实例化, 整体渲染性能得到提升, 不能访问 this 对象, 不能访问生命周期的方法。

ES5 原生方式 React.createClass // RFC

React.createClass 会自绑定函数方法, 导致不必要的性能开销, 增加代码过时的可能性。

ES6 继承形式 React.Component // RCC

目前极为推荐的创建有状态组件的方式, 最终会取代 React.createClass 形式；相对于 React.createClass 可以更好实现代码复用。

无状态组件相对于于后者的区别:

与无状态组件相比, React.createClass 和 React.Component 都是创建有状态的组件, 这些组件是要被实例化的, 并且可以访问组件的生命周期方法。

React.createClass 与React.Component 区别:

函数 this 自绑定

• React.createClass 创建的组件, 其每一个成员函数的 this 都有 React 自动绑定, 函数中的 this 会被正确设置
• React.Component 创建的组件, 其成员函数不会自动绑定 this, 需要开发者手动绑定, 否则 this 不能获取当前组件实例对象

组件属性类型 propTypes 及其默认 props 属性 defaultProps 配置不同

• React.createClass 在创建组件时, 有关组件 props 的属性类型及组件默认的属性会作为组件实例的属性来配置, 其中 defaultProps 是使用 getDefaultProps 的方法来获取默认组件属性的
• React.Component 在创建组件时配置这两个对应信息时, 他们是作为组件类的属性, 不是组件实例的属性, 也就是所谓的类的静态属性来配置的

组件初始状态 state 的配置不同

• React.createClass 创建的组件, 其状态 state 是通过 getInitialState 方法来配置组件相关的状态
• React.Component 创建的组件, 其状态 state 是在 constructor 中像初始化组件属性一样声明的