React学习 -- 组件

React组件可以被描述成JSON对象，这就意味着，开发者可以通过方法或类来构建组件。React组件基本上由三部分组成：属性props，状态state和生命周期方法。

React组件可以接受外部进入的参数，也可以维持自身状态，一旦收到参数导致变化或自身状态改变，React组件就会自动执行相应的生命周期方法，最后渲染。

React组件的构建方法

三种不同的方法：React.createClass、ES6 classes、无状态函数。

1、React.createClass：最传统，兼容性最好。

const Button = React.createClass({ 
    getDefaultProps() {
        return {
            color: 'blue', 
            text: 'Confirm',
        };
    },
    render() {
        const { color, text } = this.props;
        return (
            <button className={`btn btn-${color}`}>
                <em>{text}</em> 
            </button>
        ); 
    }
});

2、ES6 classes：通过ES6标准的类语法

import React, { Component } from 'react';
class Button extends Component { 
    constructor(props) {
        super(props); 
    }
    static defaultProps = {
        color: 'blue',
        text: 'Confirm', 6
     };
    render() {
        const { color, text } = this.props;
        return (
            <button className={`btn btn-${color}`}>
                <em>{text}</em> 
            </button>
        ); 
    }
}

React不推荐采用继承，因为如果采用了继承，UI层面小的修改就可能影响整体，这样并不是我们需要的。React采用的是组合逻辑：将组件拆分到合理的利用，用组合的方式合成业务组件。

3、无状态函数：采用这种方式构建的组件称为无状态组件

function Button({ color = 'blue', text = 'Confirm' }) { 
    return (
        <button className={`btn btn-${color}`}> 
            <em>{text}</em>
        </button> 
    );
}

无状态组件不存在state，也没有生命周期方法。
在合适的情况下，我们都应该使用无状态组件，因为它不像上面两种方法在调用时会创建新实例，它创建时始终保持了一个实例，避免了不必要的检查和内存分配。