React相知

PropTypes

组件的属性可以接受任意的值，比如 对象，字符串，函数等都可以，有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

  var MyTitle = React.createClass({
        propTypes: {
            title: React.PropTypes.string.isRequired

        },
        render: function () {
            return <h1>{this.props.title}</h1>
        }


    });
    var data = 123;
    ReactDOM.render(
            <MyTitle title={data}/>,
        document.getElementById('example1')
    );

此外，getDefaultProps 方法可以用来设置组件属性的默认值。

var Mytitle1 = React.createClass({
        getDefaultProps: function () {
            return {
                title: '默认的属性值'
            };
        },
        render: function () {
            return <h1>{this.props.title} </h1>
        }
    })
    ReactDOM.render(
            <Mytitle1/>,
        document.getElementById('example2')
    );

获取真实的DOM节点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性

var MyComponent = React.createClass({
     handleClick: function() {
         this.refs.myTextInput.focus();
     },
     render: function() {
         return (
                 <div>
                     <input type="text" ref="myTextInput" />
                     <input type="button" value="Focus the text input" onClick={this.handleClick} />
                 </div>
         );
     }
 });

 ReactDOM.render(
         <MyComponent />,
     document.getElementById('example5')
 );

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

this status

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI“

 var LikeButton = React.createClass({
        getInitialState: function() {
            return {liked: false};
        },
        handleClick: function(event) {
            this.setState({liked: !this.state.liked});
        },
        render: function() {
            var text = this.state.liked ? '点击状态' : '没点击状态';
            return (
                    <p onClick={this.handleClick}>
                          {text}
                    </p>
            );
        }
    });

    ReactDOM.render(
            <LikeButton />,
        document.getElementById('example6')
    );

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

表单