[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 ...
随机推荐
- bzoj2208:[Jsoi2010]连通数
http://blog.csdn.net/u013598409/article/details/47037499 里面似乎有生成数据的... //我本来的想法是tarjan缩点之后然后将图遍历一遍就可 ...
- 8款JS框架比较
Dojo Dojo 是目前最为强大的JS框架,它在自己的 Wiki 上给自己下了一个定义,Dojo 是一个用 JavaScript 编写的开源的DHTML工具箱.Dojo 很想做一个“大一统” ...
- Java [Leetcode 100]Same Tree
题目描述: Given two binary trees, write a function to check if they are equal or not. Two binary trees a ...
- Java [Leetcode 283]Move Zeroes
题目描述: Given an array nums, write a function to move all 0's to the end of it while maintaining the r ...
- Warning: Name is nonexistent or not a directory
Every time I start up MATLAB, I receive this message: Warning: Name is nonexistent or not a director ...
- HDU 2121 Ice_cream’s world II 最小树形图
这个题就是需要求整个有向带权图的最小树形图,没有指定根,那就需要加一个虚根 这个虚根到每个点的权值是总权值+1,然后就可以求了,如果求出来的权值大于等于二倍的总权值,就无解 有解的情况,还需要输出最根 ...
- [Irving]SqlServer 标量函数 详解【转】
--创建用户定义函数.这是一个已保存 Transact-SQL 或公共语言运行时 (CLR) 例程,--该例程可返回一个值.用户定义函数不能用于执行修改数据库状态的操作.--与系统函数一样,用户定义函 ...
- FL2440移植u-boot2011.09
u-boot version:2011.09-rc1 /home/lucas/u-boot-2011.09-rc1 OS:debian 7.1 cross-compilation chain:arm- ...
- MapReduce概述,原理,执行过程
MapReduce概述 MapReduce是一种分布式计算模型,运行时不会在一台机器上运行.hadoop是分布式的,它是运行在很多的TaskTracker之上的. 在我们的TaskTracker上面跑 ...
- Esper系列(十三)Splitting and Duplicating Streams
功能:将同一个事件流分发到其它的事件流中. 格式: 1 ; i < events.length; i++) { 78 EventBean event = even ...