1.获取真实的节点

　　虚拟DOM取不到用户输入的值，文本输入框必须有一个ref属性，可以通过事件的回调函数获取用户输入的值。

var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( 
    
 
      
      
    
 ); } }); ReactDOM.render( 
    , document.getElementById('example') );

由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等

 

2.this.state

　　getInitialState 定义初始状态的值   可以通过this.state属性读取

　　this.setState 修改状态值  修改后自动调用this.render

　　

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 ? 'like' : 'haven\'t liked'; return ( 
 You {text} this. Click to toggle. 
 ); } }); ReactDOM.render( 
    , document.getElementById('example') );

　　this.props 表示一旦定义，就不能改变

　　this.state  随着用户互动而产生变化的特性　　

3.表单

　　文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return ( 
    
 
      
     
{value}
 
    
 ); } }); ReactDOM.render(, document.body); 4.组件的生命周期

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

　　React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 }; }, componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function () { return ( 
    
      Hello {this.props.name} 
    
 ); } }); ReactDOM.render( 
    , document.body ); 通过 componentDidMount 方法设置一个定时器 style属性的设置方式

style={
       {opacity: this.state.opacity}}