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. uyouo[]常棒的一篇关于innnodb next-key lock的文章

    何登成的 MySQL 加锁处理分析 Innodb锁机制:Next-Key Lock 浅谈

  2. poj2391,poj2455

    这两题本质是一致的: 一般来说,对于最长(短)化最短(长)的问题我们一般都使用二分答案+判定是否可行 因为这样的问题,我们一旦知道答案,就能知道全局信息 拿poj2455举例,对于二分出的一个答案,我 ...

  3. Memcache缓存与Mongodb数据库的优势和应用

    先说说自己对 Memcache和Mongodb的一些看法,主要是抛砖引玉了,希望看到大家的意见和补充. Memcache Memcache的优势我觉得总结下来主要体现在: 1) 分布式.可以由10台拥 ...

  4. SourceGrid zt

    SourceGrid介绍和使用及实例举例 先上图,来一个简单演示: SourceGrid就是一个用于数据显示的表格控件,这个控件比c#自带的 DataGridView要强大很多,先不说他的原理,只说他 ...

  5. iOS7程序后台运行

    介绍 这次 iOS7 对程序后台运行进行了加强,但是仅仅是加强而已,要想像 Android 程序那样自由当然就别想了,苹果这么做主要还是出于电池使用时间考虑,但是这次的加强对大部分程序基本够用. 在介 ...

  6. <转>堆和栈的区别

    http://blog.csdn.net/hairetz/article/details/4141043 一.预备知识—程序的内存分配    一个由C/C++编译的程序占用的内存分为以下几个部分    ...

  7. activemq api的封装

    今天无聊写段代码..学习一下activemq,简单封装了一下activemq 的topic api.跟jdbc很类似 主要代码: import java.io.Serializable; import ...

  8. CSS换行:word-wrap、word-break和text-wrap区别

    一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...

  9. MVC5中使用KinEditor

    参考:http://www.cnblogs.com/weicong/archive/2012/03/31/2427608.html 第一步 将 KindEditor 的源文件添加到项目中,建议放到 / ...

  10. 【转载】C/C++语言void及void指针深层探索

    C/C++语言void及void指针深层探索 1.概述许多初学者对C/C++语言中的void及void指针类型不甚理解,因此在使用上出现了一些错误.本文将对void关键字的深刻含义进行解说,并详述vo ...