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" /> ...
随机推荐
- 微信内嵌浏览器打开手机浏览器下载APP(APK)的方法
想必大家会经常碰到网页链接在微信内无法打开和微信内无法打开app下载页的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要有以下四点 1.网页链接被举报次数 ...
- Windows10 搭建JAVA环境变量
系统:Windows10 软件:Java SE 8 配置详细过程 1.“此电脑”,右键→“属性,选择“高级系统设置”(也可从控制面板,系统和安全,系统,找到此页) 2.选择环境变量,再系统环境变量 3 ...
- python简介和python工具的选择
Python 简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有 ...
- Oracle 11g OGG mgr定期清理tail 文件
OGG mgr定期清理tail 文件 2018-06-11 11:58 440 0 原创 GoldenGate 本文链接:https://www.cndba.cn/leo1990/article/28 ...
- HDU1237
/************************************************************** 作者:陈新 邮箱:cx2pirate@gmail.com 用途:hdu1 ...
- optimal-account-balancing
一群朋友去度假,有时互相借钱. 例如,爱丽丝为比尔的午餐支付了 10 美元.后来克里斯给爱丽丝 5 美元搭出租车.我们可以假设每笔交易为一个三元组(X,Y,Z),这意味着第 X 个人借给第 Y 个人 ...
- Java的数组,集合,数据结构,算法(一)
本人的愚见,博客是自己积累对外的输出,在学习初期或自己没有多少底料的情况下,与其总结写博客不如默默去搞自己的代码,但是学到集合这一块时,数组,集合,数据结构,算法这个概念搞的我比较混淆,所以不得已写这 ...
- kafka producer 0.8.2.1 示例
package test_kafka; import java.util.Properties; import java.util.concurrent.atomic.AtomicInteger; i ...
- login.html
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1 ...
- Mysql 存储过程查询结果赋值到变量的方法
drop table if exists test_tbl; create table test_tbl (name varchar(20), status int(2)); insert into ...