一、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的更多相关文章

  1. react的非DOM操作

    非dom属性?dangerouslySetInnerHTML,ref,key非dom标准属性,也就是说dom标准里面没有规定的属性,react引入了三个非dom属性,如上. dangerouslySe ...

  2. 1.5 React 与 DOM

    在这一节中,主要的讨论范围为 React 与 DOM 相关的处理,包括: 如何获取 DOM 元素 如何做事件响应处理 表单处理 style 属性 这节讲述过后,我们将会为 TODO 应用添加完整的事件 ...

  3. React 虚拟 DOM 的差异检测机制

    React 使用虚拟 DOM 将计算好之后的更新发送到真实的 DOM 树上,减少了频繁操作真实 DOM 的时间消耗,但将成本转移到了 JavaScript 中,因为要计算新旧 DOM 树的差异嘛.所以 ...

  4. React组件中的key

    React组件中的key 一.key的作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给reac ...

  5. Js位置与大小（1）——正确理解和运用与尺寸大小相关的DOM属性

    在web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明.本文作为第一篇,介绍DOM提供的与尺寸大 ...

  6. React虚拟DOM具体实现——利用节点json描述还原dom结构

    前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...

  7. React 之props属性

    React 里有一个非常常用的模式就是对组件做一层抽象.组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现. 可以使用 JSX 展开属性 来合并现有的 props 和其 ...

  8. react虚拟dom diff算法

    react虚拟dom:依据diff算法 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快! ...

  9. 如何理解虚拟React的DOM（转）

    目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异 ...

随机推荐

  1. 文件读写 swift

    // // ViewController.swift // 文件读写 // // Created by mac on 15/7/12. // Copyright (c) 2015年 fangyuhao ...

  2. IOS获取手机设备型号

    最新型号的设备列表https://www.theiphonewiki.com/wiki/Models #import "iosutils/IOSUtils.h" #import & ...

  3. self.a 和 _a 的区别

    在OC中我们可以通过指令@property定义属性. OC对属性封装了许多方法,同时也会自动实现一些方法,相比实例变量,感觉更加面向对象些. 一般定义属性的方法如下,在Class Test中定义属性i ...

  4. 轻松解决在一个虚拟主机上运行多个 ASP.NET 网站应用

    不知道有没有朋友像我一样会遇到这样一个问题: 在网上购买 .NET 空间,由于虚拟主机的限制,你并不能把某个目录设为一个独立的应用,或者一些价格比较高的空间,虽然可以设置,但数量也是有限的.这个问题导 ...

  5. JS多种方法实现随机颜色；

    JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色.实现随机颜色的方法有多种,下面来看看具体的实现代码: 方法一: var getRandomColor = function() { ...

  6. 这个好像、也许、或许、大概、应该、Maybe真的可以算是传说中的Spring.Net了吧

                                                            这个好像.也许.或许.大概.应该.Maybe真的可以算是传说中的Spring.Net了吧 ...

  7. Careercup - Google面试题 - 6253551042953216

    2014-05-06 01:49 题目链接 原题: Modify the following code to add a row number for each line is printed pub ...

  8. android开发 WriteUTF与readUTF 原理

    今晚上写代码玩,用到java.io.RandomAccessFile.writeUTF(String)函数,而文件默认保存为gbk,显然是乱码.突然想起来去看看存储编码规则,就去找了些文章了解writ ...

  9. 【转】利用TCMalloc优化Nginx的性能

    From: http://www.linuxidc.com/Linux/2013-04/83197.html TCMalloc的全称是 Thread-Caching Malloc,是谷歌开发的开源工具 ...

  10. Codeforces Round #131 (Div. 2) E. Relay Race dp

    题目链接: http://codeforces.com/problemset/problem/214/E Relay Race time limit per test4 secondsmemory l ...