Я обновляю часть страницы с помощью стандартного механизма this.setState
. Я хочу захватить элементы, которые были изменены на веб-странице и обеспечить визуальную обратную связь с пользователем.
Скажем, у нас есть компонент RichText
который получает реквизит data
. Чтобы сделать богатый текст, он делегирует рендер меньшим компонентам, таким как Paragraph
, Header
, BulletPoints
, Text
и т.д. Конечным результатом является правильно выделенный богатый текст.
Более поздние реквизиты data
изменяются (например, сокет). В результате этого Paragraph
можно добавить или изменить текст, или все может перемещаться. Я хочу предоставить визуальную обратную связь пользователю, просто выделив HTML-узлы, которые были изменены.
В двух словах я хочу получить то, что показывает инспектор Chrome, когда вы смотрите на дерево HTML. Он мигает изменениями DOM.
ReactJS знает, что изменилось. В идеале я хотел бы получить доступ к этим знаниям.
Хотя меньшие компоненты, такие как Paragraph
могут отвечать за выделение разницы внутри себя, я не думаю, что у них достаточно знаний о внешнем мире, чтобы заставить его работать должным образом.
Формат (упрощенная версия)
{
content: [{
type: 'Document',
content: [{
type: 'Paragraph',
content: [{
type: 'Text',
text: 'text text'
}, {
type: 'Reference',
content: 'text text'
},
]}, {
type: 'BulletPoints',
content: [{
type: 'ListEntry', content: [{
type: 'Paragraph', content: [{
type: 'Text',
text: 'text text'
}, {
type: 'Reference',
content: 'text text'
}]
}]
}]
}]
Мое текущее решение
У меня есть компонент верхнего уровня, который знает, как отобразить весь Document
, делегируя задание другим компонентам. У меня есть живая версия HOC: LiveDocument
который отвечает за визуализацию изменений.
Поэтому я захватываю DOM перед setState
и после setState
. Затем я использую HtmlTreeWalker, чтобы определить первое различие (игнорируя некоторые элементы, когда я иду по дереву).