ReactJS读书笔记五:DOM操作

一 获取DOM元素

react可以允许我们通过 ref 来定位一个组件。具体的做法是：

先给一个组件设置一个 ref=‘xxx’ 的属性，注意这个ref必须是全局唯一的。

<input ref=‘city’ />

然后就可以通过 this.refs.city 来访问这个组件。

但是请注意，这里拿到的只是虚拟DOM，而不是真实的DOM。

只有在render方法执行之后，并且react已经完成了DOM的更新，才能通过 this.refs.city.getDOMNode() 来拿到原生的DOM元素。

如果你在react更新DOM之前这么做，很有可能拿到的是空的或者是旧的DOM元素。

一般我们会在 componentDidMount 后者 事件回调中使用 getDOMNode 方法。

二 整合非React库

我们需要操作原生DOM最常见的情况就是我们使用了其他的库进行DOM操作。比如我们使用了jquery的一个自动补全插件，他需要在原生DOM上初始化。

这个时候我们需要通过 getDOMNode() 拿到原生的DOM并调用jquery插件的初始化方法。

如下代码所示，我们有一个City组件，它内部调用了jquery autocomplete做了自动补全。在选中一个城市之后会log出来。

[javascript]  view plain  copy

1. var City = React.createClass({  
2. render: function() {  
3. return (  
4. <input type="text" ref='city' />  
5. );  
6. },  
7. onSelect: function(s) {  
8. console.log("you have select: "+s.value);  
9. },  
10. componentDidMount: function() {  
11. var input = this.refs.city.getDOMNode();//拿到了原生DOM  
12. $(input).autocomplete({  
13. lookup: ["北京", "上海", "杭州"],  
14. onSelect: this.onSelect  
15. });  
16. }  
17. });  

这样做没什么问题，但是在City中处理一个jquery的自动补全插件是很烦人的一件事。而且，如果自动补全插件升级了你可能还需要去改City组件的代码。

假设我们没有足够的精力写一个基于React的自动补全插件，我们更好的做法是把自动补全“包装”成一个 React组件，如下所示，我们包装了一个 AC 组件：

[javascript]  view plain  copy

1. var AC = React.createClass({  
2. render: function() {  
3. return (  
4. <input type="text" name={this.props.name} />  
5. );  
6. },  
7. onSelect: function(s) {  
8. this.props.onSelect(s);  
9. },  
10. componentDidMount: function() {  
11. var input = this.getDOMNode();//拿到了原生DOM  
12. $(input).autocomplete({  
13. lookup: ["北京", "上海", "杭州"],  
14. onSelect: this.onSelect  
15. });  
16. }  
17. });  
18.   
19. //这样city组件就可以直接使用AC组件了。  
20. var City = React.createClass({  
21. render: function() {  
22. return (  
23. <AC name='city' onSelect={this.onSelect}></AC>  
24. );  
25. },  
26. onSelect: function(s) {  
27. console.log("you have select: "+s.value);  
28. }  
29. });  

三 侵入式插件

上面的自动补全插件其实还算好，他没有改变DOM元素，只是绑定了事件。

有些插件可能会直接改变你的DOM元素，这样会导致 虚拟DOM 和原生DOM不一致的问题。这个时候最好的做法就是不要在render方法中渲染虚拟DOM了，而是直接在 componentDidMount 方法中自行创建原生DOM。但是注意请在 componentDidUnmount 中销毁你创建的DOM。

不过要尽量避免这种情况，因为 Virtual DOM 才是 react的精髓所在。