在弄react-native的时候,突然发现它不能像js一样获取页面的dom,那如果我要修改一些dom的属性值、文本什么的,要怎么做呢?
后来查谷歌,发现了一个名词:虚拟DOM。
React在内存中维护一个快速响应的DOM描述。render()方法返回一个DOM的描述,React能够利用内存中的描述来快速地计算出差异,然后更新浏览器中的DOM。
为了和浏览器交互,我们需要对DOM节点进行引用,有两种方式来进行可以完成:
1、getDOMNode()
每一个挂载的React组件有一个getDOMNode()方法,你可以调用这个方法来获取对该节点的引用。
注意:
getDOMNode()仅在挂载的组件上有效(也就是说,组件已经被放进了DOM中)。如果你尝试在一个未被挂载的组件上调用这个函数(例如在创建组件的render()函数中调用getDOMNode()),将会抛出异常。
2、Refs
refs可以用来指向一个你拥有的组件。
var MyComponent = React.createClass({ handleClick: function() { // Explicitly focus the text input using the raw DOM API. this.refs.myTextInput.getDOMNode().focus(); },render: function() { // The ref attribute adds a reference to the component to // this.refs when the component is mounted. return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }); React.render( <MyComponent />,document.getElementById('example') );