前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

React16.3新的生命周期详解

首页
2018-11-18 23:30:12
Front-End
React生命周期

# 一、React v16.0前的生命周期

# 1.1 第一个是组件初始化(initialization)阶段

也就是以下代码中类的构造方法( constructor() ),Test类继承了react Component这个基类,也就继承这个react的基类,才能有render(),生命周期等方法可以使用,这也说明为什么函数组件不能使用这些方法的原因

super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件,功子组件读取(组件中props只读不可变,state可变)而constructor()用来做一些组件的初始化工作,如定义this.state的初始内容

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}
@前端进阶之旅: 代码已经复制到剪贴板

# 1.2 第二个是组件的挂载(Mounting)阶段

此阶段分为componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate

# 1.2.1 componentWillMount

在组件挂载到DOM前调用,且只会被调用一次,在这边调用this.setState不会引起组件重新渲染,也可以把写在这边的内容提前到constructor()中,所以项目中很少用

# 1.2.2 render

根据组件的props和state(无两者的重传递和重赋值,论值是否有变化,都可以引起组件重新render) ,return 一个React元素(描述组件,即UI),不负责组件实际渲染工作,之后由React自身根据此元素去渲染出页面DOM。render是纯函数(Pure function:函数的返回结果只依赖于它的参数;函数执行过程里面没有副作用),不能在里面执行this.setState,会有改变组件状态的副作用

# 1.2.3 componentDidMount

组件挂载到DOM后调用,且只会被调用一次

# 1.3 第三个是组件的更新(update)阶段

setState引起的state更新或父组件重新render引起的props更新,更新后的state和props相对之前无论是否有变化,都将引起子组件的重新render

# 1.3.1 造成组件更新有两类(三种)情况

1. 父组件重新render

父组件重新render引起子组件重新render的情况有两种

  • a. 直接使用,每当父组件重新render导致的重传props,子组件将直接跟着重新渲染,无论props是否有变化。可通过shouldComponentUpdate方法优化
class Child extends Component {
   shouldComponentUpdate(nextProps){ // 应该使用这个方法,否则无论props是否有变化都将会导致组件跟着重新渲染
        if(nextProps.someThings === this.props.someThings){
          return false
        }
    }
    render() {
        return 
fe
  • 一、React v16.0前的生命周期
    • 1.1 第一个是组件初始化(initialization)阶段
    • 1.2 第二个是组件的挂载(Mounting)阶段
      • 1.2.1 componentWillMount
      • 1.2.2 render
      • 1.2.3 componentDidMount
    • 1.3 第三个是组件的更新(update)阶段
      • 1.3.1 造成组件更新有两类(三种)情况
      • 1.3.2 componentWillReceiveProps(nextProps)
      • 1.3.3 shouldComponentUpdate(nextProps, nextState)
      • 1.3.4 componentWillUpdate(nextProps, nextState)
      • 1.3.5 componentDidUpdate(prevProps, prevState)
    • 1.4 卸载阶段
  • 二、React v16.4 的生命周期
    • 2.1 变更缘由
    • 2.2 引入了两个新的生命周期函数
      • 2.2.1 getDerivedStateFromProps
      • 2.2.2 getSnapshotBeforeUpdate
  • 三、参考

← pm2使用小结React性能优化总结 →