ReactJS读书笔记:DOM操作
来源:互联网 发布:you do not know js 编辑:程序博客网 时间:2024/05/12 14:07
一 获取DOM元素
react可以允许我们通过 ref 来定位一个组件。具体的做法是:
先给一个组件设置一个 ref=‘xxx’ 的属性,注意这个ref必须是全局唯一的。
<input ref=‘city’ />
然后就可以通过 this.refs.city 来访问这个组件。
但是请注意,这里拿到的只是虚拟DOM,而不是真实的DOM。
只有在render方法执行之后,并且react已经完成了DOM的更新,才能通过 this.refs.city.getDOMNode() 来拿到原生的DOM元素。
如果你在react更新DOM之前这么做,很有可能拿到的是空的或者是旧的DOM元素。
一般我们会在 componentDidMount 后者 事件回调中使用 getDOMNode 方法。
二 整合非React库
我们需要操作原生DOM最常见的情况就是我们使用了其他的库进行DOM操作。比如我们使用了jquery的一个自动补全插件,他需要在原生DOM上初始化。
这个时候我们需要通过 getDOMNode() 拿到原生的DOM并调用jquery插件的初始化方法。
如下代码所示,我们有一个City组件,它内部调用了jquery autocomplete做了自动补全。在选中一个城市之后会log出来。
- var City = React.createClass({
- render: function() {
- return (
- <input type="text" ref='city' />
- );
- },
- onSelect: function(s) {
- console.log("you have select: "+s.value);
- },
- componentDidMount: function() {
- var input = this.refs.city.getDOMNode();//拿到了原生DOM
- $(input).autocomplete({
- lookup: ["北京", "上海", "杭州"],
- onSelect: this.onSelect
- });
- }
- });
这样做没什么问题,但是在City中处理一个jquery的自动补全插件是很烦人的一件事。而且,如果自动补全插件升级了你可能还需要去改City组件的代码。
假设我们没有足够的精力写一个基于React的自动补全插件,我们更好的做法是把自动补全“包装”成一个 React组件,如下所示,我们包装了一个 AC 组件:
- var AC = React.createClass({
- render: function() {
- return (
- <input type="text" name={this.props.name} />
- );
- },
- onSelect: function(s) {
- this.props.onSelect(s);
- },
- componentDidMount: function() {
- var input = this.getDOMNode();//拿到了原生DOM
- $(input).autocomplete({
- lookup: ["北京", "上海", "杭州"],
- onSelect: this.onSelect
- });
- }
- });
- //这样city组件就可以直接使用AC组件了。
- var City = React.createClass({
- render: function() {
- return (
- <AC name='city' onSelect={this.onSelect}></AC>
- );
- },
- onSelect: function(s) {
- console.log("you have select: "+s.value);
- }
- });
三 侵入式插件
上面的自动补全插件其实还算好,他没有改变DOM元素,只是绑定了事件。
有些插件可能会直接改变你的DOM元素,这样会导致 虚拟DOM 和原生DOM不一致的问题。这个时候最好的做法就是不要在render方法中渲染虚拟DOM了,而是直接在 componentDidMount 方法中自行创建原生DOM。但是注意请在 componentDidUnmount 中销毁你创建的DOM。
不过要尽量避免这种情况,因为 Virtual DOM 才是 react的精髓所在。
0 0
- ReactJS读书笔记:DOM操作
- ReactJS读书笔记五:DOM操作
- ReactJS读书笔记五:DOM操作
- ReactJS如何DOM操作?
- ReactJS读书笔记四:mixins
- ReactJS读书笔记四:mixins
- 【读书笔记】【jQuery基础教程】【第五章--DOM操作】
- 高性能javascript读书笔记之操作DOM
- ReactJS读书笔记二:组件生命周期
- ReactJS读书笔记二:组件生命周期
- ReactJS读书笔记一:深入理解JSX
- ReactJS读书笔记一:深入理解JSX
- 锋利的Jquery【读书笔记】 -- 第三章 jQuery中的DOM操作
- 锋利的jquery读书笔记---jquery的dom操作
- 《锋利的jQuery》读书笔记第三章(DOM操作)
- reactjs
- ReactJS
- ReactJS
- 【OpenCV入门教程之十七】OpenCV重映射 & SURF特征点检测合辑
- Android 编程下 Touch 事件的分发和消费机制
- Android EditText和软键盘绑定的问题
- iOS之网上下载数据的两种方式
- linux 截包
- ReactJS读书笔记:DOM操作
- 【OpenCV入门教程之十八】OpenCV仿射变换 & SURF特征点描述合辑
- samba的简单使用
- TCP 与 UDP的区别
- Struts2框架开发登录界面
- Three.js讲解以及WEBGL实例(转)
- c++中vector的用法详解
- <css3>background
- 1810: water problem II