React组件以突出显示文本并从文件中重新加载突出显示

Question

我正在努力创建具有以下功能的文本荧光笔：

• 它允许用户选择和突出显示/突出显示页面上具有不同颜色的文本。

• 从文件中加载突出显示（在页面中从文件中搜索单词并突出显示它们）。

我能够使用rangy https://github.com/timdown/rangy（这不是React组件）创建突出显示和删除突出显示功能，但是只要页面上的任何组件使用（setState方法）设置这些突出显示的状态消失。

此外，使用此方法不容易将以前突出显示的项目加载到页面中。

这就是为什么我要重新开发此功能，并且我想知道什么是解决此问题的正确方法？

我一直在考虑开发一个自定义的React组件以突出显示并将其添加到页面，但是对于这种方法，我想知道如何在用户选择页面上的文本时动态添加突出显示组件，而不会在状态出现时丢失它已更新。

一段时间以来，我一直在寻找有关如何添加动态组件的有用资源的链接，因为我一直在寻找解决此问题的正确方法，而且我认为我可能没有朝着正确的方向前进。

Answer 1

React会重新渲染状态已更改的任何内容。这将使您的突出显示消失，因为即使它们看起来相同，元素也不一样。如果您在许多情况下设置了唯一的key属性，React也不会智能地重新渲染。这让React知道可以重用组件。如果状态正确更改，并且您只想有时阻止重新渲染，则应实现一个shouldComponentUpdate生命周期方法来自己控制重新渲染条件。