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 步骤三:把差异 ...
随机推荐
- 6.Inout双向端口信号处理方法
Verilog中inout端口的使用方法 (本文中所有Verilog描述仅为展示inout端口的用法,实际描述则需要更丰富的功能描述) Inout端口的使用 在芯片中为了管脚复用,很多管脚都是双向的, ...
- Ubuntu 关闭锁屏界面的 on-screen keyboard
试了试屏幕键盘,在 系统设置里开启了,又关了,但是在屏幕解锁时总是出现 screen keyboard,老烦人了,不知到在哪里关闭了,系统设置里面都关了,网上搜了解决办法,原来在这里 把 show w ...
- [LAMP]【转载】——PHP7.0的安装
***原文链接:http://my.oschina.net/sallency/blog/541287 php编译过程报错解决可参考:http://www.cnblogs.com/z-ping/arch ...
- 基于.net mvc的校友录(三、实体模型实现)
实体模型设计 由于是实际开发,而且是时间比较紧的,所以,在开发实现过程中,总有一些对原计划的改动: AlumniBookModel数据库实体模型 这是主数据实体类,EF会根据此实体生成数据库,它的每一 ...
- Iphone5s 通话质量差 问题解决
从某段时间开始,我的手机出现通话质差的情况.而且与信号电平有密切关系,只要覆盖稍差的地方,通话就劣化. 具体症状是我时常听不清对方说话,但对方能够清晰听到我说话. 因为本人也是从事无线网络优化软件产品 ...
- eclipse for jee版配置tomcat
在网上搜到的大多都是插件配置,其实默认的就可以配置tomcat的. 第一步:New -> Other -> Server ,然后选择Apache下的tomcat的版本. 注意:如果Next ...
- android 开发-设置控件/view的水平方向翻转
设置控件沿着水平方向翻转(即Y轴180°) 看效果: 代码: <pl.droidsonroids.gif.GifImageView android:id="@+id/gv_image1 ...
- ZBar之自定义二维码扫描
// // YvanQRCodeViewController.m // zBar // // Created by City--Online on 15/6/8. // Copyright (c) 2 ...
- python 解析web接口的json数据
实例1-使用urllib2 #utf-8 import urllib2 import json url="http://xxx.com" #获取json格式的字符串 page=ur ...
- 单点登陆CAS安装过程中可能遇到的问题
可能遇到的问题: 错误: java.security.cert.CertificateException: No name matching localhost found 原因: keystore里 ...