React-非dom属性-key
一、react性能
1.内容类似的尽量归到同一人组件，这样react不用每次都重新渲染
2.类似列表的内容，要加上key,可减少渲染次数
3.react渲染过程
二、代码
<!DOCTYPE html>
<html lang="zh-cn"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<script src="./react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var style = {
color : "red",
border: "1px #000 solid",
};
var HelloWorld = React.createClass({
render: function(){
return <ul>
<li key="1">1</li>
<li key="2">2</li>
<li key="3">3</li>
</ul>
}
});
var rawHTML = {
__html: "<h2>非dom属性:dangerouslySetInnerHTML标签</h2>"
};
React.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body);
</script>
</body> </html>
React-非dom属性-key的更多相关文章
- react的非DOM操作
非dom属性?dangerouslySetInnerHTML,ref,key非dom标准属性,也就是说dom标准里面没有规定的属性,react引入了三个非dom属性,如上. dangerouslySe ...
- 1.5 React 与 DOM
在这一节中,主要的讨论范围为 React 与 DOM 相关的处理,包括: 如何获取 DOM 元素 如何做事件响应处理 表单处理 style 属性 这节讲述过后,我们将会为 TODO 应用添加完整的事件 ...
- React 虚拟 DOM 的差异检测机制
React 使用虚拟 DOM 将计算好之后的更新发送到真实的 DOM 树上,减少了频繁操作真实 DOM 的时间消耗,但将成本转移到了 JavaScript 中,因为要计算新旧 DOM 树的差异嘛.所以 ...
- React组件中的key
React组件中的key 一.key的作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给reac ...
- Js位置与大小（1）——正确理解和运用与尺寸大小相关的DOM属性
在web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明.本文作为第一篇,介绍DOM提供的与尺寸大 ...
- React虚拟DOM具体实现——利用节点json描述还原dom结构
前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...
- React 之props属性
React 里有一个非常常用的模式就是对组件做一层抽象.组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现. 可以使用 JSX 展开属性 来合并现有的 props 和其 ...
- react虚拟dom diff算法
react虚拟dom:依据diff算法 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快! ...
- 如何理解虚拟React的DOM（转）
目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异 ...
随机推荐
- 33.allegro中Autosilk top, Silkscreen top 和Assembly top三个什么区别（转）
Autosilk top, Silkscreen top 和Assembly top Autosilk top:最后出gerber的时候,自动生成的丝印层.会自动调整丝印位置,以及碰到阻焊开窗的地方, ...
- iOS-NSDate 相差 8 小时
转载自:http://blog.csdn.net/diyagoanyhacker/article/details/7096612 NSDate存储的是世界标准时(UTC),输出时需要根据时区转换为本地 ...
- windows+nginx+fcgi配置
最近项目要求要学习一下nginx的知识,由于自己学疏才浅,搞了一天多终于基本搭建出来了,怕日后忘记,所以在此记录一下 nginx的历史,应用和种种就不记录了,自行百度.....Fcgi 相比cgi的好 ...
- 安装配置tomcat
1.安装nginx 下载nginx-1.4.3 解压: tar zxvf nginx-1.4.3.tar.gz 编译安装: ./configure --prefix=/app/act/nginx/ng ...
- pxe+preseed安装配置（2）
1.tftp使用独立daemon,这样不用再安装xinet, apt-get install tftp-hpa tftpd-hpa cat /etc/default/tftpd-hpa TFTP_US ...
- 三级联动（ajax）
<body> <div id="zhuti"></div> </body><script type="text/ja ...
- UVALive - 6529 找规律+dp
题目链接: http://acm.hust.edu.cn/vjudge/problem/47664 Eleven Time Limit: 5000MS 问题描述 In this problem, we ...
- BZOJ 2301 Problem b
AC通道:http://www.lydsy.com/JudgeOnline/problem.php?id=2301 冬令营听了莫比乌斯,这就是宋老师上课讲的例题咯[今天来实现一下] #include& ...
- 【BZOJ】【1503】 【NOI2004】郁闷的出纳员
Splay Splay的模板题吧……妥妥的序列操作= =(好像有段时间没写过这种纯数据结构题了……) /************************************************ ...
- [noip2005提高]过河 dp
由于L的范围到了109,用普通dp做肯定是不成了: 可以观察到M的数量很小,dp在转移的过程中有大量的无用转移: 可以想到压缩范围,问题是如何压缩,观察若S=9,T=10时,能到达的点,9,10,18 ...