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. ...
随机推荐
- VMware安装CentOS后无法无法识别网卡的解决方法
请找到安装CentOS虚拟机的安装目录,找到.vmx后缀名的文件,点击鼠标右键选择用记事本打开,在文件的最后一行添加内容:ethernet0.virtualDev = "e1000" ...
- Python 的with关键字
Python 的with关键字 看别人的代码时,with关键字经常会出现,博主决定梳理一下with以及python中上下文(context)的概念 1. 上下文管理器概念 Context Manage ...
- ubuntu最近升级到最新的linux内核后，网络无法使用怎么办？
答:进入旧的内核中编译需要的网卡模块 1. 启动旧的内核进入系统 2. 安装新内核源码 3. 找出当前的网卡型号 4. 尝试卸载某个与网卡相关的内核模块,观察是否影响当前网卡的使用,如果有影响,那么便 ...
- NodejS---require的机制
假设Y是路径,X是文件名或目录名,当 Nodejs 遇到 require(Y+X) 时,按照下面的顺序处理: 1.如果 X 是核心模块(例如:require("http")) a. ...
- Scope 'request' is not active for the current thread
Unable to instantiate Action, getUserAction, defined for 'getUser' in namespace '/'Error creating be ...
- 网络通信框架之okHttp
主页: https://github.com/square/okhttp 特点: * 支持HTTP/2 和 SPDY * 默认支持 GZIP 降低传输内容的大小 * 支持网络请求的缓存 * 当网络出现 ...
- mongdb mapReduce聚合操作
1.数据准备 请看group操作 2.mapReduce名词解释 mapReduce 随着"大数据"概念而流行.其实mapReduce的概念非常简单,从功能上说,相当于RDBMS的 ...
- JavaScript（3）——文档工具
文档工具 LEARN HTML = 教程 HTML REFERENCE = 字典 HTML + CSS + JAVASCRIPT = DYNAMIC HTML 推荐浏览器: Chrome浏览器(有丰 ...
- django实现利用mailgun进行收发邮件
django窗口类运用和邮件收发 运用django窗口类来完成表单html 1 具体你看网址: https://www.cnblogs.com/guguobao/p/9322027.html 利用窗口 ...
- WinRar制作安装包
这次研究了下WinRar制作程序安装包,我使用的是5.21版本. 选中要打包的文件,先压缩为RAR文件,然后双击打开文件 输入目录时可以选择前两项,输入绝对路径时,则为第三项. 配置解压前运行的解压后 ...