[React Fundamentals] Component Lifecycle - Updating
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的更多相关文章
- [React] React Fundamentals: Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- [React Fundamentals] Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React ] React Fundamentals: Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React Fundamentals] Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- React.js Tutorial: React Component Lifecycle
Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...
- React (Native) Rendering Lifecycle
How Does React Native Work? The idea of writing mobile applications in JavaScript feels a little odd ...
- React & styled component
React & styled component https://www.styled-components.com/#your-first-styled-component tagged t ...
- react slot component with args
react slot component with args how to pass args to react props child component https://codesandbox.i ...
随机推荐
- uyouo[]常棒的一篇关于innnodb next-key lock的文章
何登成的 MySQL 加锁处理分析 Innodb锁机制:Next-Key Lock 浅谈
- poj2391,poj2455
这两题本质是一致的: 一般来说,对于最长(短)化最短(长)的问题我们一般都使用二分答案+判定是否可行 因为这样的问题,我们一旦知道答案,就能知道全局信息 拿poj2455举例,对于二分出的一个答案,我 ...
- Memcache缓存与Mongodb数据库的优势和应用
先说说自己对 Memcache和Mongodb的一些看法,主要是抛砖引玉了,希望看到大家的意见和补充. Memcache Memcache的优势我觉得总结下来主要体现在: 1) 分布式.可以由10台拥 ...
- SourceGrid zt
SourceGrid介绍和使用及实例举例 先上图,来一个简单演示: SourceGrid就是一个用于数据显示的表格控件,这个控件比c#自带的 DataGridView要强大很多,先不说他的原理,只说他 ...
- iOS7程序后台运行
介绍 这次 iOS7 对程序后台运行进行了加强,但是仅仅是加强而已,要想像 Android 程序那样自由当然就别想了,苹果这么做主要还是出于电池使用时间考虑,但是这次的加强对大部分程序基本够用. 在介 ...
- <转>堆和栈的区别
http://blog.csdn.net/hairetz/article/details/4141043 一.预备知识—程序的内存分配 一个由C/C++编译的程序占用的内存分为以下几个部分 ...
- activemq api的封装
今天无聊写段代码..学习一下activemq,简单封装了一下activemq 的topic api.跟jdbc很类似 主要代码: import java.io.Serializable; import ...
- CSS换行:word-wrap、word-break和text-wrap区别
一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...
- MVC5中使用KinEditor
参考:http://www.cnblogs.com/weicong/archive/2012/03/31/2427608.html 第一步 将 KindEditor 的源文件添加到项目中,建议放到 / ...
- 【转载】C/C++语言void及void指针深层探索
C/C++语言void及void指针深层探索 1.概述许多初学者对C/C++语言中的void及void指针类型不甚理解,因此在使用上出现了一些错误.本文将对void关键字的深刻含义进行解说,并详述vo ...