React学习笔记3——props，state & refs

this.props

在React中，可以通过this.props来传递参数，看下面的例子：

var OuterComponent = React.createClass({
    render: function(){
        return (
            <div className="outer">
                <InnerComponent name="Alex">
                    This is a message
                </InnerComponent>
                <InnerComponent name="Bebe">
                    <span>first message</span><br />
                    <span>second message</span>
                </InnerComponent>
            </div>
        );
    }
});

var InnerComponent = React.createClass({
    render: function(){
        return (
            <div className="inner">
                <h2>{this.props.name}</h2>
                <p>{this.props.children}</p>
            </div>
        );
    }
});

React.render(
    <OuterComponent />,
    document.getElementById("example")
);

通常情况下，参数往往是在外层组件中传入，在内层组件的实现中获得。其实非常类似于构造函数的传参，例如 InnerComponent的“构造函数”(render)接受两个参数：name和children，在OuterComponent 中，创建了两个InnerComponent的实例，并向它们提供name和children的值。

this.props是一个对象，所有声明的属性都会包含在这个对象中，另外该对象有一个children属性， 其值是一个数组，表示的是该元素的所有子元素。

this.state

this.props常用来传递相对固定的属性值，即值一旦确定下来基本上就不会再改变。对于那些会动态变化的值， 更好的方法是使用this.state，例如：

var Component = React.createClass({
    getInitialState: function(){
        return {name: "Unknown"};
    },
    componentDidMount: function(){
        setTimeout(function(){
            this.setState({name: "Alex"});
        }.bind(this), 2000);
    },
    render: function(){
        return (
            <div>
                <strong>Name: </strong>
                <span>{this.state.name}</span>
            </div>
        );
    }
});

React.render(
    <Component />,
    document.getElementById("example")
);

通过getInitialState()来初始化state的值，后续的操作、事件等可能会动态地改变state的值，一旦state改变， 相应的DOM就会更新。需要注意的是this.setState并非是改变了原来state对象的指向，而是在原来state的身上做一个 extend操作。

this.refs

通过this.refs可以查找相应的DOM对象，例如：

var Component = React.createClass({
    handleChange: function(e){
        var user = React.findDOMNode(this.refs.user);
        var name = React.findDOMNode(this.refs.name);
        name.innerHTML = user.value;
    },
    render: function(){
        return (
            <div>
                <input type="text" ref="user" placeholder="You name" onChange={this.handleChange} />
                <p>Hello <span ref="name"></span></p>
            </div>
        );
    }
});

React.render(
    <Component />,
    document.getElementById("example")
);

通过给标签添加ref属性，然后通过this.refs可以找到该标签的引用，然后通过React.findDOMNode()方法即可得到原生的DOM对象。

参考

• http://facebook.github.io/react/docs/tutorial.html