说明:本系列所有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&#