ReactJS без виртуального DOM

Question

Можно ли использовать REactJS без виртуального DOM? Мне трудно использовать ReactJS с сторонними инструментами из-за виртуального DOM. Было бы гораздо легче работать, если бы я мог превратить виртуальный дом. Это возможно?

Answer 1

Глобальное отключение виртуального DOM в значительной степени приведет к поражению цели React framework, но имеет смысл иметь отдельные компоненты, которые используют библиотеки DOM-манипулирования.

Я предполагаю, что проблема заключается в том, что React не знает о каких-либо изменениях DOM, которые вы делаете с другими инструментами или библиотеками, а также переопределяет свои компоненты и перезаписывает все, что вы делаете. Чтобы предотвратить это, вы можете определить shouldComponentUpdate, чтобы предотвратить React от обновления вашего компонента. Другие методы жизненного цикла, такие как componentWillReceiveProps, могут использоваться для вызова вашей сторонней библиотеки и выполнения любых изменений, которые необходимо выполнить, когда ваши реквизиты меняются.

Быстрый поиск this tutorial, который объединяет стороннюю библиотеку с React. Я не знаком с этой конкретной библиотекой, но общие понятия там должны применяться ко всем случаям, когда у вас есть DOM-мутирующая библиотека, и вам необходимо предотвратить React от шага по всему этому.

Answer 2

Часть of the raison d'être of React заключается в том, чтобы избежать ручного манипулирования DOM. Используя виртуальную DOM, React делает как можно меньше изменений с помощью процесса, который называется Reconciliation.

В идеале вы никогда не должны вручную манипулировать DOM - пусть React сделает это. Конечно, поскольку вы, возможно, обнаружили, что есть ситуации, когда это невозможно (хорошим примером является использование анимации d3.js внутри React). Как отметил @Mad Scientist, лучшим решением, если вам действительно нужно коснуться DOM, является использование React's Lifecycle Methods.

Вот пример из кода, который я недавно писал:

import React from 'react'; 
import PureRenderMixin from 'react-addons-pure-render-mixin'; 
import d3 from 'd3'; 

module.exports = React.createClass({ 
    mixins: [PureRenderMixin], 
    componentDidMount() { 
    this.componentDidUpdate(); 
    }, 
    componentDidUpdate() { 
    let svg = d3.select(this.svg); 

    // Now, svg contains the svg DOM node that React rendered for this component 
    // Do any manual manipulations to that DOM node here 
    }, 
    _svg (ref) { 
    this.svg = ref; 
    }, 
    render() { 
    let props = this.props; 

    return (
     <svg height={props.height} width={props.width} ref={this._svg}></svg> 
    ); 
    } 
}); 

Что я сделал здесь используется Реагировать refs сохранить внутреннюю ссылку на узел DOM, оказываемое Реагировать. Затем в componentDidUpdate я использую внешнюю библиотеку (в этом случае d3.js), чтобы захватить узел DOM с помощью Refact ref (вместо того, чтобы искать его непосредственно в DOM). Когда я это сделаю, я внес свои изменения туда. Я также использую React's PureRenderMixing, чтобы гарантировать, что компонент не нуждается в обновлении.

Надеюсь, это поможет.