一、生命周期钩子函数

  • 生命周期的概念：每个组件的实例，从创建、运行、到销毁，在这个过程中会出发一些列事件，这些事件就叫做组件的生命周期函数；
  • React组件生命周期分为三部分：
    • 组件创建阶段：
      • static 开头的 只会执行一次
      • constructor 构造器 只会执行一次
      • getDerivedStateFromProps: 当子组件接收到新的props会执行，作用：将传递的props映射到state里面 会执行多次
      • render 构建虚拟dom，但是此时虚拟dom还没有渲染到页面 会执行多次
      • componentDidMount: 组建的虚拟dom已经挂载到页面 只会执行一次
    • 组件运行阶段：根据 props 属性 或 state 状态的改变，有选择性的执行0到多次
      • getDerivedStateFromProps:组件将要接收到新的props属性
      • shouldComponentUpdate:组件是否需要被更新，返回值是true或者false。此时可以获取最新的props和state数据
      • render: 重新更新渲染组件的虚拟dom
      • getSnapshotBeforeUpdate：在最近一次渲染提交到 DOM 节点之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置），返回值将作为参数传递给componentDidUpdate
      • componentDidUpdate: 组件完成了更新，此时页面已经是最新的了
    • 组件销毁阶段：只执行一次
      • componentWillUnmount: 组件将要被销毁，此时组件还可以被使用1574654437154.png

React生命周期的回调函数总结成表格如下：
1574666830021.png

二、生命周期函数详解及defaultProps、类型校验

在组件创建之前，会先初始化默认的props属性，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。

  1. #1.Counter.jsx
  2. import React from 'react'
  3. import ReactTypes from 'prop-types'
  6. class Counter extends React.Component {
  7.     //----------------------------组件的创建阶段------------------------------------------
  8.     //1.生命周期第一个执行的是静态属性(只会执行一次)
  9.     //  静态属性：设置props的初始值(在使用当前组件的时候，没有给当前组件传递props的时候，该初始值会生
  10.   效)
  11.     static defaultProps = {
  12.         initcount: 1000
  13.     }
  14.     static propTypes = {
  15.         // 使用 prop-types 包 来定义 initcount 为 number 类型
  16.         // isRequired 表示这个props属性是必须要传递的
  17.         initcount: ReactTypes.number.isRequired
  18.     }
  20.     //2.生命周期第二个执行的是constructor 构造函数 (执行一次)
  21.     // 在创建组件对象的时候会自动调用构造函数
  22.     constructor(props) {
  23.         console.log("constructor")
  24.         super(props)
  25.         //在构造函数中指定组件的私有数据
  26.         this.state = {
  27.             count: props.initcount
  28.         }
  29.         this.divRef = React.createRef()
  30.     }
  32.     //3.当子组件接收到新的props会执行(执行多次)
  33.      `注意：在react16.4版本以后，setState修改state数据触发forceUpdate方法之后也会触发这个方法
  34.     此时当我们在componentDidUpdate方法中通过this.setState()方法修改state数据之后会导致页面
  35.         没有更新的bug，对应此bug，我们可以给state新增prevCount字段来解决`
  36.     // 在该方法中不能通过this.setSate来修改state数据,因为在static修饰的方法中就没有this
  37.     //作用：将传递的props映射到state里面
  38.     //参数： nextProps 外部传递过来的props属性
  39.     //      prevState 之前的state状态
  40.     static getDerivedStateFromProps(nextProps, prevState) {
  41.         console.log("getDerivedStateFromProps", nextProps, prevState)
  42.         //获取到父组件中传递过来的initcount值
  43.         const { initcount } = nextProps;
  44.         //当父组件中传递过来的initcount发生改变了
  45.         if (initcount != prevState.prevCount) {
  46.             //在方法中返回{count:initcount} 替换掉当前state中的 count值
  47.             return {
  48.                 count: initcount,
  49.                 prevCount:initcount
  50.             }
  51.         }
  52.         //如果父组件中传递过来的initcount没有变化，就返回一个空对象(此时不对当前的state做任何修改)
  53.         return null
  54.     }
  56.     //4.创建虚拟dom，但是虚拟dom还没有挂载到页面 (执行多次)
  57.     // render函数中不能使用setState()来修改state的数据，因为会死循环
  58.     render() {
  59.         console.log("render", this.divRef.current)  //null
  60.         return (<div ref={this.divRef}>
  61.             哈哈Counter {this.state.count}
  62.         </div>)
  63.     }
  65.     //5.虚拟dom已经挂载到页面，此时可以获取到最新的页面 (执行一次)
  66.     componentDidMount() {
  67.         console.log("componentDidMount", this.divRef.current, this.state)  //null
  68.     }
  71.     //----------------------------组件的运行阶段(执行多次)----------------------------
  72.     // 第一个会执行：static getDerivedStateFromProps
  73.     // 当父组件给子组件传递的props发生变化的时候，会执行该方法。
  74.     // 在react16.4版本以后，当前组件的state发生变化，会触发forceUpdate方法，然后还是会触发该方法
  76.     // 第二个会执行: shouldComponentUpdate
  77.     // 在这个函数中，我们可以设置指定条件下去更新页面，指定条件下不更新页面。这个函数中入参props和
  78. state都是最新的
  79.     // 在该方法中不能通过this.setSate来修改state数据
  80.     shouldComponentUpdate(nextProps, nextState) {
  81.         console.log("shouldComponentUpdate", nextProps, nextState)
  82.         // 在 shouldComponentUpdate 中要求必须返回一个布尔值
  83.         // 在 shouldComponentUpdate 中，如果返回的值是 false，则不会继续执行后续的生命周期函数，而
  84. 是直接退回到了运行中的状态，此时后续的render函数并没有被调用，因此页面不会被更新，但是组件的 state 状
  85. 态，却被修改了；
  86.         // return nextState.count % 2 == 0 ? true : false;
  87.         return true;
  88.     }
  90.     //第三个会执行:render  此时会重新构建虚拟dom，但是新的虚拟dom还没有渲染到页面
  92.     //第四个会执行getSnapshotBeforeUpdate 函数
  93.     // 在该方法中不能通过this.setSate来修改state数据
  94.     getSnapshotBeforeUpdate() {
  95.         console.log("getSnapshotBeforeUpdate")
  96.         return {}
  97.     }
  99.     //第五个执行componentDidUpdate 函数
  100.     // 在该方法中不能通过this.setSate来修改state数据
  101.     //表示组件已经更新完毕  此时可以获取到最新的页面
  102.     componentDidUpdate() {
  103.         console.log("componentDidUpdate", this.state)
  104.     }
  106.     //-------------------组件的销毁阶段--------------------------
  107.     componentWillUnmount() {
  108.         console.log("componentWillUnmount")
  109.     }
  110. }
  112. export default Counter;
  116. #App.jsx
  117. import React from 'react'
  119. import Counter from '@/components/Counter'
  121. class App2 extends React.Component {
  122.     constructor() {
  123.         super();
  125.         this.state = {
  126.             num:11
  127.         }
  128.     }
  130.     handlerClick=()=>{
  131.         this.setState({
  132.             num:111
  133.         })
  134.     }
  136.     render() {
  137.         return (<div>
  138.              App2
  139.              <Counter initcount={this.state.num}></Counter>
  140.              <button onClick={this.handlerClick}>点我该</button>
  141.         </div>)
  142.     }
  143. }
  145. export default App2;

三、getSnapshotBeforeUpdate方法

  1. #1.SnapshotSample.jsx
  2. import React from 'react'
  3. import cssobj from './snap.less'
  5. class SnapshotSample extends React.Component {
  6.     constructor(props) {
  7.         super(props);
  8.         this.state = {
  9.             messages: [],//用于保存子div
  10.         }
  11.     }
  13.     handleMessage() {//用于增加msg
  14.         this.setState(pre => ({
  15.             messages: [`msg: ${pre.messages.length}`, ...pre.messages],
  16.         }))
  17.     }
  18.     componentDidMount() {
  19.         for (let i = 0; i < 20; i++) this.handleMessage();//初始化20条
  20.         this.timeID = window.setInterval(() => {//设置定时器
  21.             if (this.state.messages.length > 200) {//大于200条，终止
  22.                 window.clearInterval(this.timeID);
  23.                 return;
  24.             } else {
  25.                 this.handleMessage();
  26.             }
  27.         }, 1000)
  28.     }
  29.     componentWillUnmount() {//清除定时器
  30.         window.clearInterval(this.timeID);
  31.     }
  33.    //很关键的，我们获取当前rootNode的scrollHeight，传到componentDidUpdate 的参数perScrollHeight
  34.    //在render方法调用之后，在componentDidUpdate之前执行，我们可以在这个方法中获取到元素的滚动位置的
  35.   信息
  36.    //还可以在该方法中做一些样式的微调
  37. getSnapshotBeforeUpdate() {
  38.     //console.log(this.rootNode.clientHeight)
  39.     //this.rootNode.style.backgroundColor = "red";
  40.     return this.rootNode.scrollHeight;
  41. }
  42. componentDidUpdate(perProps, perState, perScrollHeight) {
  43.     const curScrollTop = this.rootNode.scrollTop;
  44.     if (curScrollTop < 5) return;
  45.     this.rootNode.scrollTop = curScrollTop + (this.rootNode.scrollHeight - perScrollHeight);
  46.     //加上增加的div高度，就相当于不动
  47. }
  48.     render() {
  49.         return (
  50.             <div className={cssobj.wrap} ref={node => (this.rootNode = node)} >
  51.                 {this.state.messages.map(msg => (
  52.                     <div key={msg}>{msg} </div>
  53.                 ))}
  54.             </div>
  55.         );
  56.     }
  57. }
  59. export default SnapshotSample;
  62. #2.snap.less
  63. .wrap{
  64.     height: 100px;
  65.     width :200px;
  66.     padding: 1px solid #eee;
  67.     overflow:auto;
  68. }
  71. #3.App.jsx
  72. import React from 'react'
  74. import SnapshotSample from '@/components/SnapshotSample'
  76. class App2 extends React.Component {
  77.     constructor() {
  78.         super();
  80.         this.state = {
  81.             num:11
  82.         }
  83.     }
  85.     handlerClick=()=>{
  86.         this.setState({
  87.             num:111
  88.         })
  89.     }
  91.     render() {
  92.         return (<div>
  93.              App2
  94.              <SnapshotSample></SnapshotSample >
  95.         </div>)
  96.     }
  97. }
  99. export default App2;