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. ...
随机推荐
- [学习笔记] Uplift Decision Tree With KL Divergence
Uplift Decision Tree With KL Divergence Intro Uplift model 我没找到一个合适的翻译,这方法主要应用是,探究用户在给予一定激励之后的表现,也就是 ...
- leetcode-hard-array-41. First Missing Positive-NO
mycode class Solution(object): def firstMissingPositive(self, nums): """ :type nums: ...
- mysql之索引 应用于事物 内连接、左（外）连接、右（外）连接
什么是索引 索引就像是一本书的目录一样,能够快速找到所需要的内容 索引的作用 加快查询速率,降低IO成本加快表与表之间的连接,减少分组和排序时间 索引类型 普通索引:没有唯一性的基本索引 唯一索引:有 ...
- LC 272. Closest Binary Search Tree Value II 【lock，hard】
Given a non-empty binary search tree and a target value, find k values in the BST that are closest t ...
- Tushare金融大数据入门
Tushare金融大数据社区,是一个免费提供各类金融数据和区块链数据的平台 ,旨在助力智能投资与创新型投资. 积分 数据千万条,积分第一条 目前,提供的数据包含股票.基金.期货.债券.外汇.行业大数据 ...
- Python中的变量和作用域详解
Python中的变量和作用域详解 python中的作用域分4种情况: L:local,局部作用域,即函数中定义的变量: E:enclosing,嵌套的父级函数的局部作用域,即包含此函数的上级函数的局部 ...
- 在Linux中使用minikube
Minikebe Minikube是一个轻量级Kubernetes实现,它在本地机器上创建一个VM,并部署一个只包含一个节点的简单集群. Minikube使用Docker机器来管理Kubernetes ...
- C#反射动态创建实例并调用方法
在.Net 中,程序集(Assembly)中保存了元数据(MetaData)信息,因此就可以通过分析元数据来获取程序集中的内容,比如类,方法,属性等,这大大方便了在运行时去动态创建实例. MSDN解释 ...
- Day05:集合操作——线性表(二) / 查找表 / 文件操作——File(一)
文件操作:https://www.cnblogs.com/wsnb8/p/11403626.html
- Python爬虫学习==>第十一章：分析Ajax请求-抓取今日头条信息
学习目的: 解决AJAX请求的爬虫,网页解析库的学习,MongoDB的简单应用 正式步骤 Step1:流程分析 抓取单页内容:利用requests请求目标站点,得到单个页面的html代码,返回结果: ...