react-native操作“dom”

在弄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')
);

更多详细内容请参见这个页面

react-native操作“dom”

相关文章