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 stateis 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的更多相关文章

  1. [React Fundamentals] Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

  2. [React Fundamentals] Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  3. [React Fundamentals] Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  4. [React ] React Fundamentals: Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  5. [React] React Fundamentals: Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  6. React.js Tutorial: React Component Lifecycle

    Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...

  7. React.createClass 、React.createElement、Component

    react里面有几个需要区别开的函数 React.createClass .React.createElement.Component 首选看一下在浏览器的下面写法: <div id=" ...

  8. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  9. React Native 中 component 生命周期

    React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/518136 ...

随机推荐

  1. Android开发UI之补间动画-布局添加动画

    布局添加动画 使用步骤: 1.获取到布局的id RelativeLayout ly=(RelativeLayout)findViewById(R.id.layout); 2.设置动画样式 ScaleA ...

  2. 安装Sublime Text 3插件

    按 Ctrl+` 或者如下图调出Console 粘贴以下代码到底部命令行并回车: import urllib.request,os; pf = 'Package Control.sublime-pac ...

  3. 【转】objective-c基本数据类型之输出格式符

    原文网址:http://blog.csdn.net/mamong/article/details/8255691 基本数据类型 1. int 输出格式符:%i, %d, %o %x, 2. float ...

  4. 【转】CString类型互转 int

    CString类型互转 int 原文网址:http://www.cnitblog.com/Hali/archive/2009/06/25/59632.html CString类型的转换成int  将字 ...

  5. epub-2格式电子书剖析之一:文档构成

    epub格式电子书遵循IDPF推出的OCF规范,OCF规范遵循ZIP压缩技术,即epub电子书本身就是一个ZIP文件,我们将epub格式电子书的后缀.epub修改为.zip后,可以通过解压缩软件(例如 ...

  6. .Net 提交页面,js修改的Label值会丢掉

    <head id="Head1" runat="server"> <script src="../Jquery/jquery-1.1 ...

  7. HDU 3416 Marriage Match IV dij+dinic

    题意:给你n个点,m条边的图(有向图,记住一定是有向图),给定起点和终点,问你从起点到终点有几条不同的最短路 分析:不同的最短路,即一条边也不能相同,然后刚开始我的想法是找到一条删一条,然后光荣TLE ...

  8. [Tommas] Web测试中,各类web控件测试点总结

    一 .界面检查 进入一个页面测试,首先是检查title,页面排版,字段等,而不是马上进入文本框校验 1.页面名称title是否正确 2.当前位置是否可见  您的位置:xxx>xxxx 3.文字格 ...

  9. Selenium 实现联想下拉框

    直接在文本框输入字符,并不能实现联想下拉框, 第一种方式:强制执行js driver.FindElement(By.Id("top_search_input")).SendKeys ...

  10. qosort 使用使用小例子

    输入 1500 3150 300100 200 输出结果470 471100    200150    300470    471     #include <iostream> #inc ...