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" /> ...
随机推荐
- webclient上传数据到ashx服务
1.上传参数 UploadData()方法可以上传数据参数,需要将所要上传的数据拼成字符. // 创建一个新的 WebClient 实例. WebClient myWebClient = new ...
- 电脑小白和ta的小白电脑——MySQL的简单使用
数据库的基本操作:增删改查 分别使用cmd环境和Navicat可视化工具连接MySQL数据库来实现 这里默认了已经安装和配置MySQL↓ https://www.cnblogs.com/gifted3 ...
- 【基于微信小程序的社区电商平台】第一次迭代心得(非正式版本
一.迭代任务 团队在第八周确认迭代计划时,是想要在第一阶段实现电商小程序的核心功能,就是买和卖,也是前端和后台数据交换的核心模块.涉及到首页浏览商品信息,查看商品详情及评论,选择加入购物车.关注卖家以 ...
- 【Appium】Appium工作原理(2)
Appium原理 面试的时候,被问到appium原理,一点不会,实在尴尬. 大家可以直接翻看原作https://blog.csdn.net/jffhy2017/article/details/6922 ...
- TP自动提取关键词
protected function _before_insert(&$data, $option) { $data['create_time'] = time(); ...
- IIS10安装IIS URL重写模块2伪静态组件提示需要IIS7.0以上版本。
解决方法: 打开注册表 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InetStp 双击右边MajorVersion,默认的数值是a,修改成9,然后再安装 ,安装完成后 ...
- [工控安全]“祝融”—一种针对PLC控制系统的欺骗攻击病毒
“祝融”作为一种针对传统PLC控制系统的欺骗攻击病毒,所述的典型的PLC控制系统通常包括两部分: 用于组态.编程.监视.控制的工程师站(通常是PC设备) PLC控制器(通常如西门子.施耐德.三菱等厂家 ...
- css实现标题左右横线
最近用到了记录一下 页面 <div class="subtitle"> 马上邀请好友得奖励 </div> 样式 .subtitle { position: ...
- 判断浏览器大于等于ie9
方便自己查找 <script> (function (window) { var theUA = window.navigator.userAgent.toLowerCase(); if ...
- 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题
<frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...