组件并不是真实的 DOM 节点,而是存在于内存中的一种数据结构,叫做虚拟 DOM 。只有当他插入文档以后,才会变成真实的 DOM。根据React设计,所有的 DOM 变动,都现在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实的 DOM 上,这种算法叫做 DOM diff ,他可以极大提高网页的性能表现。
但是,有时候需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>学习React</title> </head> <body> <div id="reactContainer"></div> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script> <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('reactContainer') ); </script> </body> </html>
上面代码中,组件 MyComponent
的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref
属性,然后 this.refs.[refName]
就会返回这个真实的 DOM 节点。
需要注意的是,由于 this.refs.[refName]
属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click
事件的回调函数,确保了只有等到真实 DOM 发生 Click
事件之后,才会读取 this.refs.[refName]
属性。