React-非dom属性-dangerouslySetInnerHTML标签

<!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 <p>你好React</p>;
			}
		});
		var rawHTML = {
			__html: "<h2>非dom属性:dangerouslySetInnerHTML标签</h2>"
		};
		React.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>, document.body);
	</script>
</body>

</html>

  

时间: 2024-08-07 04:09:36

React-非dom属性-dangerouslySetInnerHTML标签的相关文章

react的非DOM操作

非dom属性?dangerouslySetInnerHTML,ref,key非dom标准属性,也就是说dom标准里面没有规定的属性,react引入了三个非dom属性,如上. dangerouslySetInnerHTML:字面意思,危险的设置内部html,这个属性的作用就是在jsx中,直接插入html代码.我们为什么用这个属性插入html代码呢?而不是在编写代码的时候直接写入呢?因为有的时候我们在编写代码的时候,无法确实要插入什么代码,也就是说这部分html代码是动态生成的.或者说不是由我们来编

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

前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其中的虚拟DOM,其实,就是利用json数据来代替DOM结构表示,然后利用这个json数据,渲染出DOM树,总体添加到页面中.下面,我就通过介绍我如何实现上面实际问题的思路,一边完成实际需求,一边实现React中虚拟DOM渲染成DOM的原理. 模拟数据结构如下: 1 var allJson = [{

XML DOM -属性和方法

XML DOM - 属性和方法 属性和方法向 XML DOM 定义了编程接口. 编程接口 DOM 把 XML 模拟为一系列节点对象.可通过 JavaScript 或其他编程语言来访问节点.在本教程中,我们使用 JavaScript. 对 DOM 的编程接口是通过一套标准的属性和方法来定义的. 属性经常按照"某事物是什么"的方式来使用(例如节点名是 "book"). 方法经常按照"对某事物做什么"的方式来使用(例如删除 "book&quo

react虚拟dom diff算法

react虚拟dom:依据diff算法台 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快!jsg更容易表示节点 所以:把js和html混写在一起来解决,React出现了!!! diff算法是虚拟dom核心: 传统的diffs算法复杂度是次方级别增长,而react用的优化过的diff算法: 过程:1.节点比较(属性.文本):2.记录差别(编号):3.增删改查(js): 优化点: 情景1:

jquery动画控制非css属性

JQuery的animate()方法可以通过渐变的更改CSS属性来实现简单的动画效果, 比如 1 $("#box").animate({height:"300px"},3000); 可以控制id为box的标签在3秒内将高度更改到300px.那么如果想要控制非CSS属性呢,比如说针对一些WebGl中的动画控制,如果使用setInterval倒是可以实现效果,但是太过麻烦.这个时候就可以使用animate方法,生成递进的值,自己获取值来控制一些非CSS属性,比如: //

HTML DOM属性

一.HTML DOM属性 属性是节点(HTML元素)的值,可以对其进行修改或获取. 编程接口: 可以通过JavaScript(以及其他编程语言:可以让计算机读的懂得语言)对HTML DOM进行访问. 所有的HTML元素被定义为对象,而编程接口则是对象方法和对象属性.方法是可以执行的动作(如,添加和修改元素):属性是能被获取或是修改的值(如,节点名称或内容) 二.HTML DOM属性分类 innerHTMl获取元素内容:nodeName规定节点的名称:nodeValue规定节点的值:nodeTyp

原子属性与非原子属性,互斥锁与自旋锁介绍

nonatomic 非原子属性 非线程安全,适合内存小的移动设备(手机,平板...) atomic 原子属性(线程安全,但需要消耗大量资源)针对多线程设计的,为默认值,保证同一时间只有一个线程能够写入;本身就是一把自旋锁;单写多读,单个线程写入,多个线程读取 注意:当重写属性的get与set方法时需要在@implementation后添加:@synthesiae 属性名 = _属性名; 互斥锁与自旋锁对比 互斥锁:如果发现其他线程正在执行锁定代码,线程会进入休眠(就绪状态),等其他线程时间到打开

React虚拟DOM浅析

转帖: http://www.alloyteam.com/2015/10/react-virtual-analysis-of-the-dom/?hmsr=toutiao.io&bsh_bid=928783684 在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什么是虚拟DOM? 虚拟DOM VS 直接操作原生DOM? 虚拟DOM VS MVVM?

线程同步基础之使用非依赖属性实现同步

当使用synchronized关键字来保护代码块时,必须把对象引用作为传入参数.通常情况下,使用this关键字来引用执行方法所属的对象,也可以使用其他的对象对其进行引用.一般来说,这些对象就是为这个目的而创建的.例如,在类中有两个非依赖属性,它们被多个线程共享,你必须同步每一个变量的访问,但是同一时刻只允许一个线程访问一个属性变量,其他某个线程访问另一个属性变量. 这里我们演示电影院售票场景.这个范例模拟了有两个屏幕和两个售票处的电影院.一个集票处卖出的一张票,只能用于其中一个屏幕,不能同时用于