React v16.9 中unsafe的生命周期函数

https://zh-hans.reactjs.org/b...

Unsafe的生命周期

  • componentWillMount → UNSAFE_componentWillMount

    • 没有用过,不描述
  • componentWillReceiveProps → UNSAFE_componentWillReceiveProps

    • 原因:

      • 在一次渲染周期内,props多次变化,造成该函数重复调用。
      • 父组件触发子组件重新渲染,即使props未变化,依然会调用该函数
    • 方案

      1. 在render中处理最终需要的渲染相关数据

        • componentShouldUpdate 仅处理 props 相关
        • 使用memoize
      2. 使用getDerivedStateFromProps,仅会在渲染前调用,返回值应用于state,不通过setState队列。

        • packagesreact-domsrcserverReactPartialRenderer.js
  • componentWillUpdate → UNSAFE_componentWillUpdate

    • 原因:

      • 设计用于保存组件在渲染前的状态,比如读取dom信息中的滚动值等。
      • 但实际中,可能会调用setState或者触发react-redux中的action
    • 方案

Image placeholder
yangqi
未设置
  87人点赞

没有讨论,发表一下自己的看法吧

推荐文章
React 基础_生命周期

组件的生命周期 挂载阶段 组件被创建,执行初始化,并被挂载到DOM中,完成组件的第一次渲染,依次调用的生命周期方法: constructor componentWillMount render com

React 生命周期变迁

React中组件提供了对应的生命周期支持, 定义组件的的方法: create-react-class模块 class类 它们之间的的区别这里就不展开了,具体可查看官方文档区别,我们继续说生命周

Laravel 底层分析:生命周期和容器 Container(第一部分)

本篇用于介绍Laravel5.6底层源码 最早加载的文件 一旦你打开某个网站,比如http://example.com,你的Web服务器(nginx,Apache,...)首先指向的是public目录

Vue生命周期挂钩简介

在本文中,我们来学习可用于VueJS工作流程的所有hooks。VueVueJS是一个非常先进的JavaScript框架,由尤雨溪和Vue核心团队创建,超过230个开源社区爱好者贡献了代码。Vue的用户

pymysql fetchone () , fetchall () , fetchmany ()

最近在用python操作mysql数据库时,碰到了下面这两个函数,标记一下: 1.定义 1.1fetchone(): 返回单个的元组,也就是一条记录(row),如果没有结果则返回None 1.2fet

css中ul怎么定位

css中ul怎么定位css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的cssposition属性即可。关于定位的几种方式1、static定位(普通流定位)--默认定

红帽OpenShift得到IBM、AWS和Azure的支持,生态能力正不断扩大

继IBM在11月6日宣布,IBMCloudPaks容器云的底层技术通过红帽OpenShift来支持后;AWS也于11月7日表示,原生集成AWS服务的红帽OpenShift容器平台已可用于由光环新网技术

weex和React Native的区别是什么?

weex简介:weex是阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的UI框架特点:Lightweight:轻量级,语法简单,易于使用Extendable:可扩展,丰富内置组件,可扩展的A

react native的优缺点是什么?

ReactNative使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。reactnative的

双11、TPC-C?OceanBase的征程在哪里?

蚂蚁金服自研的分布式关系数据库OceanBase登顶TPC-C一个月后,便迎来了2019年双11大考,团队相信“TPC-C只是双11的虚拟预演,双11才是一次真实场景的TPC-C。”OceanBase

echarts和vue的区别是什么?

echarts:ECharts,缩写来自EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/

bootstrap和vue的区别是什么?

Bootstrap是美国Twitter公司的设计师MarkOtto和JacobThornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,使得Web开发更加快捷

app.vue的作用是什么?

app.vue的作用是什么?app.vue可以当做是网站首页,是一个vue项目的主组件,页面入口文件,所有页面都是在App.vue下进行切换的。是整个项目的关键,app.vue负责构建定义及页面组件归

jquery和vue的区别是什么?

jquery和vue的区别是什么?●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作;和原生的js区别只在于可以更方便的选取和操作DOM对象;数据和界面

leveldb源代码分析系列1:MemTable的实现

MemTable及其实现这是一个第零层的主题,预计扩展如下第一层主题:1.1comparator介绍1.2skiplist实现介绍1.3数据压缩相关介绍1.4Put流程1.5Get流程leveldb中

云端的生存之道,第 1 单元:将 Spring Boot 部署到 Kubernetes

初始化Kubernetes集群 第一步是初始化IBMCloud上的Kubernetes集群。IBMCloud可能需要几分钟时间来启动新的Kubernetes集群;因此,通过先执行初始化操作,可以在后台

云端的生存之道,第 2 单元:将 Spring Boot 应用程序连接到云托管的数据库

前提条件 本系列教程的第1部分,因为本教程直接以第1部分中的课程内容和完成的操作为基础。 一个IBMCloud帐户 云原生数据持久性 IBMCloud提供了许多可持久存储数据的选项。在本教程中,我

GitHub 被墙后的生存之道

背景 从今天开始,陆陆续续看到很多小伙伴说Github登录不上去了,我当然也不例外,但对于我这样的重度Github使用者,这是无法接受的。 前提 首先SS是肯定可以解决我们的访问问题的,但是这里我不会

《Effective Go》中文翻译召集

《EffectiveGo》是学习Go编程必读的官方文档,内容包含对Go语法、技巧、编码风格等说明。文档永久地址:《高效的Go编程》欢迎正在学习Go的同学参与。如何参与?进入文档页面《高效的Go编程》

[憨读记 之 Effective Java] 01-用静态工厂方法代替构造器

书的第一章是创建和销毁对象,接下来的几篇也都是围绕这个展开。本篇对应书中的第一条:用静态工厂方法代替构造器。什么是静态工厂方法先看一个例子,Boolean类中有如下构造器publicBoolean(b

🚀 Hyperf 发布 v1.1.8 版本 | 企业级的 PHP 微服务云原生协程框架

更新内容 新增 #965新增RedisLua模块,用于管理Lua脚本; #1023hyperf/metric组件的Prometheus驱动新增CUSTOM_MODE模式; 修复 #1013修复Js

🚀 Hyperf 发布 v1.1.9 版本 | 企业级的 PHP 微服务云原生协程框架

更新内容 本周更新主要为DI组件新增了懒加载功能,配置为懒加载后,注入的对象为一个代理对象,在使用到时,才会实现对象的初始化。以及为DIContainer增加了set和define方法来动态的增加对象

🚀 Hyperf 发布 v1.1.9 版本 | 企业级的 PHP 微服务云原生协程框架

更新内容本周更新主要为DI组件新增了懒加载功能,配置为懒加载后,注入的对象为一个代理对象,在使用到时,才会实现对象的初始化。以及为DIContainer增加了set和define方法来动态的增加对象管

YOLO目标检测从V1到V3结构详解

本文主要内容是对YOLO系列进行综述目标检测评价指标IoU(Intersection-over-Union)指标IoU简称交并比,顾名思义数学中交集与并集的比例。假设有两个集合A与B,IoU即等于A与

波音737事故反思:该让数据“接管”生命控制权吗?

大数据文摘出品作者:林安安、蒋宝尚2018年10月29日,一架载有189名乘客和机组人员的印尼狮航波音737MAX8客机,在起飞13分钟后失联,随后被确认在西爪哇附近海域坠毁,机上人员全部遇难。截止到