[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 也 ...
随机推荐
- 理解CMS GC日志
本文翻译自:https://blogs.oracle.com/poonam/entry/understanding_cms_gc_logs 准备工作 JVM的GC日志的主要参数包括如下几个:-XX:+ ...
- 按照官网的升级完socket.io报错Manager is being released。
查阅了很多资料和英文官网自己也提出了一些问题,估计官网以前有该类的问题历史,懒得回复. 终于功夫不负有心人原因竟然是:你的manager被释放了. you need to make sure the ...
- 在.NET Core 3.0 Preview上使用Windows窗体设计器
支持使用基于Windows窗体应用程序的.NET Core 3.0(预览)的Windows窗体设计器 介绍 截至撰写本文时,Microsoft和社区目前正在测试.NET Core 3.0.如果您在.N ...
- 前端移动框架Framework7入门
正版官网:https://framework7.io/ (英文) 对应国内:http://www.framework7.cn/ (中文) 本地构建步骤(Demo级别) 1.HTML结构 2.引入Fr ...
- C# - VS2019调用AForge库实现调用摄像头拍照功能
前言 作为一名资深Delphi7程序员,想要实现摄像头扫描一维码/二维码功能,发现所有免费的第三方库都没有简便的实现办法,通用的OpenCV或者ZXing库基本上只支持XE以上的版本,而且一维码的识别 ...
- DRF简易了解
Drf框架 一丶API接口 # 为了在团队内部形成共识.防止个人习惯差异引起的混乱,我们需要找到一种大家都觉得很好的接口实现规范,而且这种规范能够让后端写的接口,用途一目了然,减少双方之间的合作成本. ...
- Qt播放音视频文件报错DirectShowPlayerService::doRender: Unresolved error code 0x80040266或DirectShowPlayerService::doSetUrlSource: Unresolved error code 0x80004005 ()
使用QMediaPlayer和QVideoWidget QHBoxLayout *m_layout=newQHBoxLayout(this); QMediaPlayer *m_player = new ...
- c# 读取txt文件中文乱码解决方法
之前做过一个项目,在程序运行目录下有个txt文件,文件内容是中文的时候会乱码, 后来用这个函数处理后,就不乱码了: private string GetPDA_Code() { ...
- redo log重做日志缓冲
---------------------------------- 2015-02-10---------------------------------- innodb redo log (重做日 ...
- Windows | Ubuntu 16.04/18.04 安装Pycharm并永久破解以及安装配置Anaconda3
Ubuntu 18.04下 1.安装python 2._版本,输入 sudo apt install python 命令行输入 python或python3会打开对应的版本. 输入 exit()或C ...