[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 也 ...
随机推荐
- 记录下github 与 gitee 同时使用
参考 Gitee(码云).Github同时配置ssh key 中间有一步,创建config文件,然后测试就过不去了. 报错:Bad owner or permissions on C:\\Users\ ...
- golang实战--家庭收支记账软件(面向对象)
首先是具体的目录结构: 其中myAccount.go中调用utils包中的函数:utils.go实现记账软件的一些相应的功能: myAccount.go package main import ( & ...
- ubuntu python 版本管理
ubuntu 命令行查看 python 目录 $ whereis python # 显示所有得到 python 目录 $ which python # 显示默认的 python 解释器目录 $ wh ...
- 解决 ubuntu 开机卡死在输入密码界面 && 键盘鼠标失灵!!
近期不知安装了什么package,导致 ubuntu 开机后键盘鼠标一直没法用,刚开始以为是 ubuntu 桌面环境崩溃了,后来发现系统能显示连接到网络.时间也在运行,那应该就是键盘鼠标失灵了. 网上 ...
- springboot项目POM文件第一行报错 Unknown Error
改成 war 不错了,但是打包麻烦 pom 文件报错 UnKnown Error第一次碰到这个问题,花了几个小时才解决,除了UnKnown 没有任何提示.网上搜的大部分情况都不是我遇到的. 还是没有解 ...
- CompletableFuture3
public class CompletableFuture3 { public static void main(String[] args) throws ExecutionException, ...
- IDEA帮助文档快捷键ctrl+q 查看类 方法 变量 帮助文档 注释 快捷键
IDEA查看类 成员变量 局部变量注释快捷键,Ctrl +Q 查看帮助文档 实际项目中,通常一个类中的代码都不少,而且有很多的变量 那么如何快速知道这个变量的一些信息,比如类型,定义? 比如在第50 ...
- 将VMWare中的虚拟机时间设定在一个固定值
1.关闭虚拟机 2.用记事本打开虚拟机的.vmx文件 在末尾添加添加: tools.syncTime = "FALSE" time.synchronize.continue = ...
- python time包中的time.time()和time.clock()的区别
在统计python代码 执行速度时要使用到time包,在查找相关函数时有time.time()和time.clock()两个函数可供选择.而两者是有区别的: cpu 的运行机制:cpu是多任务的,例如 ...
- CSS 基础面试题
1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽 ...