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. 如何在同一台服务器上安装多套通达OA

    本人最近研究了在同一服务器安装多套通达OA的方法:发现网上关于这个话题的文章比较少,于是录制成视频,在此发布,希望对有这方面需求的朋友有所帮助: http://blog.163.com/zhuwei_ ...

  2. 用TIMESTAMP类型取代INT和DATETIME

    时间在我们开发中应用非常普遍,大部分开发中我们将用Mysql的datetime格式来存储,但是对于经常用时间来排序或者查询的应用中,我们要将时间做成索引,这个就跟查询效率很有关系,但是很多程序员会用i ...

  3. APK中java代码反编译

    Android APK中的Java代码可以被反编译到什么程度主要看APK的加密程度. 第一种情况:无混淆无加密无加壳.直接利用Dex2jar和JD-GUI可把源码从APK里抠出来,代码逻辑清晰,基本上 ...

  4. java、myeclipse常见错误的解决(未完)

    1.报错java.lang.NoClassDefFoundError ,但是相关jar包已经导入工程. 解决方案:将jar包放入C盘tomcat上部署的相应项目中的WEB-INF/lib中.web容器 ...

  5. Android Activity四种加载方式

    Android之四种加载方式 (http://marshal.easymorse.com/archives/2950 图片) 在多Activity开发中,有可能是自己应用之间的Activity跳转,或 ...

  6. [Tommas] 测试用例覆盖率(二)

    二.详细用例的设计 划分好了测试项,接着就是针对各个测试项,考虑具体的测试用例了.根据测试项的特点,测试用例的设计角度也有所不同.下面我们就来看看通常的功能点测试用例,该从哪些角度出发来进行设计: 1 ...

  7. Zabbix探索:模板中发现规则的使用

    其实模板的建立只要多看看系统自带的模板内容就清楚了,一目了然,不用做过多解释. 目前使用到的自动发现规则有端口和文件系统的,其他还没有仔细研究. 下面说说遇到的几个问题. 1.Key不能相同.普通项目 ...

  8. JVM的GC机制及JVM的调优方法

    内存管理和垃圾回收是JVM非常关键的点,对Java性能的剖析而言,了解内存管理和垃圾回收的基本策略非常重要. 1.在程序运行过程当中,会创建大量的对象,这些对象,大部分是短周期的对象,小部分是长周期的 ...

  9. [九度OJ]1113.二叉树(求完全二叉树任意结点所在子树的结点数)

    原题链接:http://ac.jobdu.com/problem.php?pid=1113 题目描述: 如上所示,由正整数1,2,3……组成了一颗特殊二叉树.我们已知这个二叉树的最后一个结点是n.现在 ...

  10. poj 1741 Tree(点分治)

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15548   Accepted: 5054 Description ...