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

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

state = { num: 0 }; render() { return 
当前的num是{this.state.num}
; } // 从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 ( 
 
Child组件
 ) } } 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 ( 
 
 ) } } 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 ( 
 
Child组件 -- {age}
 { this.setState(state => ({ age: state.age + 1 })) }} > ++age++ 
 ) } } class App extends Component { constructor(props) { super(props) this.state = { age: 1 } } render() { return ( 
 
 ) } } 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 ( 
 
Child组件 -- {age}
 { this.setState(state => ({ age: state.age + 1 })) }} > ++ Child -- age ++ 
 ) } } 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 ( 
 
App组件 -- {age}
 { this.setState(state => ({ age: state.age + 1 })) }} > ++ App -- age ++ 
 ) } } 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 ( 
 
Child组件 -- {age}
 { this.setState(state => ({ age: state.age + 1 })) }} > ++ Child -- age ++ 
 ) } } 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 ( 
 
App组件 -- {age}
 {/* age大于1时销毁子组件 */} {age > 1 ? null : }  { this.setState(state => ({ age: state.age + 1 })) }} > ++ App -- age ++ 
 ) } } 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 
父亲传递过来的值b为：{this.props.b}
; } } 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 ( 
 
{this.props.num.data}
 ) } } class App extends Component { state = { num: { data: 1 }, name: '张三' } render() { console.log('app -- render') return ( 
 
{this.state.num.data}
 {/* 这时子组件会更新 */} {/*  this.setState({ num: { data: Date.now() } })}>++num++ */}  this.setState({ num: { data: 1 } })}>++num++
 ) } } 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 ( 
 
{this.props.num.data}
 ) } } class App extends Component { state = { num: { data: 1 }, name: '张三' } render() { console.log('app -- render') return ( 
 
{this.state.num.data}
 {/* 这时子组件会更新 */} {/*  this.setState({ num: { data: Date.now() } })}>++num++ */}  this.setState({ num: { data: 1 } })}>++num++
 ) } } export default App