React 组件中的 function 是否不纯有关系吗？

Question

如果我创建一个助手 function 来整理 React 组件的内部逻辑，如果它直接引用其中一个道具可以吗？ 或者那是代码的味道，我应该将该道具作为额外的参数传递，以获得纯 function？

带有非纯助手 function 的组件的人为示例：

function SomeBankComponent({ accountData }) {
  const getMessage = () => {
    if (accountData.frozen) {
      const message = "your account is frozen";
    } else {
      const message = `you have ${accountData.savings} left in your account`;
    }

    return message;
  };

  // ... rest of the component ...

在上面将其更改为const getMessage = (accountData) => {是否明智？ 还是仅仅是个人/团队/项目风格偏好的问题？

Answer 1

没问题，实际上在组件的辅助函数中直接引用 state 和一些给定的道具是正常的。

下面，它是一个小重构，这更像是一个偏好问题：）

  const getMessage = () => (
    accountData.frozen
      ? 'your account is frozen'
      : `you have ${accountData.savings} left in your account`
  )

Answer 2

在此答案的先前版本中，我写错了：

这不是不纯的 function。

但是我错了。 props 的可变性导致参考透明度的破裂。 在评论中@JaredSmith 强调了我的错误。

我留下答案的其余部分，以防万一它可以帮助某人（但不要犯我的同样错误:)）

---

让我们从纯度的概念开始。 一个 function 被称为纯当，对于任何给定的输入，它返回一个值。

纯函数的一些例子：

const double: (x: number) => number = x => x * 2

const foo: () => string = () => 'foo'

请注意，在 Scala ()之类的语言中，实际上是具有单个值的类型： https://www.scala-lang.org/api/current/scala/Unit.ZFC35FDC70D5FC69D269883A822C7A53Ehttps

一些非纯函数的例子：

const divide2By: (x: number) => number = x => 2 / x

后者打破了纯function的定义。 当x = 0时，它根本无法计算任何除法并引发错误。

纯度是一个与 参考透明度概念密切相关的概念，它是function 组合所必需的。

引用透明性非常重要：function 是引用透明的，对于相同的输入，它总是返回相同的 output。 我们可以说 function 对于输入 arguments 是完全确定的。

您可能会问：是的，但是我的 function 取决于上下文（反应组件），因此它不是引用透明的。

其实还是R.T。 我们应该始终考虑 function（代码 + 上下文数据）的整个关闭。 如果上下文发生变化，则 function 本身会发生变化。

重要的是 function 在同一上下文中是 R.T。

我希望它是有帮助的。 祝你好运：）