react 常用生命周期

componentDidMount() 方法会在组件已经render()之后执行，这里可以对dom进行操作，编写加载服务器的数据。

componentWillReceiveProps(nextProps) 初始化render时不会执行，只有当父组件传给当前组件的值发生变化才会执行，可以根据属性变化，调用this.setState()来更新子组件，

这里调用更新状态是安全的，并不会触发额外的render调用，如果在这里进行数据请求，它只会在该组件渲染时才会发出，从而减轻请求负担

shouldComponentUpdate 在接收到新props或state时，或者说在componentWillReceiveProps(nextProps)后触发，这个函数不写默认会重新渲染，在这个函数写return false props或state发生变化阻止组件重新渲染

 

如果shouldComponentUpdate(nextProps, nextState)返回false, 那么componentWillUpdate(nextProps, nextState), render(), componentDidUpdate()都不会被触发;

 

componentWillUnmount 在组件卸载(unmounted)或销毁(destroyed)之前 这个方法可以让你处理一些必要的清理操作，比如无效的timers、interval，或者取消网络请求，或者清理任何在componentDidMount()中创建的DOM元素(elements);

 

componentWillReceiveProps--案例

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            random:Math.random(),
        }
        this.handleClick = this.handleClick.bind(this);
    }
    tmpPerson = {name:'张三'}
    handleClick(){
        this.tmpPerson.name+='1';
        this.setState({random:Math.random()})
    }
    render() {
        const _this = this;
        return (
            <div classsName="App">
                <button onClick={this.handleClick}>修改名称</button>
                <Demo person={{...this.tmpPerson}}></Demo>
                {/* {...this.tmpPerson}是对 this.tmpPerson的深拷贝，修改值不会影响原始值，传给组件对象值会变化，则输出值不同*/}
                {/* <Demo person={this.tmpPerson}></Demo> this.tmpPerson则是引用对象，地址没变，传给子组件的是同一个对象不会变化，则输出值相同*/ }
            </div>
        )
    }
}

export default App;
class Demo extends Component{
    static propTypes={
        person:PropTypes.any,
    }
    static defaultProps={
        person:{name:'person对象名'}
       }
    constructor(props) {
        super(props);
    };
    componentWillReceiveProps(nextProps){
        console.log(`--this.props-->${JSON.stringify(this.props)}`);
        console.log(`--nextProps-->${JSON.stringify(nextProps)}`);
        // --this.props-->{"person":{"name":"张三"}}
        // --nextProps-->{"person":{"name":"张三1"}}
    }
    render(){
     return(
          <h2>姓名：{this.props.person.name}</h2>
          )
          
    }
}

 

shouldComponentUpdate--案例

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            num:0,
            title:'react shouldComponentUpdate study',
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
        this.setState({
            num:this.state.num+1
        })
    }
    render() {
        const _this = this;

        return (
            <div classsName="App">
                <h2>App,{this.state.num}</h2>
                <button onClick={this.handleClick}>btn0</button>
                <Demo title={this.state.title}></Demo>
            </div>
        )
    }
}

export default App;
class Demo extends Component{
    shouldComponentUpdate(nextProps){ //加了这段代码更新num值不会渲染这个组件，否则就会渲染
        if(nextProps.title===this.props.title){
            return false;
        }
    }
    render(){
     console.log("demo 执行中")
     return(
          <h2>demo,{this.props.title}</h2>
          )
          
    }
}

 全生命周期--案例

import React, { Component } from 'react';
import {actions} from 'mirrorx';

class App extends Component{
    constructor(props) {
        console.log("parent constructor")
        super(props);
        this.state = {
            val:0
        }
    }
    componentWillMount(){
        console.log("parent will mount")
    }
    componentDidMount(){
        console.log("parent did mount")
    }
    componentWillReceiveProps(nextProps){
        console.log("parent will receive props")
    }
    shouldComponentUpdate(){
        console.log('parent should update')
        return true
    }
    componentWillUpdate(){
        console.log("parent will update")

    }
    componentDidUpdate(){
        console.log("parent did update")
    }
    componentWillUnmount(){
        console.log("parent will unmount")
    }
    batchUpdates = () => {
        this.setState({ val: this.state.val + 1 })
     }
   
    render(){
        console.log("parent render");
        return (<div onClick={this.batchUpdates}>
                    {this.state.val}
                    <div>{this.props.age}</div>
                    <Child test={this.props.age}/>
                </div>)
        }
}
export default App

class Child extends Component{
    constructor(props) {
        console.log("child constructor")
        super(props);
    }
    componentWillMount(){
        // actions.app.updateState({age:345});
        console.log("child will mount")
    }
    componentDidMount(){
        
        console.log("child did mount")
    }
    componentWillReceiveProps(nextProps){
        console.log("child will receive props")
    }
    shouldComponentUpdate(){
        console.log('child should update');
        return true
    }
    componentWillUpdate(){
        console.log("child will update")
    }
    componentDidUpdate(){
        console.log("child did update")
    }
    componentWillUnmount(){
        console.log("child will unmount")
    }
    render(){
        console.log("child render");
        return(
            <div>Child
                <div>{this.props.test}</div>
            </div>
        )
    }
  }

控制台直接输出结果

parent constructor
parent will mount
parent render
child constructor
child will mount
child render
child did mount
parent did mount

父级点击后执行batchUpdates 方法，输出结果

parent should update
parent will update
parent render
child will receive props
child should update
child will update
child render
child did update
parent did update

子级放开注释代码actions.app.updateState({age:345})，输出结果

parent constructor
parent will mount
parent render
child constructor
child will mount
child render
child did mount
parent did mount
parent will receive props
parent should update
parent will update
parent render
child will receive props
child should update
child will update
child render
child did update
parent did update