如果 React 组件中的函数不是纯函数，这有关系吗？

Question

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

具有非纯辅助函数的组件的人为示例：

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

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

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

Answer 1

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

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

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

Answer 2

在这个答案的先前版本中我写错了：

这不是一个不纯的函数。

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

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

---

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

一些纯函数的例子：

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

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

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

非纯函数的一些示例：

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

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

纯度是一个与referencial transparency 的概念密切相关的概念，它是function composition 所必需的。

引用透明性非常重要：当一个函数对于相同的输入返回总是相同的输出时，它就是引用透明的。 我们可以说函数对于输入参数是完全确定的。

你可能会问：是的，但是我的函数依赖于上下文（react 组件），所以它不是引用透明的。

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

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

希望对您有所帮助。祝你好运:)