Javascript 如果React组件中的函数不是纯函数,这有关系吗?

Javascript 如果React组件中的函数不是纯函数,这有关系吗?,javascript,reactjs,functional-programming,coding-style,Javascript,Reactjs,Functional Programming,Coding Style,如果我创建一个helper函数来整理react组件的内部逻辑,那么如果它直接引用其中一个道具,可以吗?或者这是一种代码味道,我应该把这个道具作为一个额外的参数来传递,以便得到一个纯函数吗 具有非纯辅助功能的组件的人为示例: function SomeBankComponent({ accountData }) { const getMessage = () => { if (accountData.frozen) { const message = "your ac

如果我创建一个helper函数来整理react组件的内部逻辑,那么如果它直接引用其中一个道具,可以吗?或者这是一种代码味道,我应该把这个道具作为一个额外的参数来传递,以便得到一个纯函数吗

具有非纯辅助功能的组件的人为示例:

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)=>{
?或者这仅仅是个人/团队/项目风格偏好的问题吗?

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

下面是一个小重构,这更多是一个偏好问题:)


没问题,实际上在组件的帮助函数中直接引用状态和一些给定的道具是正常的

下面是一个小重构,这更多是一个偏好问题:)


在这个答案的前一个版本中,我写错了:

这不是一个不纯的函数

但我错了。道具的易变性导致了参考透明度的破坏。 在评论中,@JaredSmith强调了我的错误

我留下答案的剩余部分,以防万一它能帮助别人(但不要犯我的错误:)


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

纯函数的一些示例:

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

const foo: () => string = () => 'foo'
const divide2By: (x: number) => number = x => 2 / x
请注意,在Scala
()
等语言中,实际上是具有单个值的类型:

非纯功能的一些示例:

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

const foo: () => string = () => 'foo'
const divide2By: (x: number) => number = x => 2 / x
后者打破了纯函数的定义。 当
x=0
时,它无法计算任何除法,并抛出一个错误

纯度是一个与概念紧密相连的概念,它是

引用透明性非常重要:对于相同的输入,函数总是返回相同的输出,则函数是引用透明的。 我们可以说函数对于输入参数是完全确定的

您可能会问:是的,但是我的函数依赖于上下文(react组件),所以它不是引用透明的

其实还是R.T。 我们应该始终考虑函数的全部关闭(代码+上下文数据)。 如果上下文改变,那么函数本身也会改变

重要的是,函数在相同的上下文中是R.T


我希望这会有帮助。祝你好运:)

在这个答案的前一个版本中,我写错了:

这不是一个不纯的函数

但我错了。道具的易变性导致了参考透明度的破坏。 在评论中,@JaredSmith强调了我的错误

我留下答案的剩余部分,以防万一它能帮助别人(但不要犯我的错误:)


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

纯函数的一些示例:

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

const foo: () => string = () => 'foo'
const divide2By: (x: number) => number = x => 2 / x
请注意,在Scala
()
等语言中,实际上是具有单个值的类型:

非纯功能的一些示例:

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

const foo: () => string = () => 'foo'
const divide2By: (x: number) => number = x => 2 / x
后者打破了纯函数的定义。 当
x=0
时,它无法计算任何除法,并抛出一个错误

纯度是一个与概念紧密相连的概念,它是

引用透明性非常重要:对于相同的输入,函数总是返回相同的输出,则函数是引用透明的。 我们可以说函数对于输入参数是完全确定的

您可能会问:是的,但是我的函数依赖于上下文(react组件),所以它不是引用透明的

其实还是R.T。 我们应该始终考虑函数的全部关闭(代码+上下文数据)。 如果上下文改变,那么函数本身也会改变

重要的是,函数在相同的上下文中是R.T


我希望这是有帮助的。祝你好运:)

注意你的代码有一个bug:你的函数总是返回
未定义的
,因为
const
是块作用域。注意你的代码有一个bug:你的函数总是返回
未定义的
,因为
const
是块作用域。
getMessage
函数取决于s在一个封闭可变变量(props.account)上的值。这不是纯粹的。@JaredSmith任何属性更改都会被传播,并导致创建另一个闭包。
getMessage
的结果始终与这些属性更改同步,因此它对整个组件是引用透明的。所有高阶函数的内容都是基于从上下文继承的值,是不是everythi因此ng不纯净?它不纯净。它仍然是可能的(尽管不可取)在不使用setState或其钩子等价物的情况下直接变异props对象。它显然不会触发重新渲染器,但会导致该函数返回不同的值。除非您可以使用相同的输入调用该函数,并且无论发生什么情况都能得到相同的结果,否则它不是纯的。@JaredSmith谢谢您,您是对的,我接受了对于props的只读性:(函数的
getMessage
取决于封闭变量(props.account)的值)。这不是纯粹的。@JaredSmith任何属性更改都会被传播,并导致创建另一个闭包。
getMessage
的结果始终与这些属性更改同步,因此它对整个组件是引用透明的。所有高阶函数的内容都是基于从上下文继承的值,是不是everythi因此,ng不纯净?它不纯净。不使用setStat直接变异道具对象仍然是可能的(但不可取)