react组件什么周期记录,转的
react 的核心除了虚拟DOM,我想还有一个很重要的就是生命周期函数,理解生命周期函数,对写出合理的commponet很有帮助。下面总结一下我对生命周期函数的一些理解已经在项目过程中遇到的一些问题。
先上一张图:
1、getIntialState()方法
这个方法在组件没有mouting之前调用,在这个方法中可以初始化一些数据,例如state。这个方法在组件创建的时候调用一次,之后就不会再被调用了,除非组件销毁,重新创建。
在这个方法中已经可以访问到this.props了。
2、componentWillMount()方法
这个方法在组件已经即将创建但是还没有创建的时候调用,在这里可以用setState修改state。但是react建议是在组件mouted以后调用setState函数,否则容易报警告。这点在介绍state的时候在详细分析。
3、render方法
这个方法是react组件唯一必需的函数,这个方法用于创建虚拟DOM。
这个方法里数据只能通过this.state和this.props输出。
要注意一点返回的组件必须有一个顶级的组件,也就是说所有的标签必须被一个父标签包裹。
4、componentDidMount()方法
这个方法中可以调用Rect.findDOMNode()方法,访问Dom节点(注:在react 0.13版本中用this.getDOMNode()方法而且返回的是虚拟DOM,不能直接访问DOM节点)
访问DOM节点时,react 提供了refs对象,可以同个refs对象直接访问到相应的节点上:
例如:
<div ref='app'></div>
可以通过Rect.findDOMNode(this.refs.app)直接访问到div节点
5、componentWillReciveProps(object nextProps)方法
这个方法可以接受到this.props的更新,所以可以在这个方法中,可以更新组件。但是在这个方法中使用setState函数是不会触发render()方法的。
这个方法在使用react-router时,可以实现类似于从路由/feed/123
to /feed/789的组件数据更新。
ps:方法在组件intial的时候不会被调用
6、shouldComponentUpdate()方法
这个方法可以用来精准判断是否更新组件,你可以通过判断this.prop和this.state是否需要渲染更新,来返回false或者true。如果返回的是false则react会跳过render方法,以及render方法的前后两个方法。所以使用这个方法是要谨慎,容易导致整个页面无法渲染。
7、componentWillUpdate()方法
组件在接受到新的this.props或者this.state前调用该方法。在这个方法中不能调用setState方法更新state或者更新this.props。
8、componentDidUpdate()方法
该方法可以更新已经渲染好的DOM结构
9、componentWillUnmount()方法
这个方法主要用来做一些垃圾回收的工作,但是由于浏览器的垃圾自动回收机制,所以基本上不需要使用这个方法。
10、mixin
在创建组件的过程中有很多方法是在多个组件中共用,如果在每个组件中都重复定义一遍,太麻烦,这个时候可以使用mixin。mixin允许我们重复定义生命周期函数。mixin中的生命周期函数会先于组件自己的生命周期函数调用。
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 ...
随机推荐
- java_method_获取数据库中列表的第一行第一列的int值
List<String[]> counts=DataBaseManage.getInstance().executeQuery(sql, 1, list); int count=0; if ...
- IOS7 自定义UIBarButtonItem 的一些问题
ios 下自定义导航栏的BarButtonItem 会产生一些偏移问题, 解决方案: 通过新建一个系统的带固定距离的Item来调节你的Item #define IOS7_NAVI_SPACE ...
- Hyper-V介绍
Hyer-v主机是高端虚拟主机用户的最佳选择.您不再受其他用户程序对您造成的影响,您将得到的是更加公平的资源分配,远远低于虚拟主机的故障率.Hyper-V的分区包含两种:父分区和客户分区.Hyper- ...
- FindWindowEx
procedure CloseGameSver(); var H1, h2: HWND; begin H1 := FindWindow('TForm1', nil); h2 := FindWindow ...
- [Javascript] Drawing Styles on HTML5 Canvas
window.onload = function() { var canvas = document.getElementById("canvas"), context = can ...
- mysqld --debug-sync
http://hedengcheng.com/?p=238https://dev.mysql.com/doc/internals/en/debug-sync-facility.html mysqld ...
- Bluetooth in Android 4.2 and 4.3(三):Enable Bluetooth
以下是基于Android 4.2代码,对Bluetooth BR/EDR Enable process的分析.BluetoothAdapter类代表的是local device Bluetooth a ...
- easy_painting
最近感觉结构,比例抓的容易多了.
- javascript进击(八)JSON
JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Ob ...
- WinForm界面(一)
一:Form对象 属性: 设计中的Name:窗体类的类名AcceptButton:窗口的确定按钮CancelButton:窗口按ESC的取消按钮 1.外观 Backcolor:背景颜色Forecolo ...