React学习之获取真实DOM节点

曾经终败给现在 2022-11-30 14:28 253阅读 0赞

**说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][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="../build/react-dom.dev.js"></script>
        <script src="../build/brower.min.js"></script>
        <title>Dmeo-04</title>
    </head>
    <body>
        <div id="demo-4"></div>
        <script type="text/babel">
            class MyCompinent extends React.Component {
                constructor(props) {
                    super(props);
                     // 创建一个 ref 来存储 textInput 的 DOM 元素
                    this.textInput = React.createRef();
                    this.focusTextInput = this.focusTextInput.bind(this);
                }
    
                focusTextInput() {
                    /* 
                        直接使用原生 API 使 text 输入框获得焦点
                        注意：我们通过 "current" 来访问 DOM 节点
                    */
                    this.textInput.current.focus();
                }
    
                render() {
                     /*
                        告诉 React 我们想把 <input> ref 关联到
                        构造器里创建的 `textInput` 上
                    */
                    return (
                        <div>
                            <input type="text" ref={ this.textInput } />
                            <input 
                                className="input-button"
                                type="button"
                                value="Focus the text input" 
                                onClick={ this.focusTextInput }
                            />
                        </div>
                    )
                }
            }
    
            ReactDOM.render(
                <MyCompinent />,
                document.getElementById("demo-4")
            )
        </script>
    </body>
    </html>
    <style>
        .input-button {
            cursor: pointer;
        }
    </style>

在本例中，我们首先使用React.createRef创建了一个ref用于存储input的DOM，当我们需要访问这个标签的DOM时，可以直接使用this.textInput，然后根据原生API来访问相应的DOM节点进行相应的操作。运行效果：

![20200824214756258.png][]

上一篇：**[React学习之组件与props][React_props]**

**下一篇： [React学习之state与生命周期][React_state]**

[https_github.com_Brucewu998_react.js-learning]: https://github.com/Brucewu998/react.js-learning
[DOM diff]: http://calendar.perfplanet.com/2013/diff/
[20200824214756258.png]: /images/20221123/bc3fd1b3a12f479cb1403e2c0a52c737.png
[React_props]: https://blog.csdn.net/qq_37338983/article/details/108207862
[React_state]: https://blog.csdn.net/qq_37338983/article/details/108230989