React学习之获取真实DOM节点

最新推荐文章于 2020-12-17 13:29:05 发布

coder_路远

最新推荐文章于 2020-12-17 13:29:05 发布

阅读量947

点赞数

分类专栏： react学习文章标签： React 真实DOM React ref

本文链接：https://blog.csdn.net/qq_37338983/article/details/108209357

版权

说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-04文件夹下。

在React中，组件并不是真实的DOM节点，而是一种存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

有时候，我们需要从组件中获取真实的DOM节点，这个时候可以用ref属性，下面来看一个demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../build/react.dev.js"></script>
    <script src&#

最低0.47元/天解锁文章

coder_路远

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React学习之获取真实DOM节点

在React中，组件并不是真实的DOM节点，而是一种存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做DOM diff，它可以极大提高网页的性能表现。有时候，我们需要从组件中获取真实的DOM节点，这个时候可以用ref属性，下面来看一个demo:<!DOCTYPE html>..
复制链接

扫一扫

专栏目录