React学习笔记之八(虚拟DOM及refs)

DOM操作非常耗性能,原因在于引发了浏览器的layout和render。React提出了虚拟DOM(对DOM操作进行了抽象)的概念,不再对DOM直接进行操作。必要时React也能够直接获取DOM。虚拟DOM和diff算法使得React具有很高的性能。了解更多https://zhangxuefei.site/p/2118

虚拟DOM

React会在内存中维护一份DOM,render()返回DOM的描述,React将描述和内存中的DOM进行快速比较然后进行更新(只更新变化的)。React实现了全部的事件并且做了兼容确保符合W3C规范,使用事件时不用考虑浏览器的兼容问题,可以直接在旧版浏览器使用HTML5的事件。大多数时候,我们仅仅只需要跟React的虚拟DOM进行交互,但是有时需要访问底层API,比如使用第三方组件(jQuery),React提供了底层的API接口来操作。

 

Refs与findDOMNode()

为了与浏览器进行交互,我们需要获取DOM节点的引用,然后进行操作。在React里面提供了ref属性,可以给任何节点添加ref属性。大多数情况下,可能不需要。但有时也会用到,比如需要对DOM元素进行绝对定位时。

render()有两种:第一种是我们创建组件时,在React.createClass()里面通过render返回的虚拟DOM元素;第二种ReactDOM.render()返回的是这个组件实例的引用,如果是一个无状态的组件,那么返回的就是null。记住一点,JSX不返回组件的实例,仅仅是一个React元素,告诉组件应该呈现为什么样。

 

回调函数形式的ref

给ref添加的回调函数会在组件mounted以后立即调用,并且当前组件的引用会作为一个参数传入。例如:

运行结果:

 

字符串形式的ref

这样把当前的input的元素赋值给了组件的myTextInput属性,this.myTextInput代表了input元素,并且在click里面调用了focus().

如果没有设置ref,那么可以使用ReactDOM.findDOMNode(component)方法。但是React官方不推荐这样做,因为这样打破了封装,使得结构不清晰。

ps:这里使用了=>,类似C#里面的lambda表示。当然这个是ES6里面新的语法,称为Arrow Function(箭头函数)

 

总的来说,refs提供了给子组件传递数据的非常好的方式,但是不应该成为在程序里面数据流的首选,首先是props,state。refs是伴随组件的销毁而销毁,所以不用担心内存泄漏的问题(当然除非我们自己保持了ref的引用)。不要在组件的render()方法内部访问refs,refs不能在无状态的组件里面使用。ref的使用应该不会很频繁,尽量构建良好的组件的层级少用使用ref。

reactjs
作者:张雪飞
出处:https://zhangxuefei.site/p/1442
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

2comments

    1. 有两个原因:①我发现.NET的市场越来越不景气了 ②一直对前端开发比较向往
      还有一个机会:公司开始让我去负责m站点改版,我开始边学习,边改版

发表评论

电子邮件地址不会被公开。 必填项已用*标注