• 函数

• this

ES5

ES6

this 调用的源码

• ES5 ``` //可控组件 value 和 onChange 属性 var HelloMassage = React.createClass({ //设置默认状态 getInitialState: function() {

    return {
        data: this.props.data
    }

  }, //组件被渲染之后 componentDidMount: function() {

    var me = this;
    setTimeout(function() {
        // 修改属性值  
        //这个因为下面使用的是 defaultValue 所以这个是不会生效的，只能通过下面的赋值的写死的方法来改变，这个就是不可控组件
        me.setState({
            data2: "data2",
            data: 123
        });
        console.log("我已渲染完毕");
    }, 1000);
    // ReactDOM.findDOMNode(this.refs.uname).value = "123";

  }, //在下面出现了多个和input 并绑定这个事件的时候，就变成了一个公用的方法 下面的两个 ipunt 改变值时都会触发 handleChange: function(e) {

    var me = this;
    me.setState({
        data: e.target.value
    });

  }, render: function() {

    return (
        <form>
        <input ref="uname2" onChange={this.handleChange.bind(this,"data2")} value={this.state.data2} type="text"/>
        <input ref="uname2" onChange={this.handleChange.bind(this,"data")} value={this.state.data} type="text"/>
        </form>
    );

  }, }); ReactDOM.render( , document.getElementById(“example”) );

- ES6

//ES6 写法 “use strict”; class HelloMassage extends React.Component { constructor(props) { super(props); this.state = { title: props.title + 200 }; // 把下面的这个注释掉可以在 h1 标签调用的时候通过 => 将这个 this -> HelloMassage 传过去 否则的话这个 this 就是 null //一般 this 都是在这里绑定的 不会在下面的标签中再去操作 // this.handleClick = this.handleClick.bind(this); } // handleClick(e) { // console.log(this); // console.warn(“元素：”, e.target); // } //ES6 传入多个参数的写法 handleClick(a, e, n) { console.log(a); //HelloMassage{} console.warn(“元素：”, e.target); //

321

//属性校验器，表示必须是 string HelloMassage.propTypes = { title: React.PropTypes.string, }; //设置默认属性 HelloMassage.defaultProps = { title: “321” };

ReactDOM.render( , document.getElementById(“example”) );

```