React 记录(6)
React文档:https://www.reactjscn.com/docs/react-component.html
慢慢学习:对照教程文档,逐句猜解,截图
React官网:https://reactjs.org
React中文网站:https://www.reactjscn.com
Github地址:https://github.com/facebook/react
React 技术栈系列教程:http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
生命周期
组件的生命周期分成三个状态:
- 创建阶段(Mounting):已插入真实 DOM
- 更新阶段(Updating):正在被重新渲染
- 卸载阶段(Unmounting):已移出真实 DOM
从 React v16 开始,还对生命周期加入了错误处理(Error Handling)
参考:重新认识 React 生命周期
参考:基础|图解ES6中的React生命周期
参考:React 组件生命周期
参考:简述 React 组件生命周期
参考:如何通俗易懂地解释React生命周期方法?
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
- componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
React 16.3 新增的生命周期方法
- getDerivedStateFromProps()
- getSnapshotBeforeUpdate()
虽然废弃了这三个生命周期方法,但是为了向下兼容,将会做渐进式调整。(详情见#12028)
V16.3 并未删除这三个生命周期,同时还为它们新增以
UNSAFE_
前缀为别名的三个函数UNSAFE_componentWillMount()
、UNSAFE_componentWillReceiveProps()
、UNSAFE_componentWillUpdate()
。V17 版本将会删除
componentWillMount()
、componentWillReceiveProps()
、componentWillUpdate()
这三个函数,会保留使用UNSAFE_componentWillMount()
、UNSAFE_componentWillReceiveProps()
、UNSAFE_componentWillUpdate()
创建阶段 Mounting
React 记录(6)的更多相关文章
- React 记录(1)
作为一个前端工程师,前端框架是必须会的,所以开始学习React. 学习的方法是:先实践,后图文记录. React官网:https://reactjs.org React中文网站:https://www ...
- React 记录(7)
React文档:https://www.reactjscn.com/docs/handling-events.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reac ...
- React 记录(5)
React文档:https://www.reactjscn.com/docs/state-and-lifecycle.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https:// ...
- React 记录(4)
React文档:https://www.reactjscn.com/docs/components-and-props.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https:/ ...
- React 记录(3)
React文档:https://www.reactjscn.com/docs/hello-world.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reactjs. ...
- React 记录(2)
入门教程:https://www.reactjscn.com/tutorial/tutorial.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reactjs.or ...
- react 记录:运行npm run eject命令暴露配置文件都报这个错误
问题: react 使用create-react-app命令创建一个项目,运行npm run eject命令暴露配置文件都报这个错误 原因:主要是脚手架添加 .gitgnore文件,但是却没有本地仓库 ...
- react 记录:React Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack
前言: react-router-dom 4.4.2 在页面中直接使用 import { Link } from 'react-router-dom' //使用 <Link to={{ path ...
- Effect Hook
1 数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用. 2 可以把 useEffect Hook 看做 componentDidMount,componentDidUpdat ...
随机推荐
- Github上如何查看当前最流行的开源项目
先声明下:只针对初学者,大神的话勿喷. 针对题标的这个问题,按照如下步骤操作即可: 进入Github网站后,显示的页面如下所示: 点击"Explore"链接,进入如下页面: 页面上 ...
- MySQL 索引创建及使用
索引的类型 PRIMARY KEY(主键索引): 用来标识唯一性,数据不可重复 ,主键列不能为NULL,并且每个表中有且只能有一个主键,还可以创建复合主键,即多个字段组合起来. 创建语句为: -- ...
- 给Integer对象加锁的错误方式
package com.thread.test; public class BadLockOnInteger implements Runnable { public static Integer i ...
- Hadoop Compatibility in Flink
18 Nov 2014 by Fabian Hüske (@fhueske) Apache Hadoop is an industry standard for scalable analytical ...
- Example of DenseCRF with non-RGB data
本笔记本通过一个示例说明如何在非rgb数据上使用DenseCRFs.同时,它将解释基本概念并通过一个示例进行演示,因此即使您正在处理RGB数据,它也可能是有用的,不过也请查看PyDenseCRF's ...
- PuTTY 串口调试,为普通用户增加访问串口设备权限
一般情况下,只有 root 用户可以使用 PuTTY 访问串口设备,如果要为普通用户增加访问串口设备的权限,可按如下步骤进行: (以 Ubuntu 14.04.3 系统为例,第一个串口设备,会被识别为 ...
- Hexo + GitEE 搭建、备份、恢复、多终端
Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. Hexo 是使用的比较多的博客框架了,我也尝试自己搭 ...
- 拜托!面试请不要再问我Spring Cloud底层原理
概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留在对Spring Cloud功能使用的层面,其底层的很多原理,很多人可能并不知晓 ...
- 云计算openstack共享组件(3)——消息队列rabbitmq
队列(MQ)概念: MQ 全称为 Message Queue, 消息队列( MQ ) 是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链 ...
- c语言之控制语句:循环
#include<stdio.h> int main(void) { long num; long sum = 0L; int status; printf("Please en ...