componentWillMount 和 componentDidMount的区别

[componentWillMount 和 componentDidMount的区别_天蒙蒙亮的博客-CSDN博客_componentdidmount](https://blog.csdn.net/qq_38719039/article/details/82378434)

一、调用时期不同

转自：https://www.cnblogs.com/xyn0909/p/8516074.html

1、componentWillMount 将要装载，在render之前调用；

componentDidMount，（装载完成），在render之后调用

2、componentWillMount 每一个组件render之前立即调用；

componentDidMount render之后并不会立即调用，而是所有的子组件都render完之后才可以调用

3、componentWillMount 可以在服务端被调用，也可以在浏览器端被调用；

componentDidMount 只能在浏览器端被调用，在服务器端使用react的时候不会被调用

二、

注意，如果在shouldComponentUpdate里面返回false可以提前退出更新路径。

React组件生命周期的测试

class LifeCycle extends React.Component {
    constructor(props) {
        super(props);
        alert("Initial render");
        alert("constructor");
        this.state = {str: "hello"};
    }
 
    componentWillMount() {
        alert("componentWillMount");
    }
 
    componentDidMount() {
        alert("componentDidMount");
    }
 
    componentWillReceiveProps(nextProps) {
        alert("componentWillReceiveProps");
    }
 
    shouldComponentUpdate() {
        alert("shouldComponentUpdate");
        return true;        // 记得要返回true
    }
 
    componentWillUpdate() {
        alert("componentWillUpdate");
    }
 
    componentDidUpdate() {
        alert("componentDidUpdate");
    }
 
    componentWillUnmount() {
        alert("componentWillUnmount");
    }
 
    setTheState() {
        let s = "hello";
        if (this.state.str === s) {
            s = "HELLO";
        }
        this.setState({
            str: s
        });
    }
 
    forceItUpdate() {
        this.forceUpdate();
    }
 
    render() {
        alert("render");
        return(
            <div>
                <span>{"Props:"}<h2>{parseInt(this.props.num)}</h2></span>
                <br />
                <span>{"State:"}<h2>{this.state.str}</h2></span>
            </div>
        );
    }
}
 
class Container  extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num: Math.random() * 100
        };
    }
 
    propsChange() {
        this.setState({
            num: Math.random() * 100
        });
    }
 
    setLifeCycleState() {
        this.refs.rLifeCycle.setTheState();
    }
 
    forceLifeCycleUpdate() {
        this.refs.rLifeCycle.forceItUpdate();
    }
 
    unmountLifeCycle() {
        // 这里卸载父组件也会导致卸载子组件
        ReactDOM.unmountComponentAtNode(document.getElementById("container"));
    }
 
    parentForceUpdate() {
        this.forceUpdate();
    }
 
    render() {
        return (
            <div>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.propsChange.bind(this)}>propsChange</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.setLifeCycleState.bind(this)}>setState</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.forceLifeCycleUpdate.bind(this)}>forceUpdate</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.unmountLifeCycle.bind(this)}>unmount</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a>
                <LifeCycle ref="rLifeCycle" num={this.state.num}></LifeCycle>
            </div>
        );
    }
}
 
ReactDom.render(
    <Container></Container>,
    document.getElementById('container')
);
 
作者：linjinhe
链接：https://www.jianshu.com/p/4784216b8194
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

三、 componentWillMount 和 componentDidMount 那个更适合请求数据?

转自: https://blog.csdn.net/u011135887/article/details/79239328

先看RN生命周期
有两个方法可以请求数据:

componentWillMount
componentDidMount

除了这两个函数,render方法肯定不是合适的请求数据的地方,因为在React-Native中请求数据都是异步的(fetch),如果这样做肯定会带来一些不好的影响.下面分析一两个方法的优缺点.