React学习 --- 五.获取真实DOM节点

最新推荐文章于 2021-07-29 21:57:49 发布

Alex-G

最新推荐文章于 2021-07-29 21:57:49 发布

阅读量236

点赞数

分类专栏： React 文章标签： React学习

本文链接：https://blog.csdn.net/u013692823/article/details/100776859

版权

React 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取真实的DOM节点</title>
    <script src="../reactJs/react.development.js"></script>
    <script src="../reactJs/react-dom.development.js"></script>
    <script src="../reactJs/babel.min.js"></script>
    <style>
    </style>
</head>

<body>
<div id="root"></div>

</body>

<script type="text/babel">
    /*
    * React的组件并不是真实的DOM,而是存在于内存之中的一种数据结构,叫做虚拟DOM树.
    * 只有当它插入文档之后,才会变成真实的DOM.
    * 根据React的设计所有的DOM变动都现在虚拟DOM上变动,然后再将时间发生变动的地方反应在真实DOM上.这种算法叫DOM diff.它可以极大提高网页的性能表现.
    *
    * 因此我们获取的DOM节点是不真实的,要想在React中获取真实的DOM节点可以使用REF(VUE类似的)
    * */
    console.log(React.Component);
    class GetRef extends React.Component {
        constructor(props){
            super(props);
            this.inputClick = React.createRef();
            this.handelClick = this.handelClick.bind(this);
        }
        handelClick(){
            console.log(this);
            console.log(this.refs);
            this.refs.inputClick.focus();
        }
        render() {
            return (
                <div>
                    <div><input ref='inputClick'/></div>
                    <div><input onClick={this.handelClick}/></div>
                </div>
            )
        }
    }

    ReactDOM.render(
        <GetRef />,
        document.getElementById("root")
    )

</script>
</html>

Alex-G

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>获取真实的DOM节点</title> <script src="../reactJs/react.development.js"></scrip...
复制链接

扫一扫