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

import React from 'react';
import ReactDOM from 'react-dom'; export default class App extends React.Component {
constructor(){
super();
this.state = {
increasing: false
}
}
update(){
ReactDOM.render(<App val={this.props.val+} /> , document.getElementById('app'));
}
componentWillReceiveProps(nextProps){
//Invoked when a component is receiving new props. This method is not called for the initial render.
this.setState({
increasing: nextProps.val > this.props.val
})
}
shouldComponentUpdate(nextProps, nextState){
// Control whether the component should re-render
return nextProps.val % === ; // update dom every 5 clicks
}
render() {
console.log(this.state.increasing);
return (
<div>
<button onClick={this.update.bind(this)}>{this.props.val}</button>
</div>
)
}
componentDidUpdate(prevProps, prevState){
//After DOM update
console.log("prevProps", prevProps);
}
} App.defaultProps = {
val:
}

[React Fundamentals] Component Lifecycle - Updating的更多相关文章

  1. [React] 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 ] React Fundamentals: Component Lifecycle - Mounting Usage

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

  4. [React Fundamentals] Component Lifecycle - Mounting Basics

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

  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 (Native) Rendering Lifecycle

    How Does React Native Work? The idea of writing mobile applications in JavaScript feels a little odd ...

  8. React & styled component

    React & styled component https://www.styled-components.com/#your-first-styled-component tagged t ...

  9. react slot component with args

    react slot component with args how to pass args to react props child component https://codesandbox.i ...

随机推荐

  1. sencha touch2 动画问题

    最近在review一个项目的代码, 发现返回操作比较乱,很多"从哪里来,到哪里去的操作"被写的一塌糊涂; 按照ios系统的进场出场动画(人家的体验还是很好的,必须借鉴)为标准,使用 ...

  2. HAOI2006受欢迎的牛

    求出强联通分量之后判断出度为0的点有几个,有1个就输出这个分量的点的数目,否则输出0: var i,j,n,m,x,y,ans1,ans2,t,cnt,top:longint; head,next,g ...

  3. Cookie设置HttpOnly,Secure,Expire属性

    在eclipese中创建Web工程时,有个dynamic web module version选项,首先解释下这个选项的意思: http://stackoverflow.com/questions/3 ...

  4. boostrap兼容ie及其案例

    多梦网络 wordpress主题 http://www.dmeng.net/

  5. 算法的时间复杂度(大O表示法)

    定义:如果一个问题的规模是n,解这一问题的某一算法所需要的时间为T(n),它是n的某一函数 T(n)称为这一算法的“时间复杂性”. 当输入量n逐渐加大时,时间复杂性的极限情形称为算法的“渐近时间复杂性 ...

  6. Mysql slave 状态之Seconds_Behind_Master

    在MySQL的主从环境中,我们可以通过在slave上执行show slave status来查看slave的一些状态信息,其中有一个比较重要的参数Seconds_Behind_Master.那么你是否 ...

  7. 【转】photoshop CS2安装激活破解教程

    原文网址:http://www.16xx8.com/photoshop/jiaocheng/109348_all.html photoshop CS2安装教程:(本页介绍如何安装CS2软件,如果你安装 ...

  8. HDU 1024 DP Max Sum Plus Plus

    题意:本题的大致意思为给定一个数组,求其分成m个不相交子段和最大值的问题. kuangbin专题. dp[i][j]=Max(dp[i][j-1]+a[j] , max( dp[i-1][k] ) + ...

  9. 如何利用多核CPU来加速你的Linux命令

    原文出处: rankfocus   译文出处: 外刊IT评论 你是否曾经有过要计算一个非常大的数据(几百GB)的需求?或在里面搜索,或其它操作——一些无法并行的操作.数据专家们,我是在对你们说.你可能 ...

  10. Java 继承详解

    什么是继承? 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承那个类即可. 多个类可以称为子类,单独这个类称为父类.超类或者基类. 子类可以直接 ...