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" /> ...
随机推荐
- lr添加md5方法,字符编码转换,urlcode编码化
1.使得写lr脚本时可调用md5方法,需要进行以下操作: 1)将md5.h文件加载到Extra Files下: 2)在globals.h文件中添加 #include“md5.h” 3).打开md5文 ...
- 第7天:Q Quant库(未完待续)
一.本文大纲: 1.Python内置函数计算期权的价格 2.numpy加速数值计算 3.SciPy进行仿真模拟 4.SciPy求解器计算隐含波动率 5.matplotlib绘图 二.案例 (看不懂,略 ...
- 小白的python之路11/3总结
ln-s 指定源是谁 l是软连接,其中源文件相当于快捷方式 1.打包 归档命令 tar -cvzf test.tar a.txt b.txt c.txt其中c是创建,v是详细信息,f是打包后文件名,a ...
- FORTH 虚拟机内部结构
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- cocoapods 换源
1. 用以下步骤换源: pod repo remove master pod repo add master https://code.aliyun.com/Magi/CocoaPods.git po ...
- Exploit-Exercises nebule 旅行日志(二)
接着上次的路程继续在ubuntu下对漏洞的探索练习,这次是level01了 先看下level01的问题描述: 目标还是要能运行getflag这个可执行的程序,但如果直接运行是不行的,会提示: getf ...
- docker学习端口连接docker容器---第四章节
一.Docker容器连接 前面的第二章节,我们事先通过网络端口来访问运行在docker容器内的服务,我们也可以通过端口连接到一个docker容器 我们可以指定容器绑定的网络地址,如绑定127.0.0. ...
- nmon的安装使用
一.下载Nmon 根据CPU的类型选择下载相应的版本: http://nmon.sourceforge.net/pmwiki.php?n=Site.Download http://sourceforg ...
- Protege4.3 添加Rules 栏
SWRL rules can be edited in Protégé 4, but not with a nice interface like in Protégé 3. If you go to ...
- oracle 优化方法总结
分析和优化的基本步骤如下: 1.如果是SQL语句的写法问题,我们可以通过在不更改业务逻辑的情况下改写SQL来加以解决: 2.如果是不必要的全表扫描/排序而导致了目标SQL的性能问题,我们可以通过建立合 ...