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

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

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

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

Answer 2

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

这不是一个不纯的函数。

但我错了。道具的可变性导致引用透明度的中断。 在评论中@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时，它根本无法计算任何占卜并抛出错误。

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

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

你可能会问：是的，但我的函数取决于上下文(反应组件(，所以它不是引用透明的。

其实还是R.T.。 我们应该始终考虑函数的整个闭包(代码 + 上下文数据(。 如果上下文更改，则函数本身也会更改。

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

我希望它有所帮助。祝你好运:)