[React] React Fundamentals: Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that.
Updating: componentWillReceiveProps
componentWillReceiveProps(object nextProps)
Invoked when a component is receiving new props. This method is not called for the initial render.
Use this as an opportunity to react to a prop transition before render()
is called by updating the state using this.setState()
. The old props can be accessed via this.props
. Callingthis.setState()
within this function will not trigger an additional render.
Updating: shouldComponentUpdate
boolean shouldComponentUpdate(object nextProps, object nextState)
Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate
is used.
Use this as an opportunity to return false
when you're certain that the transition to the new props and state will not require a component update.
If shouldComponentUpdate
returns false, then render()
will be completely skipped until the next state change. (In addition, componentWillUpdate
and componentDidUpdate
will not be called.)
By default, shouldComponentUpdate
always returns true to prevent subtle bugs when state
is mutated in place, but if you are careful to always treat state
as immutable and to read only from props
and state
in render()
then you can override shouldComponentUpdate
with an implementation that compares the old props and state to their replacements.
If performance is a bottleneck, especially with dozens or hundreds of components, useshouldComponentUpdate
to speed up your app.
Updating: componentDidUpdate
componentDidUpdate(object prevProps, object prevState)
Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.
Use this as an opportunity to operate on the DOM when the component has been updated.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Lesson 11: Component Lifecycle: Updating</title>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<style>
body {
margin: 25px;
}
</style>
</head>
<body>
<div id="panel"></div>
<script type="text/jsx">
/** @jsx React.DOM */
var APP =
React.createClass({
getInitialState:function(){
return {increasing:false}
},
update:function(){
var newVal = this.props.val+1
this.setProps({val:newVal})
},
componentWillReceiveProps:function(nextProps){
//Invoked when a component is receiving new props. This method is not called for the initial render.
//So when the counter increase, this method will be called
//works for props, not state
this.setState({increasing:nextProps.val>this.props.val})
},
shouldComponentUpdate: function( nextProps, nextState){
/*Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used. Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.*/
console.log(nextProps.val);
//Only update every 5 times
return nextProps.val % 5 ===0;
},
render:function(){
console.log(this.state.increasing)
return (
<button
onClick={this.update}>
{this.props.val}
</button>
)
},
componentDidUpdate: function( prevProps, prevState){
console.log("prevProps ===" + JSON.stringify(prevProps));
}
}); React.renderComponent(
<APP val={0} />,
document.getElementById('panel')) </script>
</body>
</html>
https://facebook.github.io/react/docs/component-specs.html
[React] React Fundamentals: Component Lifecycle - Updating的更多相关文章
- [React Fundamentals] Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- [React Fundamentals] Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React Fundamentals] Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- [React ] React Fundamentals: Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- React.js Tutorial: React Component Lifecycle
Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...
- React.createClass 、React.createElement、Component
react里面有几个需要区别开的函数 React.createClass .React.createElement.Component 首选看一下在浏览器的下面写法: <div id=" ...
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- React Native 中 component 生命周期
React Native 中 component 生命周期 转自 csdn 子墨博客 http://blog.csdn.net/ElinaVampire/article/details/518136 ...
随机推荐
- Android开发UI之补间动画-布局添加动画
布局添加动画 使用步骤: 1.获取到布局的id RelativeLayout ly=(RelativeLayout)findViewById(R.id.layout); 2.设置动画样式 ScaleA ...
- 安装Sublime Text 3插件
按 Ctrl+` 或者如下图调出Console 粘贴以下代码到底部命令行并回车: import urllib.request,os; pf = 'Package Control.sublime-pac ...
- 【转】objective-c基本数据类型之输出格式符
原文网址:http://blog.csdn.net/mamong/article/details/8255691 基本数据类型 1. int 输出格式符:%i, %d, %o %x, 2. float ...
- 【转】CString类型互转 int
CString类型互转 int 原文网址:http://www.cnitblog.com/Hali/archive/2009/06/25/59632.html CString类型的转换成int 将字 ...
- epub-2格式电子书剖析之一:文档构成
epub格式电子书遵循IDPF推出的OCF规范,OCF规范遵循ZIP压缩技术,即epub电子书本身就是一个ZIP文件,我们将epub格式电子书的后缀.epub修改为.zip后,可以通过解压缩软件(例如 ...
- .Net 提交页面,js修改的Label值会丢掉
<head id="Head1" runat="server"> <script src="../Jquery/jquery-1.1 ...
- HDU 3416 Marriage Match IV dij+dinic
题意:给你n个点,m条边的图(有向图,记住一定是有向图),给定起点和终点,问你从起点到终点有几条不同的最短路 分析:不同的最短路,即一条边也不能相同,然后刚开始我的想法是找到一条删一条,然后光荣TLE ...
- [Tommas] Web测试中,各类web控件测试点总结
一 .界面检查 进入一个页面测试,首先是检查title,页面排版,字段等,而不是马上进入文本框校验 1.页面名称title是否正确 2.当前位置是否可见 您的位置:xxx>xxxx 3.文字格 ...
- Selenium 实现联想下拉框
直接在文本框输入字符,并不能实现联想下拉框, 第一种方式:强制执行js driver.FindElement(By.Id("top_search_input")).SendKeys ...
- qosort 使用使用小例子
输入 1500 3150 300100 200 输出结果470 471100 200150 300470 471 #include <iostream> #inc ...