生命周期



插槽

组件中间内容用this.props.children访问

是否组件更新

shouldcompontsupdata(props,newstatus){

return false;

}

父组件更新

componentswillreceiveprops(nextprop)周期更新

在这个生命周期里可以最早拿到最新的props数据

React中的componentWillReceiveProps 的升级版本是: static getDerivedStateFromProps。

getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。

getSnapshotBeforeUpdate()方法在呈现DOM之前被调用。用于在DOM更新后存储状态的先前值。

getSnapshotBeforeUpdate()方法返回的任何值都将用作componentDidUpdate()方法的参数。此函数始终与componentDidUpdate()方法一起使用,反之亦然。

用法:

getSnapshotBeforeUpdate(prevProps, prevState)

参数:它接受两个参数,它们是prevProps和prevState只是相关组件为re-rendered之前的道具或状态。

react 学习笔记更新的更多相关文章

  1. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  2. React学习笔记(五)State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  3. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  4. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  5. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  6. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  7. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  8. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  9. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  10. React学习笔记 - Hello World

    React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...

随机推荐

  1. 浅谈Java线程池的概念、创建与执行

    转': 浅谈Java线程池的概念.创建与执行 如果使用 newCachedThreadPool   线程池的实例: ExecutorService executor = Executors.newCa ...

  2. springmvc引入swagger2

    swagger2 简介 ​ API Developmentfor Everyone. ​ Simplify API development for users, teams, and enterpri ...

  3. 【SSO单点系列】(5):CAS4.0 之JDBC

    deployerConfigContext.xml 修改对应添加以下代码 <bean id="SearchModeSearchDatabaseAuthenticationHandler ...

  4. Python全栈学习笔记---正则表达式(二)

    匹配(matching):判断一个字符串能否从起始位全部或部分的匹配某个模式 搜索(seaching):在字符串任意部分中搜索 1.1.特殊字符 注:若要匹配这些字符本身,在其前面加 '\' 1.2. ...

  5. TM1621断码液晶驱动IC的原理、驱动代码

    TM1621是一个多功能的LCD驱动器,带有蜂鸣器驱动功能.通讯采用四线串行接口 TM1621的难点在于字节序和显存跟屏幕的映射关系上,下面是写寄存器的代码 void Delay_us(uint8_t ...

  6. shell语法6-exit命令、文件重定向、引入外部脚本

    一.exit命令 exit命令用来退出当前shell进程,并返回一个退出状态:使用$?可以接收这个退出状态.exit命令可以接受一个整数值作为参数,代表退出状态.如果不指定,默认状态值是 0.exit ...

  7. vue获取不到页面图片实际宽高

    在某些情况下需要页面图片的宽高,使用Image获取加载图片获取图片宽高时为0,是因为图片未加载完返回宽高为0 如果未获取到宽高需要使用定时器定时获取图片,直到获取到后再清除定时器 示例代码: // n ...

  8. (二)用go实现二叉查找树

    本篇,我们用go简单的实现二叉查找树. 1.节点定义 type BSNode struct{ data int left, right, parent *BSNode } 2.前序遍历 func (p ...

  9. 使用viper读取配置文件

    配置文件config.yml mysql: type: mysql dsn: "user:pass@tcp(localhost:30306)/db_name?charset=utf8& ...

  10. CAD梦想看图手机版20211101更新(手机版CAD软件)

    CAD梦想看图手机版20211101更新(手机版CAD软件)1. 新界面风络2. 增加图块库功能3. 适配Android 114. 修改图块中的,多线义线的线型可能显示不对问题5. 修改图块中套用图块 ...