Question

在Angular中，我们可以创建一个custom pipe来更改数据格式。例如，请参见UpperCasePipe：

{{ value_expression | uppercase }}

react中似乎没有管道，所以我的问题是：如何在React中使用管道？

Answer 1

根本就没有管道，因为括号中的任何内容都被视为纯JavaScript。因为这被评估为纯JavaScript，所以根本不需要管道。如果this.state.variable是字符串，我可以使用.toUpperCase()原型以大写形式显示字符串：

{this.state.variable.toUpperCase()}

这在功能上等同于UpperCasePipe：

{variable | uppercase}

创建包装函数并使用它很容易。例如，如果您想创建一个仅将第一个字母大写的自定义函数，则可以使用here中的该函数：

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

然后我们将其命名为：

{capitalizeFirstLetter(this.state.variable)}

Answer 2

JSX中{}中的表达式只是普通的JavaScript。 |按位OR。没有类似Angular的“管道”。 JavaScript函数可以实现相同的目的。

或者，要获得记忆，请尝试新的useMemo() hook

Answer 3

在最简单的情况下，您只需要在“模板”中调用一个函数（尽管React中没有模板：这只是JSX语法，是现有标准的基础，以便允许您编写XML类似的代码，用于在常规JavaScript文件中间调用函数。

因此，在Angular中，将name设置为'uppercase'的管道可以在React中成为一个简单的函数：

function uppercase (value: string) { return /* ... */ }

在React中，您可以在“模板”中间调用此函数，而无需担心：

<div> { uppercase(value_expression) } </div>

但是有些事情他们不会告诉您：默认情况下，Angular管道被标记为 pure 函数，并且Angular不会重新运行管道代码，除非它输入改变。使用上面显示的React“等效”功能，您将无法理解。取而代之的是，每次重新渲染组件时（可能很常见，就像在应用程序中键入或单击任何内容一样频繁），整个函数的主体都会重新评估。

现在，对于uppercase管道/函数这样的简单情况，这没什么大不了的，但是您可能需要进行一些更复杂的计算，或者可能将相同的计算重复多次（例如大数据表）。在这种情况下，这是不可接受的行为。

因此，您需要为您的React函数（在Angular中充当管道）需要缓存或备忘录策略。而且，猜想是什么，就像React中的所有其他内容一样，该库无法为您解决问题，因此您必须自己寻找一个简单的东西，决定要使用的内容，安装该软件包，阅读其文档，并使用它。

我们如何在React javascript中使用管道？

3 个答案: