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;