简谈创建React Component的几种方式

前言

当我们谈起React的时候，多半会将注意力集中在组件之上，思考如何将页面划分成一个个组件，以及如何编写可复用的组件。但对于接触React不久，还没有真正用它做一个完整项目的人来说，理解如何创建一个组件也并不那么简单。

在最开始的时候我以为创建组件只需要调用createClass这个api就可以了；但学习了ES6的语法后，又知道了可以利用继承，通过extends React.component来创建组件；后来在阅读别人代码的时候又发现了PureComponent以及完全没有继承，仅仅通过返回JSX语句的方式创建组件的方式。

下面这篇文章，就将逐一介绍这几种创建组件的方法，分析其特点，以及如何选择使用哪一种方式创建组件。

几种方法

1.createClass

如果你还没有使用ES6语法，那么定义组件，只能使用React.createClass这个helper来创建组件，下面是一段示例：

var React = require("react");var Greeting = React.createClass({propTypes: {name: React.PropTypes.string //属性校验},getDefaultProps: function() {return {name: 'Mary' //默认属性值};},getInitialState: function() {return {count: this.props.initialCount}; //初始化state},handleClick: function() {//用户点击事件的处理函数},render: function() {return <h1>Hello, {this.props.name}</h1>;}});module.exports = Greeting;

这段代码，包含了组件的几个关键组成部分，这种方式下，组件的props、state等都是以对象属性的方式组合在一起，其中默认属props和初始state都是返回对象的函数，propTypes则是个对象。这里还有一个值得注意的事情是，在createClass中，React对属性中的所有函数都进行了this绑定，也就是如上面的hanleClick其实相当于handleClick.bind(this) 。

2.component

因为ES6对类和继承有语法级别的支持，所以用ES6创建组件的方式更加优雅，下面是示例：

import React from 'react';class Greeting extends React.Component {constructor(props) {super(props);this.state = {count: props.initialCount};this.handleClick = this.handleClick.bind(this);}//static defaultProps = {// name: 'Mary' //定义defaultprops的另一种方式//}//static propTypes = {//name: React.PropTypes.string//}handleClick() {//点击事件的处理函数}render() {return <h1>Hello, {this.props.name}</h1>;}}Greeting.propTypes = {name: React.PropTypes.string};Greeting.defaultProps = {name: 'Mary'};export default Greating;

可以看到Greeting继承自React.component,在构造函数中，通过super()来调用父类的构造函数，同时我们看到组件的state是通过在构造函数中对this.state进行赋值实现，而组件的props是在类Greeting上创建的属性，如果你对类的属性和对象的属性的区别有所了解的话，大概能理解为什么会这么做。