七.獲取真實的DOM節點

時間 2019-11-11

標籤獲取真實 dom 節點欄目 HTML 简体版

原文原文鏈接

組件並非真實的DOM節點。而是存在於內存之中的數據結構。叫作虛擬DOM(virtual DOM). 只有當它插入文檔後，纔會變成真實的DOM。html

根據React的設計。全部的DOM變更。都先在虛擬DOM下發生。而後在將實際發生變更的部分，反應在真實DOM上。這種算法叫DOMdiff.他能夠極大的提升網頁的性能表現。react

可是有時須要從組件獲取真實 DOM 節點。這時要用到ref屬性。算法

<!DOCTYPE html>
<html>
<head>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">

      var MyComponent = React.createClass({
        handleClick:function(){
          this.refs.myTextInput.focus();
        },

        render:function(){
          return (
            <div>
              <input type="text" ref="myTextInput" />
              <input type="button" value="Focus the text input" onClick={this.handleClick} />
            </div>
            )
        }
      })

      ReactDOM.render(
        <MyComponent />,
        document.getElementById("example")
        )
    </script>
</body>
</html>babel