aurora blog
  • JS

    • 基本汇总
    • Date时间
    • Array方法
    • String 方法
    • Object方法
    • RegExp正则
    • Es6 新特性等
    • Event-Loop
    • Http and Https
    • for in和for of区别
    • Web Worker
    • Promise && async
    • 堆内存 & 栈内存
    • JS设计模式探索
    • npm & yarn
    • Fetch和Axios的区别
    • 学习及面试问题整理
    • URL 输入到页面加载过程
    • 跨域&nginx本地项目代理
  • FE框架

    • react

      • 基本用法
      • react生命周期
      • hooks 16.8版本后
      • Route原理
      • Redux源码解析
      • React16 Fiber
      • React-VirtualDOM
      • React事件委托机制
    • vue

      • vue 基本用法
      • vue 生命周期
      • VirtualDOM
      • vue 事件委托
      • vue 架构
      • vue 状态管理
      • 问题等
    • React-Native

      • React-Native 基本用法
    • 微前端

      • 遇到的问题
    • 鸿蒙 harmony

      • harmony 基础
  • 构建工具

    • webpack

      • Webpack配置详解
      • Webpack的使用
      • Babel-polyfill
      • webpack面试题
    • vite

      • vite基本配置
  • Typescript

    • Typescript详解
  • Servers

    • Nodejs
    • Nginx
  • Git命令

    • git常用规范
  • 数据库

    • mongodb
    • mongodb
  • Other

    • Jenkins自动化部署

react生命周期

  • 挂载阶段
  • 更新阶段
  • 卸载阶段
  • getDerivedStateFromProps(nextProps, prevState)
  • componentDidCatch(err,info)

solar

挂载阶段

  • 首次render之后调用componentDidMount,其它render结束之后都是调用componentDidUpdate(更新阶段)
componentWillMount()   
在组件挂载之前调用,且全局只调用一次
componentDidMount()
在组件挂载完成后调用,且全局只调用一次。
可以在这里使用refs,获取真实dom元素

更新阶段

  • setState引起的state更新或父组件重新render引起的props更新
  • 更新后的state和props相对之前无论是否有变化,都将引起子组件的重新render
//props发生变化以及父组件重新渲染时都会触发
componentWillReceiveProps(nextProps )   nextProps获取变化后的props参数
  • 优化性能
  • 调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。
shouldComponentUpdate(nextProps,nextState)    默认返回true,需要重新render
  • 组件即将被更新时触发
  • shouldComponentUpdate返回true或者调用forceUpdate之后 , 会被调用
componentWillUpdate(nextProps,nextState)   (不能在该钩子中setState,否则会触发重复循环)
  • 此方法在组件更新后被调用
componentDidUpdate(prevProps, prevState)   (setState可能会触发重复渲染)
可以操作组件更新的DOM,prevProps和prevState这两个参数指的是组件更新前的props和state

卸载阶段

  • 此方法在组件被卸载前调用
componentWillUnmount()  
清除组件中使用的定时器、清除componentDidMount中手动创建的DOM元素等等,以避免引起内存泄漏

solar

getDerivedStateFromProps(nextProps, prevState)

这个方法在 render() 之后,componentDidUpdate() 之前调用。
该方法传入的两个参数:prevProps表示更新前的 props,prevState表示更新前的 state
返回值称为一个快照(snapshot),如果不需要 snapshot,
则必须显示的返回 null —— 因为返回值将作为 componentDidUpdate() 的第三个参数使用。
所以这个函数必须要配合 componentDidUpdate() 一起使用。

componentDidCatch(err,info)

任何子组件在渲染期间,生命周期方法中或者构造函数 constructor 发生错误时调用。
两个参数:err表示抛出的错误,info表示带有componentStack key的对象,其中包含有关组件引发错误的栈信息。
最近更新:: 2022/8/2 13:49
Contributors: sountstars, liyulai
Prev
基本用法
Next
hooks 16.8版本后