3.React生命周期方法

• componentWillUpdate()

当组件再次渲染时（非初始化），在render()方法前调用（在组建的props或者state发生改变时会触发该方法）。

• componentDidUpdate()

在render()函数执行完毕，且更新的组件已被同步到DOM后立即调用。（初始化不会触发）

• componentWillMount()

在新节点插入DOM结构之前触发。

• componentIDidMount()

在新节点插入DOM结构之后触发。

• componentWillUnmount()

在组件从DOM中移除时立刻触发。

var textAreaCounter = React.createClass({
        propType: {
            text: React.PropTypes.string.isRequired,
        },
        shouldComponentUpdate(newProps,newState){
           console.log("shouldComponentUpdate（触发）")
           return true
        },
        componentWillUpdate(){
            console.log("componentWillUpdate",arguments)
        },
        componentDidUpdate(){
            console.log("componentDidUpdate",arguments)
        },
        componentWillMount(){
            console.log("componentWillMount",arguments)
        },
        getDefaultProps: function () {
            return {
                text: 'nima'
            }
        },
        getInitialState:function(){
            return {
                text:this.props.text,
            }
        },
        _textChange:function(ev){
            this.setState({
                text:ev.target.value
            })
        },
        render: function () {
            console.log("render触发")
            return React.DOM.div(null,
                React.DOM.textarea(
                    {
                        //defaultValue:'默认值',  //设置默认值，且数据不受控制
                        value:this.state.text, //和defaultValue只能选择其一
                        onChange:this._textChange,
                    }
                ),
                React.DOM.h3(null, this.state.text.length)
            )
        },
    });
 var myTextAreaCounter =    ReactDOM.render(
        React.createElement(textAreaCounter, {
            text: 'Bob'
        }),
        document.getElementById('app'),
        function () {
            console.log("组件装载完毕")
        }
    )

• shouldComponentUpdate(newProps,newState)

这个方法在componentWillUpdate()之前触发，给你一个机会返回false以取消更新组件。

//该组件将不会再更新视图
shouldComponentUpdate(newProps,newState){
           console.log(newProps,newState)
           return false
  }

当你输入时：