react学习笔记 item3 --- 组件的创建方式

前面我们说到了 react 的核心在于组件，可以把实现一定功能或者模块进行封装，然后通过不同的组件之间的组合构成一下完整的项目。下面介绍了一下组件的基本使用方法。

不使用JSX 语法也能创建 react 组件，但是由于react 团队推荐我们使用 JSX，我的上一篇博文中也介绍了 JSX 的优势以及基本的语法。因此这里我简单的介绍一下使用JSX来创建组件的方法。

1、React.createClass

利用React.createClass定义的组件是es5原生方式。需要注意的是：

原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头；
组件类只能包含一个顶层标签，否则也会报错；
对自定义组件实例化时，要保证标签闭合。

下面我们创建一个 HelloMessage 组件，用来展示相关的信息，其形式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个react程序</title>
    <script type="text/javascript" src="lib/react.js"></script>
    <script type="text/javascript" src="lib/react-dom.js"></script>
    <script type="text/javascript" src="lib/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
    var HelloMessage = React.createClass({
      render: function() {
        return <h1>Hello World！</h1>;
      }
    });

    ReactDOM.render(
        <HelloMessage />,
        document.getElementById("example"));

    </script>
</body>
</html>

这个示例在上一篇文章中介绍过。在组件实例化的时候也可以给组件传入参数：可以使用 this.props 对象向组件传递参数。例如我们我们给组件传入一个name属性：

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}！</h1>;
  }
});

ReactDOM.render(
    <HelloMessage name='sean' />,
    document.getElementById("example"));

另外，这种方法创建的组件时可以设置状态，可以通过组件的状态来控制组件的显示效果。如下，我们设置了一个button ，通过点击 button 来实现颜色的变化：

var HelloMessage = React.createClass({
    getInitialState: function() {
        return { isRed : true };
    },
    handleClick: function(){
        this.setState({isRed : !this.state.isRed});
    },
  render: function() {
    var redStyle = {
        color:'red'
    };
    var blueStyle = {
        color:'blue'
    };
    return (
        <div>
            <h1 style={this.state.isRed ? redStyle : blueStyle}>Hello {this.props.name}！</h1>
            <button onClick={this.handleClick}>点击切换颜色</button>
        </div>
        );
  }
});

ReactDOM.render(
    <HelloMessage name='sean' />,
    document.getElementById("example"));

更多的关于props 和 state 的使用将在后续的文章介绍。

2、函数式组件

函数式组件是React 0.14版本开始出现的，这中方式创建组件的最大特点就是无状态性。而且简化了很多，只留下了return 部分，这种组件只负责展示，不涉及到要state状态的操作。下面就是一个简单的展示：

function HelloMessage(props){
    var redStyle = {
        color:'red'
    };
    return <h1 style={redStyle}>Hello world！</h1>
}

ReactDOM.render(
    <HelloMessage />,
    document.getElementById("example"));

当然，函数式组件可以根据传入的props来进行相应的内容，如下：

function HelloMessage(props){
    return <h1>Hello {props.name}！</h1>
}

ReactDOM.render(
    <HelloMessage name='sean' />,
    document.getElementById("example"));

这种方法创建的组件无法完成第一种 React.createClass 创建方式中根据状态改变显示效果。但是由于无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。

3、React.Component

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式。由于ES6 的推广，最终React.Component会取代React.createClass形式。将上面React.createClass的形式改为React.Component形式如下：

class HelloMessage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
           isRed : true
        };

        // ES6 类中函数必须手动绑定
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        this.setState({isRed : !this.state.isRed});
    }

    render() {
        var redStyle = {
            color:'red'
        };
        var blueStyle = {
            color:'blue'
        };
        return (
            <div>
               <h1 style={this.state.isRed ? redStyle : blueStyle}>Hello {this.props.name}！</h1>
            <button onClick={this.handleClick}>点击切换颜色</button>
            </div>
        );
    }
}

ReactDOM.render(
    <HelloMessage name='sean' />,
    document.getElementById("example"));

以上是三种创建react 组件的方式，熟悉ES6 的读者建议使用 ES6 的方式来创建。