React生命周期函数深入全面介绍

constructor(props) {
    // 如果你在定义组件中有定义构造函数，则一定要调用super方法来调用父类的构造函数
    super(props)
    // todo …
}

state = {
    num: 0
};
render() {
    return <div>当前的num是{this.state.num}</div>;
}
// 从props中获取数据，绑定到当前的这个组件中的state
// nextProps 父组件传递过来的整个props对象，即当前最新的props数据
// prevState 当前组件中的状态对象state，即当前最新的state数据,但暂时不包含返回值中要对state修改的值
static getDerivedStateFromProps(nextProps, prevState) { 
     // 不需要更新当前state
     return null 
}

import React, { Component } from 'react'
class Child extends Component {
  constructor(props) {
    super(props)
    this.state = { num: 100 }
    console.log('child --- constructor')
  }
  // 快捷输入 gdsfp
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log('child --- getDerivedStateFromProps')
    // nextState: 当前最新的state数据,暂时不包含你返回值中要对state修改的值
    console.log(nextProps, nextState)
    return { name: '张三' }
  }
  render() {
    return (
      <div>
        <h3>Child组件</h3>
      </div>
    )
  }
}
class App extends Component {
  constructor(props) {
    super(props)
    this.state = { age: 1 }
    // 父组件先执行后子组件执行此方法  app -> child
    console.log('App --- constructor')
  }
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log('App --- getDerivedStateFromProps')
    return null
  }
  render() {
    return (
      <div>
        <Child name='李四' />
      </div>
    )
  }
}
export default App

import React, { Component } from 'react'
class Child extends Component {
  constructor(props) {
    super(props)
    this.state = { name: '张三' }
  }
  // 快捷输入 gdsfp
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log('child --- getDerivedStateFromProps')
    // 如果你想用此方法,把props中的属性数据,追加到state中,后续能修改,则这样的操作,你要确保只执行1次
    // 这种方式只能接收到父组件第一次值过来的值（10），点击按钮子组件age并不会增加
    // 这是因为每次点击增加按钮都会触发当前函数，将state中的age修改为nextProps
    // return nextProps // 这种方式不会触发点击按钮增加age值
    if (nextState.flag != 1) {
      return { ...nextProps, flag: 1 }
    }
    return null
  }
  render() {
    let { age } = this.state
    return (
      <div>
        <h3>Child组件 -- {age}</h3>
        <button
          onClick={() => {
            this.setState(state => ({ age: state.age + 1 }))
          }}
        >
          ++age++
        </button>
      </div>
    )
  }
}
class App extends Component {
  constructor(props) {
    super(props)
    this.state = { age: 1 }
  }
  render() {
    return (
      <div>
        <Child age={10} />
      </div>
    )
  }
}
export default App

import React, { Component } from 'react'
class Child extends Component {
  constructor(props) {
    super(props)
    this.state = { name: '张三' }
    console.log('child --- constructor')
  }
  // 快捷输入 gdsfp
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log('child --- getDerivedStateFromProps')
    if (nextState.flag != 1) {
      return { ...nextProps, flag: 1 }
    }
    return null
  }
  // 它只执行1次
  // 虚拟dom挂载到真实的页面点中完成,在此进行dom操作
  // 在此可以进行网络请求
  componentDidMount() {
    console.log('child -- componentDidMount')
  }
  // ------------- 更新时
  // prevProps 修改之前的props数据
  // prevState 修改之前的state数据
  // 此方法要有一个返回值,且如果有此方法,则必须要有componentDidUpdate
  // 此方法的返回值,会在componentDidUpdate参数3中接受
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('child --- getSnapshotBeforeUpdate')
    return 100
  }
  // 数据更新完毕后执行
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('child --- componentDidUpdate', snapshot)
  }
  render() {
    console.log('child -- render')
    let { age } = this.state
    return (
      <div>
        <h3>Child组件 -- {age}</h3>
        <button
          onClick={() => {
            this.setState(state => ({ age: state.age + 1 }))
          }}
        >
          ++ Child -- age ++
        </button>
      </div>
    )
  }
}
class App extends Component {
  constructor(props) {
    super(props)
    this.state = { age: 1 }
    console.log('App --- constructor')
  }
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log('App --- getDerivedStateFromProps')
    return null
  }
  componentDidMount() {
    console.log('App -- componentDidMount')
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('App --- getSnapshotBeforeUpdate')
    return 200
  }
  // 数据更新完毕后执行
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('App --- componentDidUpdate', snapshot)
  }
  render() {
    let { age } = this.state
    console.log('App -- render')
    return (
      <div>
        <h3>App组件 -- {age}</h3>
        <Child age={age} />
        <button
          onClick={() => {
            this.setState(state => ({ age: state.age + 1 }))
          }}
        >
          ++ App -- age ++
        </button>
      </div>
    )
  }
}
export default App

import React, { Component } from 'react'
class Child extends Component {
  constructor(props) {
    super(props)
    this.state = { name: '张三' }
  }
  // 快捷输入 gdsfp
  static getDerivedStateFromProps(nextProps, nextState) {
    if (nextState.flag != 1) {
      return { ...nextProps, flag: 1 }
    }
    return null
  }
  // 销毁组件时执行
  componentWillUnmount() {
    console.log('child --- componentWillUnmount')
  }
  render() {
    let { age } = this.state
    return (
      <div>
        <h3>Child组件 -- {age}</h3>
        <button
          onClick={() => {
            this.setState(state => ({ age: state.age + 1 }))
          }}
        >
          ++ Child -- age ++
        </button>
      </div>
    )
  }
}
class App extends Component {
  constructor(props) {
    super(props)
    this.state = { age: 1 }
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('App --- getSnapshotBeforeUpdate')
    return 200
  }
  // 数据更新完毕后执行
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('App --- componentDidUpdate', snapshot)
  }
  render() {
    let { age } = this.state
    return (
      <div>
        <h3>App组件 -- {age}</h3>
        {/* age大于1时销毁子组件 */}
        {age > 1 ? null : <Child age={age} />}
        <button
          onClick={() => {
            this.setState(state => ({ age: state.age + 1 }))
          }}
        >
          ++ App -- age ++
        </button>
      </div>
    )
  }
}
export default App

shouldComponentUpdate(nextProps, nextState) {
    // 判断是否需要被渲染，如果需要则返回true，否则返回false 
    if (nextProps.b === this.props.b) {
        return false;
    } else {
        return true;
    }
}
// 简化方法：只需要将类组件的继承关系改成继承`PureComponent`即可，这样一来，框架会自动判断值是否有变化进一步决定组件是否需要被渲染。
import React, { PureComponent } from "react";
class Cmp extends PureComponent {
    render() {
        console.log("Cmp被渲染了");
        return <div>父亲传递过来的值b为：{this.props.b}</div>;
    }
}
export default Cmp

import React, { Component, PureComponent } from 'react'
// PureComponent 它可以对于组件无效渲染起到一定的优化,但是它只能针对于props中值为基本类型
// 可以使用生命周期中提供的优化方案,提升无效渲染次数
// class Child extends PureComponent {
class Child extends Component {
  // 此方法,用于组件重复渲染的优化方法,它不是必须要用的
  // 此方法必须要有一个boolean返回值
  // 此方法只有在更新时才会触发
  // true 则继续向下渲染  render
  // false 表示当前不会继续渲染,从而减少无用渲染,提升性能
  // nextProps 最新的props数据   this.props 之前的props数据
  // nextState 最新的state数据   this.state 之前的state数据
  shouldComponentUpdate(nextProps, nextState) {
    // 针对于要比较的字段进行判断
    if (this.props.num.data === nextProps.num.data) {
      return false
    }
    return true
  }
  render() {
    console.log('child -- render')
    return (
      <div>
        <h3>{this.props.num.data}</h3>
      </div>
    )
  }
}
class App extends Component {
  state = {
    num: { data: 1 },
    name: '张三'
  }
  render() {
    console.log('app -- render')
    return (
      <div>
        <h3>{this.state.num.data}</h3>
        <Child num={this.state.num} />
		{/* 这时子组件会更新 */}
        {/* <button onClick={() => this.setState({ num: { data: Date.now() } })}>++num++</button> */}
        <button onClick={() => this.setState({ num: { data: 1 } })}>++num++</button>
      </div>
    )
  }
}
export default App

import React, { Component, PureComponent } from 'react'
import _ from 'lodash'
class Child extends Component {
  // 此方法,用于组件重复渲染的优化方法,它不是必须要用的
  // 此方法必须要有一个boolean返回值
  // 此方法只有在更新时才会触发
  // true 则继续向下渲染  render
  // false 表示当前不会继续渲染,从而减少无用渲染,提升性能
  shouldComponentUpdate(nextProps, nextState) {
    // 深层比对,它比对的是对象中属性的值,如果全局的值一样则为true,否则为false
    return !_.isEqual(this.props, nextProps)
  }
  render() {
    console.log('child -- render')
    return (
      <div>
        <h3>{this.props.num.data}</h3>
      </div>
    )
  }
}
class App extends Component {
  state = {
    num: { data: 1 },
    name: '张三'
  }
  render() {
    console.log('app -- render')
    return (
      <div>
        <h3>{this.state.num.data}</h3>
        <Child num={this.state.num} />
        {/* 这时子组件会更新 */}
        {/* <button onClick={() => this.setState({ num: { data: Date.now() } })}>++num++</button> */}
        <button onClick={() => this.setState({ num: { data: 1 } })}>++num++</button>
      </div>
    )
  }
}
export default App