从正则表达式字符串匹配创建 React 组件和状态

Question

我将主要使用 php 和 jquery 编写的项目的前端转移到 react 作为学习练习。到目前为止，它似乎让一切变得更加复杂，但我希望我能很快看到好处。现在，让自己熟悉一些比我正在使用的东西更流行的东西是件好事。但我离题了...

目前我正在翻译的一种特殊情况在 jquery 中感觉很简单，但我觉得我不得不在一堆繁琐或不推荐的解决方案之间进行选择，react，如dangerouslysetinnerhtml

用户可以输入自己的列表作为原始文本，应用程序使用正则表达式对其进行解析以突出显示数量和项目，如上图所示，以玫瑰色和绿色突出显示。新行被解析为列表元素，以 peach 突出显示。解析的数量可以使用范围输入进行缩放，如列表上方所示。示例 UI 显示了解析原始文本字符串后的示例。

以前 - jquery

当我使用 jquery 时，我将正则表达式匹配替换为包含 data 属性的 <span> 元素，以创建我可以定位的新元素。应用中的数量缩放功能现在可以使用数据属性随时引用列表项的原始数量。

例如 I need 10 cars 被解析为<li>I need <span class='highlight quantity' data-count='10'>10</span> <span class='highlight item' data-item='cars'>cars</span></li>

使用 jquery，每当拖动输入范围时，我只针对页面上具有 quantity 类的所有元素，引用它们的 data-count 并将跨度值替换为当前范围值乘以 data-count。这很好用。

现在 - 反应

我正在研究 react 组件。参考上面的插图，我有一个对话框组件（因为也会有其他对话框），一个对话框范围输入组件，一个列表组件和一个列表项组件。

和以前一样，当我拖动输入范围时，我希望页面上的数量发生变化以反映用户设置的新比例。拿起 react 后，我开始熟悉组件 states 和 props，并认为这些可以很好地解决我的问题。如果我有一个比例 state 我可以通过组件传递它，并且层次结构中的任何东西都可以引用它。据我了解，层次结构很重要，并且将状态保持在顶部很重要，以便可以“馈送”较低级别的组件，如果这是一种放置它的好方法的话。这似乎是最佳做法。

但我很难让它跳过篮球。是不是我理解错了？

---

两个不确定性

1

如果我正确理解了状态的层次结构，我最初是在 App() 函数中设置状态，如下所示：

function App() {

    const [scaleValue, setScaleValue] = useState();

    const handleScaleChange = (childData) => {
        setScaleValue(childData);
    }


    return (
        <React.Fragment>
            /~~~/
           <UserList rawstring={userText} scale={scaleValue} />
            /~~~/
            <Dialogs scale={scaleValue} setscale={setScaleValue} parentCallback={handleScaleChange}/>
        </React.Fragment>
    );
}

但我必须使用回调函数来更改状态，因为我正在使用的对话框范围嵌套在组件中的几个级别 - 将其传递回父 App() 函数中的状态，然后返回到所有使用 props 的嵌套组件。在 jquery 中只定位具有匹配类名的元素感觉要容易得多，而且我还没有看到让组件使用状态的优势。我认为能够针对具有数量状态的列表项组件在 React 中具有更明显的优势。

2

也许是让我不知道如何继续进行的主要事情。在 jquery 中，当我将用户提供的原始字符串解析为可以以特定类为目标的 html 时，我只是使用了一些正则表达式函数来返回可以插入到 中的 html dom。 html 的示例与前面的示例相同：

I need 10 cars被解析为<li>I need <span class='highlight quantity' data-count='10'>10</span> <span class='highlight item' data-item='cars'>cars</span></li>

使用 react，我可以将相同的字符串解析为相同的 html，但我不知道如何从逻辑上处理它？如果我返回并插入它，它将被视为原始文本并在页面上呈现 html 标签。我可以使用dangerouslysetinnerhtml，它显示得很好，但我已经清楚地知道这是非常不鼓励的信息。我想使用最佳做法。

事实上，我可能不想返回包装在可定位类中的数量。我收集到我希望能够将状态分配给列表项组件。我完全不知道什么是最好的方法（逻辑上）用反应来做到这一点。我可以从正则表达式解析中返回一个数组，但与将匹配的子字符串替换为自身的包装版本相比，这感觉不必要地复杂。

在这一点上，我觉得我可能接近翻译错误（或者我对使用组件系统和状态的理解），因为这感觉比我使用的 jquery 方法更复杂。

Answer 1

不推荐的带有 react 的解决方案，例如 dangerouslysetinnerhtml

这不是dangerouslySetInnerHTML 的意义所在。这是因为包含 HTML/JS 的未经处理的字符串可能会构成安全威胁（主要是 XSS）。换句话说，在 React 中，如果您需要不安全，则必须显式使用 dangerouslySetInnerHTML，但保护自己是您的责任，因此得名。不代表不推荐，只是告诉你要格外小心。

层次结构很重要，将状态保持在 顶部，以便可以“馈送”较低级别的组件，如果这是 很好的表达方式。

确实，起初它可能看起来过于复杂，没有充分的理由。今天。 几个月后，如果您必须再次检查该代码，或者更糟的是，如果其他人必须这样做，这种强制执行规则和结构的结构使进行更改变得更加容易。您可以简单地在您选择的 IDE 中右键单击“回调”函数和“转到定义”并查看它的定义位置，而不是希望它没有隐藏在某些 JS 文件中或在函数命名为“handleClick”时依赖搜索在具有一千个点击处理程序的项目中。

在 jquery 中只定位具有匹配类名的元素感觉更容易

当然是这样，任何在大型项目中缺乏经验的人都知道这一点。总是有取舍。您需要根据项目的规模来判断为了可维护性而放弃简单性是否有意义。

使用 react，我可以将相同的字符串解析为相同的 html，但我不知道如何从逻辑上处理它？

您将解析与生成 HTML 混合在一起。您正在解析字符串并生成 HTML。使用 React，您必须解析字符串并生成 JSX。如果您的代码将这两个问题分开，那么区别是什么会更清楚。 再说一次，如果你是唯一一个在做这个的人并且知道你永远不会再碰它，为什么还要把这两个部分分开呢？另一方面，如果您确实希望稍后再接触那段代码，或者知道会有其他人在处理它，那么明智的选择是拆分它，以便您可以正确地对其进行单元测试。

我可以使用 dangerouslysetinnerhtml 并且它显示正常，但我已经大声明确地得到了这样的信息，这是非常不鼓励的。我想使用最佳做法。

不，这不是重点。如果您使用dangerouslySetInnerHTML，那么您将如何与这些突出显示的数字进行交互？ document.querySelectorAll?这确实违背了 React 的目的。我认为我上面的回答清楚地表明了更合适的方法是什么。

与将匹配的子字符串替换为自身的包装版本相比，感觉不必要地复杂。

这是因为你不明白为什么有人会使用 React。你认为 React 是 jQuery 的替代品，但事实并非如此。它是一种编写 JavaScript 应用程序的方式，这样您就不会得到一堆没人能遵循的代码。只有当您最终得到大量代码时才会出现这个问题。你的应用程序有什么，100 行 JavaScript？你为什么还要使用 jQuery？

我的建议是：

1. 要明白，做出深思熟虑的人选择 React 不是因为它很时髦，而是因为它解决了一些问题。

2. 弄清楚这些问题是什么。我列出了一个重要的问题，即可维护性，结构和关注点分离是解决方案的一部分。

3. 决定你是否关心 React 在你工作（或将工作）的任何项目中帮助解决的任何问题。

4. 如果您确实关心这些问题，请让自己处于适当的心态。 React 并不是要取代 jQuery，找一个可以从使用 React 中受益的项目。

5. 了解 React 不是您需要的唯一工具。

更多建议：

• 一定要看看useReducer，然后（如果你需要额外的多汁位）Redux 进行状态管理。所有初学者教程都试图远离它们，但 IMO React 是一个没有适当状态管理的空壳。

• React 是一种将状态转换为 HTML/CSS 的简洁方式。哲学是任何动作（例如点击“添加新行”按钮）都应该产生一个状态突变，转化为操作一些 数据，而不是 DOM。您的 JSX 是该数据的一种表示！ React 在操纵 DOM 以反映新的 JSX 表示方面做得很好（快速）。因此，请从输入输出、数据结构和操作这些数据结构的操作/归约器方面开始考虑您的应用程序。

• 强迫自己对您的操作和化简器进行单元测试（或者，更好的是 TDD）。与 JSX 和 DOM 完全解耦！您的整个应用程序逻辑应该可以在 Node CLI 中进行测试。这对我来说（你可以将逻辑与表示完全分开）是一个重大胜利（也是 React Native 的基础）。

• 看看https://storybook.js.org/ - 这是另一种出色的工具（不仅适用于 React），它将彻底改变您的开发体验。

• 小心使用“组件库”。当您真正了解如何正确设计它们时，大多数“复杂”的东西都会变成小游戏。

• 准备好花 3 倍的时间来实现真正简单的东西一段时间，直到你熟悉核心概念和理念。