React 的生命周期

1.初始化阶段

1.1 componentWillMount()

在render之前执行,在这个函数中可以进行渲染之前的最后一次 state 修改

import React, { Component } from "react";
export default class App extends Component {
  state = {
      text:"人生自古谁无死,留取丹心照汗青"
  };
  render() {
    return <div>{this.state.text}</div>;
  }
  componentWillMount(){
      this.setState({
          text:"生亦何欢,死亦何苦,喜乐悲愁,皆归尘土"
      })
  }
}

1.2 render ()

只能访问 this.props 和 this.state ,不能进行状态的修改和DOM输出

import React, { Component } from "react";
export default class App extends Component {
  state = {
    text: "人生自古谁无死,留取丹心照汗青",
  };
  render() {
    return (
      <div>
        <Child  parentText={'小楼昨夜又东风,故国不堪回首月明中'}></Child>
      </div>
    );
  }
  componentWillMount() {
    this.setState({
      text: "生亦何欢,死亦何苦,喜乐悲愁,皆归尘土",
    });
  }
}

class Child extends Component {
  state = {
      text:"春花秋月何时了,往事知多少?",
      errorText:''
  };
  render() {
  // 此处不能进行状态的修改,因为 setState 会引发 render函数的执行,如果在 render 函数里面进行 state 修改,就会引发死循环,Maximum update depth exceeded. 
  // this.setState({
    //     errorText:"雕栏玉砌应犹在,只是朱颜改"
    // })
    return <div>
    // 在这里可以访问 状态和属性
        <p>{this.state.text}</p>
        <p>{this.props.parentText}</p>
    </div>;
  }
}

1.2 componentDidMount()

执行 render() 函数之后并完成真实DOM的渲染之后触发,可以获取到DOM

import React, { Component } from "react";
export default class App extends Component {
  render() {
    return (
      <div>
          <p id="p_tag">问君能有几多愁?恰是一江春水向东流</p>      </div>
    );
  }
  componentDidMount(){
    console.log(document.getElementById('p_tag').innerText) //问君能有几多愁?恰是一江春水向东流
  }
}

1.4 componentWillReceiveProps()

父组件修改属性是触发

import React, { Component } from "react";
export default class App extends Component {
  state = {
    text: "人生自古谁无死,留取丹心照汗青",
  };
  render() {
    return (
      <div>
          <p id="p_tag" onClick={()=>{
              this.setState({
                  text:"小楼昨夜又东风,故国不堪回首月明中"
              })
          }}>问君能有几多愁?恰是一江春水向东流</p>
        <Child  parentText={this.state.text}></Child>
      </div>
    );
  }
}

class Child extends Component {
  state = {
      text:"",
  };
  render() {
    return <div>
    // 小楼昨夜又东风,故国不堪回首月明中---李煜
        <p>{this.state.text}</p>
    </div>;
  }
  componentWillReceiveProps(nextProps){
   console.log('nextProps',nextProps);
   this.setState({
       text:nextProps.parentText+"---李煜"
   })
  }
}

1.5 shouldComponentUpdate()

返回值决定是否进行render的调用,例如当点击tab切换需要进行展示数据切换,那么我们在多次点击同一个tab 时也会执行 setState() ,会执行 render 函数 ,但是我们的数据并没有变化,在数据没有改变的情况下,多次执行 render 函数,显然是不友好的,此时,我们就可以使用 shouldComponentUpdate 在做判断,是否需要执行render 函数,在shouldComponentUpdate()里面可以访问到 this.state 和 this.props ,并且接收两个形参,使我们可以访问到 nextPoprs 和 nextState ,(我觉得这个可以参考 VUE 的监听来做理解),在这个方法里面我们可以访问到 state 和 props 的新值和旧值 ,我们可以根据新值与旧值得对于来判断是否需要重新执行 render 函数

  shouldComponentUpdate(nextProps,nextState){
      return JSON.stringify(nextState)==JSON.stringify(nextState)
  }

1.6 componentWillUpdate()

组件即将更新, 在render()函数钱执行,不能进行状态和属性的更改,可以拿到 nextProps 和 nextState

1.7 componentDidUpdate()

可以进行DOM的修改

1.8 componentWillUnmount()

组件即将被卸载,可以在这个函数里面清除定时器和事件监听,如果有熟悉 VUE 的小伙伴,可以参考VUE 的 beforeDestroy 来理解

import React, { Component } from "react";
export default class App extends Component {
  state = {
      isShow:true
  };
  render() {
    return <div>
        <button onClick={()=>{
          this.setState({
              isShow:false
          })
        }}>移除</button>
        {this.state.isShow && <Child></Child>}
    </div>;
  }
}

class Child extends Component {
  render() {
    return <div>凭阑半日独无言,依旧竹声新月似当年</div>;
  }
  componentDidMount(){
    window.onresize=()=>{
        console.log(888);
    }
  }
  componentWillUnmount(){
      console.log('唉,我要被移除了');
      window.onresize=null;

  }
}

老生命周期存在的问题

componentWillMount

在 ssr 中会被多次调用,所以出触发多次,如果在这里进行事件绑定,将无法解绑,会造成内存泄漏,变得不够安全高效,逐步废弃.

componentWillReceiveProps

外部组件多次频繁的传入不同的props,会导致多次不必要的异步请求,逐步废弃

componentWillUpdate

更新前记录DOM的状态,可能会做一些处理,与componentDidUpdate 之间相隔时间如果过长,会导致状态不可信

新的生命周期

getDerivedStateFromProps

第一次初始化组件以及后续的更新过程(自身状态的更新和父组件引起的更新)会返回一个对象作为新的 state,如果返回 null 则说明不需要进行 state 的更新,在这里可以拿到 nextProps 和nextState,最新的 props 和 state, 这个方法是静态方法,静态方法的 this 指向这个类,而不是实例

import React, { Component } from "react";
export default class App extends Component {
  state = {
    name: "test",
  };
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              name: "my love",
            });
          }}
        >
          change
        </button>
        <p>{this.state.name}</p>
        <p>{this.state.sex}</p>
      </div>
    );
  }
  //   在render之前修改 state
  //   可以对展示值做统一操作
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log(nextProps, nextState);
    return {
      name: nextState.name.toUpperCase(),
    };
  }
}

getSnapshotBeforeUpdate

取代了componentWillUpdate 函数,触发时间是 update 发生的时候,在 render 之后 DOM渲染之前 返回一个值,返回的这个值 作为 componentDidUpdate 的第三个参数

import React, { Component } from "react";
import "./css/02-案例选项卡.css";
export default class App extends Component {
  state = {
    list: [
      1, 2, 34, 5, 6, 7, 78, 8, 9, 3, 4, 5, 5, 8942, 4234, 432, 43, 424, 533,
      788, 534, 423, 534,
    ],
  };
  myref=React.createRef()
  render() {
    return (
      <div className="snapshot_wrap">
        <button
          onClick={() => {
            let newList = [];
            for (let index = 0; index < 20; index++) {
              newList.push(`花明月暗笼轻雾,今宵好向郎边去.刬袜步香阶，手提金缕鞋.${index + 1}`);
            }
            this.setState({
              list: [...newList, ...this.state.list],
            });
          }}
        >
          添加邮件
        </button>
        <h1>邮箱应用</h1>
        <ul id="box" ref={this.myref}>
          {this.state.list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
  getSnapshotBeforeUpdate(){
    return  this.myref.current.scrollTop
  }
  componentDidUpdate(prevProps, prevState, snapshot){
    console.log(snapshot,this.myref.current.scrollHeight);
    this.myref.current.scrollTop+=this.myref.current.scrollHeight-snapshot
  }
}