React获得真实的DOM操作
真实的DOM操作
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，
我们来看一组案例
在代码中我们定义了一个组件 MyComponent 组件名字首字母必须大写 ， handleClick（）是点击事件，其中的ref
是用来绑定render（）输出的任何组件上。
组件 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
React 除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<h1>获取真实DOM</h1>
<textarea style="width: 700px;height:500px;">
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
//this.refs.myTextInput.value
var example=document.getElementById('example');
var test=document.getElementById('test');
test.innerHTML=this.refs.myTextInput.value;
example.appendChild(test)
},
render: function() {
return (
<div>{/*HTML中的注释需要加花括号才可以*/}
<input type="text" ref="myTextInput" />{/*ref是用来绑定到render()输出到任何组件上*/}
<input type="button" value="点击获得input框的value" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</textarea>
<h3>演示：</h3>
<div id="example"></div>
<div id="test"></div>
<script type="text/babel">
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
//this.refs.myTextInput.value var test=document.getElementById('test');
test.innerHTML=this.refs.myTextInput.value; },
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />{/*ref是用来绑定到render()输出到任何组件上*/}
<input type="button" value="点击获得input框的value" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</script>
</body>
</html>
React获得真实的DOM操作的更多相关文章
- React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...
- ref 和 React.js 中的 DOM 操作
在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...
- [react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
- 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- react.js 获取真实的DOM节点
为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点. var MyComponent = React.crea ...
- react的非DOM操作
非dom属性?dangerouslySetInnerHTML,ref,key非dom标准属性,也就是说dom标准里面没有规定的属性,react引入了三个非dom属性,如上. dangerouslySe ...
- react系列一，react虚拟dom如何转成真实的dom
react,想必作为前端开发一定不陌生,组件化以及虚拟dom使得react成为最受欢迎额前端框架之一.我们知道react是基于虚拟dom的,但是什么是虚拟dom呢,其实就是一组js对象,那么我们今天就 ...
- React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson3 转载请注明出处,保留原文链接和作者信息. 看看上一节我们的代码,仔细留意一下 change ...
- react入门-----（jsx语法，在react中获取真实的dom节点）
1.jsx语法 var names = ['Alice', 'Emily', 'Kate']; <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的 ...
随机推荐
- JQuery基础 接下来我将把我最近学习jQuery所做的笔记发布，希望对初学者有些许帮助，也方便自己以后复习
jQuery简介 1.概念: jQuery是一个优秀的JavaScript库,而非JavaScript.它是轻量级的库2.兼容性:兼容css3,以及各种浏览器.3版本: 1.x-----------兼 ...
- python中列表 元组 字典 集合的区别
列表 元组 字典 集合的区别是python面试中最常见的一个问题.这个问题虽然很基础,但确实能反映出面试者的基础水平. (1)列表 什么是列表呢?我觉得列表就是我们日常生活中经常见到的清单.比如,统计 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- 打造基于Clang LibTooling的iOS自动打点系统CLAS（三）
1. 源码变换 第一章我们提到过,CLAS的本质是对源码做一次非常简单的变换(有些文章里称作变形),即Source-Source-Transformation,将打点代码精确地插入到目标函数的首部,保 ...
- Grails笔记三：完整的文件上传实例
文件上传在web应用中是比较普遍的,相对于使用jsp等技术实现文件上传,Grails的文件上传着实让人喜爱,因为极其简单,让人看一遍就容易轻松记住!不多说,实例如下: 假设已有一个名为uploadFi ...
- JSON 理解
转自: http://blog.csdn.net/qyf_5445/article/details/8635578 (json很全面的理解) http://www.cnblogs.com/haitao ...
- Ajax异步请求模板
$.ajax({ url: '', type: 'post', data: {'id':id}, dataType: 'json', success: function(data,statusText ...
- React Native底|顶部导航使用小技巧
导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...
- 英语学习案例分析APP 201421123108 王坤彬
第一部分.调研,测评 1.第一次使用经验. 我使用的时候苹果手机下载的必应软件.第一次使用感觉还好,但是知名度比较低,比不上喜马拉雅听书软件,这里我就做两者的对比.首先界面以及种类明显逼格更差点.必应 ...
- 201521123082 《Java程序设计》第6周学习总结
201521123082 <Java程序设计>第6周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念 ...