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. ...
随机推荐
- 发布Rest风格的WebService的SpringBoot极简例子
JDK:1.8.0_212 IDE:STS4(Spring Tool Suit4 Version: 4.3.2.RELEASE) 工程下载:https://files.cnblogs.com/file ...
- tomcat8踩坑：url包含|等特殊字符报错400的问题
这个问题纠缠了我很久了,终于在今天早上解决了,感谢自己的不放弃和不断尝试的决心,我坚信,我可以找到解决方式!! 项目用的spring boot+spring security框架,关于统一错误页面在开 ...
- 前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面 在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...
- react判断点击位置是否为组件内,实现点击外部触发组件内事件
1.导入 import {findDOMNode} from 'react-dom' 2.绑定ref <div ref="refTest" </div> 3.绑定 ...
- awk中begin/end的含义
BEGIN中的内容是在awk开始扫描输入之前执行,一般用来初始化或设置全局变量: 而END之后的操作将在扫描完全部的输入之后执行.
- 七十八：flask.Restful之flask-Restful标准化返回参数以及准备数据
对于一个视图函数,可以指定好数据结构和字段用于返回,以后使用ORM模型或者自定义的模型的时候,它会自动获取模型中相应的字段,生成json数据,然后再返回给前端,这需要导入flask_restful.m ...
- java源码-ReentrantLock源码分析-1
ReentrantLock 继承于lock是比较常用的独占锁,接下来我们来分析一下ReentrantLock源码以及接口设计: Sync是ReentrantLock的内部静态抽象类继承Abstract ...
- SAP Query创建
一.SAP Query创建步骤 1.创建User Group User Group即用户组,可以将所创建的列表使用权限分配给具体用户,Tcode:SQ03 在使用者群組初始界面里输入自定义名称,单击[ ...
- 参考：菜菜的sklearn教学之降维算法.pdf!!
PCA(主成分分析法) 1. PCA(最大化方差定义或者最小化投影误差定义)是一种无监督算法,也就是我们不需要标签也能对数据做降维,这就使得其应用范围更加广泛了.那么PCA的核心思想是什么呢? 例如D ...
- C++类中的一些细节(重载、重写、覆盖、隐藏，构造函数、析构函数、拷贝构造函数、赋值函数在继承时的一些问题)
1 函数的重载.重写(重定义).函数覆盖及隐藏 其实函数重载与函数重写.函数覆盖和函数隐藏不是一个层面上的概念.前者是同一个类内,或者同一个函数作用域内,同名不同参数列表的函数之间的关系.而后三者是基 ...