天天看點
傳回

React學習 --- 五.擷取真實DOM節點

<!DOCTYPE html>
<html >
<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>
react React學習
上一篇: React 擷取真實的DOM節點
下一篇: react虛拟dom轉真實dom

繼續閱讀