1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="../build/react.js"></script>
    5. <script src="../build/react-dom.js"></script>
    6. <script src="../build/browser.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="example"></div>
    10. <script type="text/babel">
    11. var MyComponent = React.createClass({
    12. handleClick: function() {
    13. this.refs.myTextInput.focus();
    14. },
    15. render: function() {
    16. return (
    17. <div>
    18. <input type="text" ref="myTextInput" />
    19. <input type="button" value="Focus the text input" onClick={this.handleClick} />
    20. </div>
    21. );
    22. }
    23. });
    24. ReactDOM.render(
    25. <MyComponent />,
    26. document.getElementById('example')
    27. );
    28. </script>
    29. </body>
    30. </html>
    32. 01、组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM （virtual DOM）
    33. 只有当它插入文档以后，才会变成真实的DOM。根据React的设计，所有DOM的变动，都先虚拟DOM上发生，
    34. 然后再将实际发生变动的部分，反映在真实DOM上，这种算法叫DOM diff.
    36. 02、从组件获取真实DOM的节点，用到 ref属性。this.refs.[refName] 会返回这个真实DOM节点。