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. java正则表达式应用--验证字符串是否为数字(转载)

    首先说一下java正则表达式的重点概念: 第一.相关类:Pattern.Matcher 第二.典型的调用顺序是 Pattern p = Pattern.compile("a*b") ...

  2. bzoj2324

    出题人真 口袋迷 很容易发现这是一道费用流的题目 很显然这个问题有两个难点: 保证走到某个点时之前序号的点都被走过 保证每个点都走 对于1,我们换个说法,一个人走到该点时经过的点的序号都小于该点--- ...

  3. poj2752 水题

    又2b了一次…… var s:ansistring; ans,pre:..] of longint; i,k,tot:longint; procedure main; begin pre[]:=;k: ...

  4. js变量作用域

    for(var i =0;i<100;i++) { } alert(i);//100 if(true){ var i="91d"; } alert(i);//91d func ...

  5. 巧用CSS文件愚人节恶搞(转)

    明天就是4月1日愚人节了,也就是那个可适度开玩笑.整蛊的日子了.如果你想和那些要上网的朋友或同事开个极客式玩笑,那就来试试这个国外网友Wes Bos分享的 CSS 文件吧. 一.打开浏览器的 Cust ...

  6. 【转】AngularJS的$resource

    $http $http服务是基于$q服务的,提供了promise封装,它接受一个配置对象参数,并返回一个promise对象.同时,它还提供了2个方法用来定义Promise回调:success 和 er ...

  7. 将android中的sample例子到eclipse中

    SDK中带有很多的例子,那么我们怎么样导入到eclipse中呢?方法很简单,如下: 1. 新建android工程,选择Create project from existing sample, 2. 选 ...

  8. kettle作业(job)调用转换,设置变量,写日志到数据库中【转】

    首先建立转换:从数据库表到日志 表输入的设置:   日志设置:   新建job:     转换选择刚才建好的输出日志转换.变量设置如下: 此ID就是转换中的${ID},执行job,可以看到控制台输出日 ...

  9. Windows下环境变量配置

    JAVA_HOME=C:\Program Files\Java\jdk1.6.0_33   PATH+=%JAVA_HOME%\bin;   CLASSPATH=.;%JAVA_HOME%\lib\d ...

  10. ISE和Modelsim联合仿真(转)

    相信很多人会遇到过这个问题,不知如何让ISE调用Modelsim进行仿真.我也迷糊了不少时间,查查找找,终于弄明白了,所以有了本文,和大家分享一下.我尽量讲得详细点儿,多多上图. 我的环境:Windo ...