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. UVa 1395 (最小生成树) Slim Span

    题意: 规定一棵生成树的苗条度为:最大权值与最小权值之差.给出一个n个顶点m条边的图,求苗条度最小的生成树. 分析: 按照边的权值排序,枚举边集的连续区间[L, R]的左边界L,如果这些区间刚好满足一 ...

  2. android 三目运算符 运用错误

    /************************************************************************** * android 三目运算符 运用错误 * 说 ...

  3. 【转】FragmentTest学习笔记1

    原文网址:http://blog.csdn.net/hishentan/article/details/20734489 源码部分: BookContent.java package com.exam ...

  4. Fragment中Button的android:onClick 无法监听相应

    在Fragment的布局文件中,Button控件下添加android:onClick监听: 1.fragment_main.xml <RelativeLayout xmlns:android=& ...

  5. 关于word2010中完美解决数学公式(正斜体)输入的解决方案

    测试环境 win10(64位) office2010(32位)——64位的没有测试,估计应该也可以. 需要软件(包)(请按照下面顺序安装) ①VC运行库(自行百度下载即可) ②北大方正word公式数学 ...

  6. NOIP2003 传染病控制

    题四     传染病控制 [问题背景] 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国 大范围流行,该国政府决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完 全认 ...

  7. codeforce 606A - Magic Spheres

    题意:a,b,c三种球,能把俩个一样的球变成另一颜色不一样的球.给你目标x,y,z,问能否经过变化至少达打目标. #include<iostream> #include<stdio. ...

  8. 利用doxygen提高源代码阅读效率

    阅读开源项目的源代码是提高自己编程能力的好方法,而有一个好的源代码阅读工具无疑能够让你在阅读源代码时事半功倍.之前找过不少源代码阅读工具,像SourceInsight.sourcenav.scitoo ...

  9. linux下mysql命令

    一.总结一下: 1.linux下启动mysql的命令:   mysqladmin start/ect/init.d/mysql start (前面为mysql的安装路径) 2.linux下重启mysq ...

  10. jqgrid使用sql row_number进行分页

    背景 系统中使用了jqgrid的展示,现在要处理10w+的数据量 现状 使用了全查询的,查询到了10w+的数据放到了datatable中,每次页面刷新需要9秒多,并且传递给另一个dll来处理一些事情. ...