React 长列表修改时避免全体渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Parent extends React.Component {
constructor() {
super();
var list = []
list.length = 1000
list.fill(1)
this.state = {
list: list.map((e, i) => i)
}
}
onChange = (value, index) => {
const list = [...this.state.list]
list[index] = value
this.setState({list})
}
add = index => {
const list = [...this.state.list]
list.splice(index, 0, list.length + 1)
this.setState({
list
})
}
render() {
return this.state.list.map((e, i) => (
<Input
add={this.add}
onChange={this.onChange}
key={i}
e={e}
i={i}
list={this.props.list} />
))
}
}
class Input extends React.Component {
componentDidUpdate() {
console.log(1)
}
shouldComponentUpdate(nextProps, nextState) {
return nextProps.e !== this.props.e
}
render() {
return (
<input value={this.props.e} onChange={e => this.props.onChange(e.target.value, this.props.i)} onKeyDown={(e) => e.key === 'Enter' && this.props.add(this.props.i)} />
)
}
}
ReactDOM.render(
<Parent />,
document.getElementById('example')
);
</script>
</body>
</html>
React 长列表修改时避免全体渲染的更多相关文章
- React解决长列表方案(react-virtualized)
github地址 高效渲染大型列表的响应式组件 使用窗口特性,即在一个滚动的范围内,呈现你给定数据的一小部分,大量缩减了呈现组件所需的时间,以及创建DOM节点的数量. 缺点:滑动过快,可能会出现空白的 ...
- 为什么你需要在用 Vue 渲染列表数据时指定 key
本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...
- React Native 列表的总结
React Native 列表的总结 FlatList和SectionList都是React Native中高性能的列表组件.这些新的列表组件在性能方面都有了极大的提升, 其中最主要的一个是无论列表有 ...
- UIWrapContent(NGUI长列表优化利器)
NGUI长列表优化利器 优化原理 NGUI3.7.x以上版本 有个新组件 UIWrapContent ,当我们的列表内容很多时,可以进行优化.它不是一次生成全部的child,而是只有固定数量的chil ...
- react-native中使用长列表
React Native 提供了几个适用于展示长列表数据的组件,一般而言我们会选用FlatList或是SectionList. FlatList组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而 ...
- react如何通过shouldComponentUpdate来减少重复渲染
转自:https://segmentfault.com/a/1190000016494335 在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件 ...
- 记一次vue长列表的内存性能分析和优化
好久没写东西,博客又长草了,这段时间身心放松了好久,都没什么主题可以写了 上周接到一个需求,优化vue的一个长列表页面,忙活了很久也到尾声了,内存使用和卡顿都做了一点点优化,还算有点收获 写的有点啰嗦 ...
- react state为数组时插入值
react state为数组时,如何插入值.在react里,一切皆是状态state,如果想通过改变state修改渲染效果,只能yongsetState.但是setState又是key:value格式, ...
- 【Java基础】List迭代并修改时出现的ConcurrentModificationException问题
现在有一个需求,要遍历一个List,假设List里面存储的是String对象,然后该需求事判断里面如果有某个对象,则添加一个新的对象进去.自然,我们得出下面的代码: import java.util. ...
随机推荐
- CentOS6.4_x64配置OpenLDAP+PhpldapAdmin
一:前言 LDAP是轻量目录访问协议,英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.它是基于X.500标准的,但是简单多了并且可以根据需要 ...
- RNN 与 LSTM 的原理详解
原文地址:https://blog.csdn.net/happyrocking/article/details/83657993 RNN(Recurrent Neural Network)是一类用于处 ...
- 【React自制全家桶】八、React动画以及react-transition-group动画库的使用
React动画通常有三种方法实现从易到难为: 1.transition(CSS3自带) 2.animation(CSS3自带) 3.react-transition-group动画库(需要引入插件) ...
- 开源缓存框架之ASimpleCache
ASimpleCache 是一个为android制定的 轻量级的 开源缓存框架.轻量到只有一个java文件(由十几个类精简而来). 1.它可以缓存什么东西? 普通的字符串.JsonObject.Jso ...
- 20 Django REST Framework 更改PUT/PATCH/DELETE的传参字段，默认为pk
01-lookup_field 默认为 lookup_field='pk' 更改后的效果:
- Windows下Elasticsearch安装问题处理
按ES官网的安装方法正常安装就行了.可能遇到的其他问题. 1.报jvm.dll不存在. 只需要重新安装JDK过后,会有jdk1.8.0_73目录和jre1.8.0_73目录.因为java就喜欢玩这种“ ...
- distinct 与group by 去重
mysql中常用去重复数据的方法是使用 distinct 或者group by ,以上2种均能实现,但2者也有不同的地方. distinct 特点: 如:select distinct nam ...
- Eclipse-jee-oxygen-3A版运行时出现Could not create the Java virtual machine？
我有她就够了!!! 详情点击:[她]
- python--Email提醒
发送邮箱的协议是STMP,python内置对SMTP支持,可以发送纯文本邮件,HTML邮件和带附件邮件.python对SMTP支持有smtplib和email两个模块,email负责构造邮件,smtp ...
- Django auth 用户验证
## Django本身内建这样的功能,admin管理页面就使用了这样的验证机制,admin管理页面就有Groups和Users选项 ## 需要在models.py中导入 from django.con ...