,,操作底层DOM的使用场景:当需要与一个没有使用反应的第三方类库进行整合,或执行一个没反应有原生支持的操作时。
,,
,,,,,想要访问受反应控制的DOM节点,首先必须能够访问到负责控制这些DOM的组件。这可以通过为子组件添加一个裁判属性来实现。
,,,,,如:
,,,,,这样可以通过this.refs.mainCanvas访问到& lt; canvas>组件。同时必须保证每个子组件的ref值在所有子组件中是唯一的,如果有两个子组件ref值相同则操作将失效。
,,,,,一旦通过this.refs.mainCanvas访问到画布子组件,就可以通过它的getDOMNode()方法访问到底层的DOM节点。但不能在渲染方法中调用getDOMNode()。因为渲染方法完成并且反应执行更新之前,底层的DOM节点可能不是最新的(甚至尚未创建)。直到组件被挂载才能调用getDOMNode()方法,即componentDidMount事件处理器被触发时。
,,,,,注意:componentDidMount内部并不是getDOMNode()方法的唯一执行环境,事件处理器也可以在组件挂载后触发,所以也可以在事件处理器中调用getDOMNode ()。
,,,,,使用this.refs.getDOMNode()方法会对反应产生性能上的障碍,只有在没有其他方法能够实现需要的功能时才能考虑使用。
,,
,,,,,没有使用反应构建的JavaScript类库,一些类库不需要使用DOM,如果要使用它们,保持状态和反应的状态之间的同步是成功整合的关键。
,,,,,例如:autocomplelte类库:
,,,,,,,该自动完成函数需要一个目标DOM节点,一个用作数据展现的字符串清单,以及一些时间监听器
,,,,,,,使用该类库的反应组件:
,
,,,
,,,,,componentDidMount方法只会为每个节点调用一次,因此我们不用担心在一个节点上两次调用自动完成方法产生的影响。
,,,,,也就是说该组件可能被移除,然后在其他DOM节点上重新渲染,如果在componentDidMount方法内导致了DOM节点无法被移除,有可能导致内存泄漏或者其他问题。为确保此现象的发生,可以指定一个componentWillUnmount监听器,用于在组件的DOM节点移除时清理自身。
,,
,,,,,修改除了自己子元素以外的依附元素(如父元素)的插件。
,,,,,面对这类侵入式插件,保护好反应的最好方式就是把DOM操控权完全交给我们自己。在componentDidMount方法中做一些初始化工作。这里也需要去完成清理工作。
,,,,,还需要进行处理更新。可通过两种方式触发:
,,,,,,,——,模拟卸载器而后重新挂载(更高效)
,,,,,,,,,如:
,,,,,,,——使用插件的更新操作API(更有效,清晰)
