React Lifecycle
React Lifecycle 分为三种:
- 初始化阶段
- 状态的更新
- 销毁

实例化:
ReactDom.render 用于将模板转换成HTML语言,并插入DOM节点。
1.getDefaultProps || Component.defaultProps 这个方法是用来设置组件默认的props,组件生命周期只会调用一次
2.getInitialState || this.state 设置state初始值,在这个方法中你可以访问到this.props
3.componentWillMount 在组件首次渲染之前调用,这个是render方法调用前最后一次修改state的机会。很少用到。
4.render JSX通过这里,解析成对应的虚拟DOM,渲染成最终结果。
5.componentDidMount 这个方法在首次真实的DOM渲染后调用,当我们需要访问真实的DOM时候,或者当我们请求外部数据接口的时候,一般在这里处理。
存在期:
实例化后,当props或者state发生改变时,下面方法会依次调用
1 componentWillReceiveProps 当我们通过组件更新子组件props时,这个方法就会调用
componentWillReceiveProps(nextProps){}
2 shouldComponentUpdate 是否应该更新组件,默认返回True,当返回false时,后期函数就不会调用,组件不会再次渲染。
shouldComponentUpdate(nextProps,nextState){}
3 componentWillUpdate 组件将会被更新,props和state改变后必调用。
4 render
5 componentDidUpdate 这个方法在更新真实的DOM成功后调用,当我们访问真实的DOM时,这个方法就会经常用到。
销毁期:
componentWillUnMount 每当组件使用完成,这个组件就必须从DOM中销毁,此时该方法就会被调用。当我们在组件中使用了setInterval,那我们就需要在这个方法中调用clearInterval.
React Lifecycle的更多相关文章
- React LifeCycle API
React LifeCycle API old API & new API 不可以混用 demo https://codesandbox.io/s/react-parent-child-lif ...
- React LifeCycle Methods & re-learning 2019
React LifeCycle Methods & re-learning 2019 v16.9.0 https://reactjs.org/docs/react-component.html ...
- a dive in react lifecycle
背景:我在react文档里找生命周期的图,居然没有,不敢相信我是在推特上找到的... 正文 react v16.3 新生命周期: static getDerivedStateFromProps get ...
- 一图解析 React组件生命周期 (React Component Lifecycle)
React LifeCycle v1 参考官方文档作成 可放大 参考:https://reactjs.org/docs/react-component.html 数字补丁数字补丁数字补丁数字补丁数 ...
- React (Native) Rendering Lifecycle
How Does React Native Work? The idea of writing mobile applications in JavaScript feels a little odd ...
- react与jQuery对比,有空的时候再翻译一下
参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-t ...
- 21个React开发神器
摘要: React开发神器. 原文:22 Miraculous Tools for React Developers in 2019 译者:前端小智 下列工具中的重要性与排序无关. 1.Webpack ...
- React Virtual DOM Explained in Simple English
If you are using React or learning React, you must have heard of the term “Virtual DOM”. Now what is ...
- react起步——从零开始编写react项目
# index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
随机推荐
- JS 删除数组中某个元素
//删除红色的元素 splice(下标,长度) var arr = ['a','b','c','d']; arr.splice(1,1); console.log(arr); //['a','c', ...
- 基本promise
function myPromise(fn) { var value = null, callbacks = []; this.then = function (onFulfilled) { call ...
- 'weinre' 不是内部或外部命令,也不是可运行的程序 或批处理文件。 解决方案
使用 npm install -g weinre 全局安装 weinre,weinre 安装目录是:C:\Users\Administrator\AppData\Roaming\npm 需要配置环境变 ...
- 2017年4月13日用VS写C程序遇到的一些问题
在网上找到一篇展示计算机浮点数格式的文章,且有C代码如下: #include <stdio.h> #include <stdlib.h> #include <string ...
- 使用LinkedList类生成一个集合对象,循环加入“小样1”,“小样2”,“小样3”,“小样4”,“小样5”……“小样100”。输出这个集合的大小。再使用循环删除这个集合中所有名字为偶数的对象,比如“小样6”,“小样100”,都是偶数名。最后:循环输出集合中所有的对象,看是否删除成功。
package com.lanxi.demo1_8; import java.util.Iterator; import java.util.LinkedList; public class Test ...
- Problem 5: Smallest multiple
2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any rema ...
- oracle入门之对表数据查询(一)
此文中用到的表是Scott用户中自带的三张表: 基本select语句 基本语法: select [distinct] *|{columnl,column2,column3..} from table ...
- mongoDB-Cannot change the size of a document in a capped collection:
简单记录一下: 造成该问题的原因是集合被设置成了 固定集合 .固定集合的数据不能被修改.只能查找-删除-再插入
- Linux----Github环境搭建
前面介绍了在Windows环境上安转GitHub环境,原本以为打包成jar,发布到Linux不需要再安转Git,但是因为我们使用了Config-Server配置中心,远程配置来启动,所以需要在Linu ...
- MySQL从本地向数据库导入数据
本文来自:https://www.cnblogs.com/lettuce-u/p/10715795.html(自己收藏看) 在localhost中准备好了一个test数据库和一个pet表: mysql ...