react列表中,当key改变后发生的事情
Main.jsx
export default class Main extends PureComponent {
constructor(props) {
super(props);
this.state = {
list: [
{
key: ,
value:
},
{
key: ,
value:
},
{
key: ,
value:
}
]
}
this.setKey = ::this.setKey;
} componentWillMount() {
console.log('main will mount');
} componentDidMount() {
console.log('main did mount');
} componentWillUpdate() {
console.log('main will update');
} componentDidUpdate() {
console.log('main did update');
} componentWillUnmount() {
console.log('main will unmount');
} setKey() {
const { list } = this.state; this.setState({
list: Array.from(list, item => {
return Object.assign(item, {
key: item.key +
});
})
});
} render() {
const { list } = this.state;
return (
<div>
{list.map(item => <List key={item.key} value={item.value} />)}
<button onClick={this.setKey}>key</button>
</div>
)
}
}
List.jsx
export default class List extends PureComponent {
constructor(props) {
super(props);
} componentWillMount() {
console.log(`list${this.props.value} will mount`);
} componentDidMount() {
console.log(`list${this.props.value} did mount`);
} componentWillUpdate() {
console.log(`list${this.props.value} will update`);
} componentDidUpdate() {
console.log(`list${this.props.value} did update`);
} componentWillUnmount() {
console.log(`list${this.props.value} will unmount`);
} render() {
const { value } = this.props;
return(
<div>
list{value}
</div>
)
}
}
当点击key按钮后会发生什么呢?先分析一下
react列表中,当key改变后发生的事情的更多相关文章
- React组件中的key
React组件中的key 一.key的作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给reac ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- 列表中相同key的字典相加
# 怎么把列表中相同key的字典相加,也就是id的值加id的值,doc_count的值加doc_count的值 # 目标列表 l=[{'id': 5, 'doc_count': 129}, {'id' ...
- .Net中使用com组件后发生System.ArithmeticException异常的解决办法(Message=算术运算中发生溢出或下溢。)
最近在开发一个.Net程序,其中涉及到对com组件的调用,或者第三方DLL调用, 在调用完以后如果使用一些小的测试程序继续运行,一切正常,但是在使用带有GUI的form程序,或者WPF程序中,继续执行 ...
- 使用Jquery解决Asp.Net中下拉列表值改变后访问服务器刷新界面。
使用DropDownList控件时,改变选项时,获取服务端数据库数据并刷新界面数据. 1. 绑定DropDownList控件SelectedIndexChanged事件. 2. AutoPortBac ...
- 浏览器输入url后发生的事情以及每步可以做的优化
首先总结下输入url按下回车后的大致流程: 查询url的ip地址. 建立tcp连接,连接服务器. 浏览器发起http/https请求. 服务器响应浏览器的请求. 网页的解析与渲染. 下面分析每个过程 ...
- React之事件绑定、列表中key的使用
在学习React的Hadding Events这一章节,发现事件回调函数的几种写法,看似区别不大,但实际差异还是蛮大的. class Toggle extends React.Component{ c ...
- 写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么
怼一波,在项目中有很多经常用到,但又含糊不清的知识点 框架中的key: 1. 为啥在遍历元素时要用 key :在开发过程中为了保证遍历同级元素的唯一性,用来提高更新 dom 的性能: 2. 凭啥要保证 ...
- React 点击删除列表中对应项(React 获取DOM中自定义属性)
点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...
随机推荐
- .NET架构师必备知识
.NET架构师,我归纳一下要学的知识: 成为优秀程序员,需要学好的知识: 1. 面向对象编程.UML画图.设计模式.代码重构 2. 常用ORM工具 3. MVC,WCF,XMl, JQuery ,S ...
- Redis持久化之rdb&aof
Redis有两种持久化的方式:快照(RDB文件)和追加式文件(AOF文件) RDB持久化方式是在一个特定的间隔保存某个时间点的一个数据快照. AOF(Append only file)持久化方式则会记 ...
- JBPM的.jpdl.xml文件中文出现乱码
在Eclipse中使用jbpm提供的工作流设计器设计好流程后,打开.jpdl.xml后发现中文全是乱码 项目和文件编码设置都是UTF-8,但是依旧乱码. 在Eclipse的配置文件 eclipse.i ...
- <..................> 哈佛大学哲学系 && 历史哲学笔记文献集
哈佛大学哲学系课程表 (一)概况 (1)哈佛大学哲学系现有教师21人,其中访问教授7人,教师流动性较大,每年有一定的变化.以下为现任教师:Richard Moran(系主任 ...
- 判断SQL数据库中函数、存储过程等是否存在的方法
下面为您介绍sql下用了判断各种资源是否存在的代码,需要的朋友可以参考下,希望对您学习sql的函数及数据库能够有所帮助.库是否存在if exists(select * from master..sys ...
- Jquery添加元素append及阻止表单提交submit
HTML代码: <td><input name="duration[]" value="" type="text" /&g ...
- Python3.6全栈开发实例[006]
6.检查传入字典的每一个value的长度,如果大于2,那么仅保留前两个长度的内容,并将新内容返回给调用者. dic = {"k1": "v1v1", " ...
- 我的Android进阶之旅------>【强力推荐】Android开源图表库XCL-Charts版本发布及展示页
因为要做图表相关的应用,后来百度发现了一个很好的Android开源图表库(XCL-Charts is a free charting library for Android platform.) 下面 ...
- ActiveMQ 核心概念
1.Failover 当A无法为客户服务时,系统能够自动地切换,使B能够及时地顶上继续为客户提供服务,且客户感觉不到这个为他提供服务的对象已经更换. 如数据库.应用服务.硬件设备等的失效转移. 2.S ...
- Windows 上将Tomcat 8 安装为系统服务
第一部分 应用场景 需要服务器上Tomcat不显示启动窗口 需要服务器上Tomcat开机自启动 ... 第二部分 配置过程 一.修改配置文件 1 {Tomcat_HOME}/bin/service.b ...