react组件生命周期方法说明

简单的了解如何创建一个react组件，并且对于我们开发过程中，了解组件生命周期的方法是特别重要的。

1. js

/**
 * 关键词说明：
 *      初始化渲染：组件创建第一次调用render方法的时候
 * 
 * 声明周期方法执行顺序：
 *      初始化渲染：
 *          getInitialState
 *          componentWillMount
 *          render
 *          componentDidMount
 *      props或state更改：
 *          componentWillReceiveProps
 *          shouldComponentUpdate 返回true则执行render,false则不执行
 *          componentWillUpdate
 *          render
 *          componentDidUpdate
 */

var Child = React.createClass({
    //初始化渲染执行后调用-挂载。仅执行一次
    componentDidMount: function(){
        console.log('Child componentDidMount');
    },
    //组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。
    //用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。
    componentWillReceiveProps: function(nextProps){
        console.log('Child componentWillReceiveProps');
        console.log(nextProps);
    },
    //在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会
    //此例子中没有state，所以nextState是null
    shouldComponentUpdate: function(nextProps,nextState){
        console.log('Child shouldComponentUpdate');
        console.log(nextProps);
        console.log(nextState);
        return true;
    },
    //在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。
    //你不能在刚方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps
    componentWillUpdate: function(nextProps,nextState){
        console.log('Child componentWillUpdate');
        console.log(nextProps);
        console.log(nextState);
    },
    //在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。
    //比如首次更新：prevProps: {index: 0}. prevState: null
    componentDidUpdate: function(prevProps,prevState){
        console.log('Child componentDidUpdate');
        console.log(prevProps);
        console.log(prevState);
    },
    //在组件从 DOM 中移除的时候立刻被调用。一般用来销毁组件
    componentWillUnmount: function(){
        console.log('Child componentWillUnmount');
    },
    render: function(){
        console.log('Child render');
        return <div id="child">{this.props.index}</div>;
    }
});

var HelloMessage = React.createClass({
    //初始化this.state
    getInitialState: function(){
        console.log('HelloMessage getInitialState');
        return {
            index: 0
        };
    },
    //初始化渲染执行前调用-挂载。仅执行一次
    componentWillMount: function(){
        console.log('HelloMessage componentWillMount');
    },
    //初始化渲染执行后调用-挂载。仅执行一次
    componentDidMount: function(){
        console.log('HelloMessage componentDidMount');
        var self = this;
        $(this.refs.btnJq).on('click',function(e){
              self.handleChange();
        });
    },
    //在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会
    //因为props重来没改过，所以nextProps总是{name:'zmr'}
    shouldComponentUpdate: function(nextProps,nextState){
        console.log('HelloMessage shouldComponentUpdate');
        console.log(nextProps);
        console.log(nextState);
        return true;
    },
    //在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。
    //你不能在刚方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps
    componentWillUpdate: function(nextProps,nextState){
        console.log('HelloMessage componentWillUpdate');
        console.log(nextProps);
        console.log(nextState);
    },
    //在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。
    //比如首次更新：prevProps: {name: 'zmr'}. prevState: {index: 0}
    componentDidUpdate: function(prevProps,prevState){
        console.log('HelloMessage componentDidUpdate');
        console.log(prevProps);
        console.log(prevState);
    },
    //在组件从 DOM 中移除的时候立刻被调用。一般用来销毁组件
    componentWillUnmount: function(){
        console.log('HelloMessage componentWillUnmount');
        $(this.refs.btnJq).off('click');
    },
    handleChange: function(){
        var index = this.state.index;
        index++;
        this.setState({
            index: index
        });
    },
    //渲染
    render: function() {
        console.log('HelloMessage render');
        return (
            <div id="hellowMessage">
                Hello {this.props.name}. index is {this.state.index}
                <a href="javascript:;" onClick={this.handleChange}>点我</a><br/>
                <a href="javascript:;" ref="btnJq">jquery绑定的事件</a><br/>
                <Child index={this.state.index} />
            </div>
        );
    }
});

ReactDOM.render(
  <HelloMessage name="zmr" />,
  document.getElementById('example')
);

//React.unmountComponentAtNode(document.getElementById('example'))  销毁组件。分别调用了HelloMessage.componentWillUnmount和Child.componentWillUnmount

2. html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
  </head>
  <body>
    <div id="example"></div>
    
    <!--兼容ie8，一般只要前2个就行了-->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-sham.min.js"></script>
    <script src="https://wzrd.in/standalone/es7-shim@latest"></script> -->

    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> -->
    <script src="../build/jquery-1.11.3.min.js"></script>
    <script src="../build/helloworld.js"></script>
  </body>
</html>

引用了以上代码，即可运行在控制台里面看最终效果。一目了然就看出了，生命周期方法的执行顺序。

说明：页面上引用的helloworld.js是用babel编译过的，所以可直接引用，无需指定type="text/babel"和browser.min.js。

3. 问题

现在react官网提供的react的最新版本是15.3.1，虽然官方说支持ie8可引用shim和sham即可（在html代码中可看到），但是引入后虽然部分es5语法不报错了，但是react报错。经查证：react 0.13版本可以按照官方的方法支持ie8，但是现在最新版本15.3.1，已无法支持ie8了。但是在commonJs中引用react 15.3.1并编译后，可支持ie8。所以如果要用react开发一个网站，为了支持性，建议使用node+react开发，并使用grunt browserify+babelify来编译成浏览器可识别的js代码。