创建组件

创建组件的两种方式

• 第一种 普通方式

const exf = {
    test() {
        alert('ok test mixins!' + this.props.group)
    }
};
const Item = React.createClass({
    getDefaultProps() {
        return({
            group: 'javaScript'
        })
    },

    //state
    getInitialState() {
        return({
            group: 'javascript'
        })
    },
    mixins: [exf], // 等价 test(){}

    render() {

        //jsx
        return (
            <div>
                {this.props.group}
                <button onClick={this.test}>click me</button>
            </div>
        )
    }
});

• 第二种 ES6

class Item extends React.Component {

    //初始化
    constructor(props) {
        super(props);
        this.state = {

        }//等价于getInitialState
    }

    //静态默认方法
    static get defaultProps() {
        return {
            group: 123
        }
    }

    //mixins: [exf],  //es6不支持混合开发

    test() {
        alert('ok test mixins!' + this.props.group);
    }

    //设置defaultProps
    Item.defaultProps = {
        group: 'javacript'
    }
    render() {

        //jsx
        return (
            <div>
                {this.props.group}
                <button onClick={this.test.bind(this)}>click me</button>
            </div>
        )
    }
}