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. foreach中引用 的问题

    在工作中遇到 关于 php foreach 引用的一个问题 简单来说,如下代码 $arr=array('a','b','c' ,'d'); foreach($arr as $k=>&$v ...

  2. sharedevelop iis express

    sharedevelop 的IIS express的配置文件在 %userprofile%\documents\IISExpress\config\applicationhost.config 自动会 ...

  3. jsp请求由servlet响应的方式

    一.登录页面主要代码:login.jsp<%@ page language="java" import="java.util.*" pageEncodin ...

  4. String的intern方法的用处

    今天第一次翻看Effective java,在其第一个item中讲静态工厂方法的有点的时候说到“它们每次被调用 的时候,不要非得创建一个新的对象”并在结尾处提到---"String.inte ...

  5. jquery页面无刷新切换皮肤并保存

    效果体验:http://runjs.cn/detail/hijgcghe <!DOCTYPE html> <html> <head> <meta http-e ...

  6. C# using SendMessage, problem with WM_COPYDATA z

    The final missing piece depends on if you are using any processor, x86 or x64. The details using the ...

  7. 【树莓PI】下载机

    sudo app-get install ntfs-3g  读写ntfs格式的磁盘 mount -t ntfs /dev/sda4 /mnt/usb -o nls=utf8,umask=0 fdisk ...

  8. 【原】理解Storm拓扑的并行

    Storm入门教程 1. Storm基础 Storm Storm主要特点 Storm基本概念 Storm调度器 Storm配置 Guaranteeing Message Processing(消息处理 ...

  9. faplayer编译配置经验

    最近在做在线m3u8类格式的视频直播应用, 在获取m3u8的文件之后,如果采用Android系统播放器来播,会有各种各样的问题,容易卡死.不连续,也不能自定义一些选项.查找资料以后,决定采用fapla ...

  10. 在ubuntu中启用ftp服务

    Vsftpd vsftpd,ftp服务端,本文转自http://wiki.ubuntu.org.cn/Vsftpd 目录 [隐藏] 1 stand alone和super daemon 2 安装 3 ...