用于突出显示文本和从文件中重新加载突出显示的 React 组件

Question

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

• 它允许用户 select 和 highlight/unhighlight 上的文本 不同颜色的页面。
• 从文件中加载高亮显示（在页面中搜索文件中的单词并高亮显示）。

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

此外，使用此方法无法轻松地将以前突出显示的项目加载到页面中。

这就是我再次重新开发此功能的原因，我想知道解决此问题的正确方法是什么？

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

关于如何添加动态组件的有用资源的 link 对我来说会很方便，因为我一直在寻找解决这个问题的正确方法，我想我可能不会去方向正确。

Answer 1

React 将重新渲染状态已更改的任何内容。这将导致您的突出显示消失，因为元素不相同，即使它们看起来相同。

React 将 也 智能地 而不是 如果您在许多情况下设置 a unique key 属性 重新渲染。这让 React 知道要重用组件。

如果状态正确改变，而您有时只想阻止重新渲染，您应该实现一个 shouldComponentUpdate lifecycle method 来自己控制重新渲染条件。