[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 也 ...
随机推荐
- 常见算法合集[java源码+持续更新中...]
一.引子 本文搜集从各种资源上搜集高频面试算法,慢慢填充...每个算法都亲测可运行,原理有注释.Talk is cheap,show me the code! 走你~ 二.常见算法 2.1 判断单向链 ...
- 当usbnet打印 kevent * may have been dropped(转)
http://patchwork.ozlabs.org/patch/815639/ Every once in a while when my system is under a bit of str ...
- 优雅的解决springboot Aop @Cacheable this不生效
问题描述:在同一个类中springAop不生效,例如在同一个类中没有 @Cacheable的方法调用本类有 @Cacheable的方法,则缓存不会设置. 原因:springaop基于java prox ...
- promise处理回调地狱
promise 异步调用 异步结果分析 定时任务 ajax 自定义事件函数 多次异步调用依赖分析(promise 应用场景) 多次异步调用结果顺序不确定问题 $.ajax({ url: 'http:l ...
- jQuery 源码解析(三) pushStack方法 详解
该函数用于创建一个新的jQuery对象,然后将一个DOM元素集合加入到jQuery栈中,最后返回该jQuery对象,有三个参数,如下: elems Array类型 将要压入 jQuery 栈的数组元素 ...
- CS224N Assignment1 Section 1
运行环境需求 # All Import Statements Defined Here # Note: Do not add to this list. # All the dependencies ...
- Vue基础框架
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 设置语言为 ...
- Jenkins持续集成的应用--基础
1.测试工程师为什么要掌握持续集成 一个程序员如果想发布一个产品,他需要编码.编译.测试,发布的过程.对于一个企业来说,如果也想发布一个产品的话,同样的也是需要上述的过程,区别在于企业要发布的产品的需 ...
- Vue 拖拽组件 vuedraggable 和 vue-dragging
一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...
- jsTree树插件
前言 关于树的数据展示,前后用过两个插件,一是zTree,二是jsTree,无论是提供的例子(可下载),还是提供的API在查找时的便捷程度,zTree比jsTree强多了,也很容易上手,所以这里只讲下 ...