[RN] React-Native中Array渲染的优化
React-Native中Array渲染的优化
例如用Push加进去的数据:
constructor(props){
super(props);
this.state = {
blnUpdate: false,
};
this.testArr = [];
for(var i=0;i<5;i++){
this.testArr.push(
<Text key={i} style={{fontSize:20, color: 'red'}} onPress={this.changeChild.bind(this, i)}>
这是{i}
</Text>
);
}
console.log(this.testArr);
}
增加 key 和 ref
优化后的代码如下:
for(var i=0;i<5;i++){
this.testArr.push(
<Text key={i} ref={'text'+i} style={{fontSize:20, color: 'red'}} onPress={this.changeChild.bind(this, i)}>
这是{i}
</Text>
);
}
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/11179286.html
转载请著名出处!谢谢~~
[RN] React-Native中Array渲染的优化的更多相关文章
- [RN] React Native 中使用 stickyHeaderIndices 实现 ScrollView 的吸顶效果
React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果. 例如下面代码中: <ScrollView showsVert ...
- [RN] React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示
React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示 问题: 0.9.0 或 0.8.0 版本的 ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 腾讯优测优分享 | 探索react native首屏渲染最佳实践
腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~ 此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app ...
- 探索react native首屏渲染最佳实践
文 / 腾讯 龚麒 0.前言 react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react n ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- react native中props的使用
react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
随机推荐
- vs安装包离线下载
1.首先打开visual studio 的官网下载最新的安装程序. https://www.visualstudio.com/zh-hans/?rr=https%3A%2F%2Fwww.baidu.c ...
- Git修改和配置用户名和邮箱
git在push/push to时需要使用到user.name和user.email,切记一定要现配置好查看user.name/user.email git config user.name git ...
- 在jenkins中处理外部命令7z的异常
powershell中有自己的异常捕获机制,但是在jenkins中处理第三方工具抛出的异常时,一直抓不到,疑惑了很久,本篇内容主要描述此次过程及解决方案. powershell可以处理外部异常 try ...
- Image-transpose
import Image im=Image.open('test.jpg') #out = im.resize((128, 128),Image.BILINEAR) #改变大小 #out = im.r ...
- 【转】asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程
最近在学习张善友老师的NanoFabric 框架的时了解到Exceptionless : https://exceptionless.com/ !因此学习了一下这个开源框架!下面对Exceptionl ...
- Java生鲜电商平台-物流配送的设计与架构
Java生鲜电商平台-物流配送的设计与架构 说明:由于Java开源生鲜电商平台是属于自建物流系统,也就是买家下的单,需要公司派物流团队进行派送. 业务需求中买家的下单时间控制在: ...
- SpringBoot打可执行war包
1. 主程序类: @SpringBootApplication public class Application extends SpringBootServletInitializer { @Ove ...
- SolidWorks 2020新增功能之性能提升
SolidWorks解决方案组合的新功能和增强功能将帮助您最大程度地提高设计和制造资源的生产率,同时使您能够更快地交付创新产品.现在我们很激动地告诉你,三维设计SolidWorks 3D CAD 2 ...
- Linux 和 Windows多线程函数对应表
Linux Pthread API Windows SDK 库对应 API 创建 pthread_create CreateThread 退出 pthread_exit ThreadExit 等待 p ...
- vue -全局组件和局部组件
1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...