React（8）--DOM操作

当仅使用虚拟DOM无法满足需求时，我们可以使用 ref 属性，访问指定元素。并且在 componentDidMount执行后，使用 getDOMNode( ) 修改他们底层的DOM节点。

使用的一般场景是：

① 使用React 没有原生支持的功能；
① 整合第三方类库 ；

---

访问DOM节点：

let HelloMessage = React.createClass({

     handleClick(e){
        this.refs.hello.getDOMNode().innerHTML = "hello world!";
     },

     render: function() {
       return <h1 ref="hello" onClick={this.handleClick}>Hello World！</h1>;
     }, 

    componentDidMount(){
        let word = this.refs.hello.getDOMNode();
        word.innerHTML = "hello!";
    }
});

渲染后的结果是输出 hello!，点击后输出 hello world！

这里我们注意一点，在render方法里调用getDOMNode( )会引起异常，因为底层DOM节点不是最新的。
getDOMNode( )使用环境： componentDidMount 和 事件处理器

尽管 refs 和 getDOMNode 很强大，但我们不得已下尽量少用；因为他们会成为React在性能优化上的障碍，并且会增加应用的复杂性！

---

整合非 React 类库

这里我截取个例子和大家分享一下：

/**autocompplete.js类库代码**/

autocompplete({
    target: document.getElementById("cities"),//目标DOM节点
    data : [
        "北京","上海","广州","深圳",
    ],
    event :{
        select : function(city){
            alert(`您选择了${city}`);
        }
    }
})

/**把上面类库封装到 React 中: 

    ！！通过componentDidMount来链接
*/
let AutoComplete = React.createClass({

    getDefaultProps(){
        return{
            data : ["北京","上海","广州","深圳"] 
        }
    },

    handleSelect(city){
        alert(`您选择了${city}`);
    },

    render(){
        return <div id="cities" ref="target" />
    },

    componentDidMount(){
        autocomplete({
            target : this.refs.target.getDOMNode(),
            data : this.props.data,
            events : {
                select : this.handleSelect
            }
        });
    },

    compontentWillUnmount(){
        //清除工作...    
    },

});