react（一） 基础组件封装

1、引入react，使用es6的import...from...方式导入，对应着需要使用export default... 导出。

更多es6导入、导出方式可参考百度。
另外，如果需要dom操作，需要引入react-dom。

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

使用es6的解构赋值，单独引入Component。

注意：

（1）React必须引入，由于JSX最终会被转译成依赖React的表达式。
（2）Component 是所有组件的基类。

关于JSX更多参考。

2、封装自己的组件

使用es6的扩展类的方式，在基类中扩展组件。

class ClickCounter extends Component{
    constructor(props){
        //当父组件向子组件传递数据时，需要在这里传入props。
        super(props);

        //由于事件函数onClickButton不是在render函数中定义的，所以需要通过bind绑定this指向。
        this.onClickButton=this.onClickButton.bind(this);

        //通过state来定义当前组件内部自己的数据
        this.state={count:0};
    }
    onClickButton(){
        //通过setState方法 来改变state对象中的值。
        this.setState(
            {
            count:this.state.count+1
            }
        );
    }
    render(){
        //在render中定义样式，必须使用对象的方式。
        const counterStyle={
            margin:'16px',
            fontSize:'24px'
        };
        return (
            {/*在jsx中，使用这个方式进行注释 */}
            {/*在jsx中，使用在render函数中，定义的样式*/}
            <div style={counterStyle}>
                {/*在jsx中，使用onClick方式进行事件绑定，不同于html行内事件绑定，原理参考jsx文章*/}
                <button onClick={this.onClickButton}>Click me</button>
                <div>
                    Click Count:<span id="clickCount">{this.state.count}</span>
                </div>
            </div>
        );
    }
}

//导出当前定义的组件
export default ClickCounter;