react组件生命
组件的生命周期主要由三个部分组成:
- Mounting:组件正在被插入DOM中
- Updating:如果DOM需要更新,组件正在被重新渲染
- Unmounting:组件从DOM中移除
React提供了方法,让我们在组件状态更新的时候调用,will标识状态开始之前,did表示状态完成后。例如componentWillMount就表示组件被插入DOM之前。
Mounting
- getInitialState():初始化state
- componentWillMount():组件被出入DOM前执行
- componentDidMount():组件被插入DOM后执行
Updating
- componentWillReceiveProps(object nextProps):组件获取到新的属性时执行,这个方法应该将this.props同nextProps进行比较,然后通过this.setState()切换状态
- shouldComponentUpdate(object nextProps, object nextState):组件发生改变时执行,应该将this.props和nextProps、this.stats和nextState进行比较,返回true或false决定组件是否更新
- componentWillUpdate(object nextProps, object nextState):组件更新前执行,不能在此处调用this.setState()。
- componentDidUpdate(object prevProps, object prevState):组件更新后执行
Unmounting
- componentWillUnmount():组件被移除前执行
Mounted Methods
- findDOMNode():获取真实的DOM
- forceUpdate():强制更新
react组件生命的更多相关文章
- React组件生命周期小结
React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
- React组件生命周期过程说明
来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...
- React组件生命周期过程说明【转】
实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...
- 深入React组件生命周期
上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结. 在组件的整个生命周期中,随 ...
- react组件生命周期过程
实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...
- 1.4 React 组件生命周期
1.4.1 组件 React 中组件有自己的生命周期方法,简单理解可以为组件从 出生(实例化) -> 激活 -> 销毁 生命周期 hook.通过这些 hook 方法可以自定义组件的特性. ...
- 3. React 组件生命周期介绍
React 中的每个组件都有三个阶段,这三个阶段构成了组件完整的生命周期.组件的生命周期为]); return; } this.setState({name: event.target ...
随机推荐
- String,StringBuffer和StringBuilder比较
String:查看源码得知,String类的声明是:public final,所以可以很清楚的知道,fianl的话是改变不了的,所以,如果我们用String来操作字符串的时候,一旦我们字符串的值改变, ...
- EasyPlayer RTSP播放器:一个适用于安防行业的工具利器(EasyPlayer Windows v2.0.17.0709)
本文转自EasyDarwin开源团队成员Sword的博客:http://blog.csdn.net/swordtwelve EasyPlayer(Windows) v2.0.17.0709版本又更新发 ...
- Vim技能修炼教程(7) - 可视模式
可视模式 可视模式是与正常模式.插入模式一起并列的模式.它的作用就像图形化编辑器下用鼠标来选择一个块. 在vim下,使用正常模式和ex命令,连搜带跳行的,未必就比用鼠标慢. 我们先做一个例子找找感觉, ...
- 用sublime server 启动本地服务器(手机访问电脑页面)
安装sublime server 插件包 1.Ctrl + shift + p install package ...
- 小程序开发之改变data中数组或对象的某一属性值
前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值. 效果图: 我给大家总结了案例如下: wxml如下: <scr ...
- VS 工具箱 Dev控件显示
工具箱修复Dev控件显示 用VS2010新打开一个项目,居然发现工具箱里边没了Dev控件. 命令提示符定位到Dev控件的安装目录下的\Components\Tools文件夹下,执行如下命令 添加:To ...
- Linux Mint17.1安装PHPStorm8.0.2
phpstorm是用JAVA开发的,所以在安装之前需要先安装jdk sudo apt-get install default-jdk 从官网上下载phpstorm 的linux版本 http://ww ...
- iOS 模态框覆盖导航栏
1.使用window 覆盖 2.试图添加到 如果有一个场景:首页三个tab,要求只覆盖Navigation ,而不影响Tab使用,那么使用window 覆盖就不满足了. 这里我们可以使用如下 ...
- BZOJ4543 [POI2014]Hotel加强版
题意 有一个树形结构,每条边的长度相同,任意两个节点可以相互到达.选3个点.两两距离相等.有多少种方案? 数据范围:n<=100000 分析 参照小蒟蒻yyb的博客. 我们先考虑一个\(O(n^ ...
- Numpy, Pandas, Matplotlib, Scipy 初步
Numpy: 计算基础, 以类似于matlab的矩阵计算为基础. 底层以C实现, 速度快. Pandas: 以numpy为基础, 扩充了很多统计工具. 重点是数据统计分析. Matplotlib: ...