Question

我正在阅读React文档并阅读这一行（加粗他们的）：

所有React组件必须像其道具一样充当纯函数。

这是避免意外行为的严格要求还是设计原则？

Facebook提供的“不纯”功能的示例是修改其输入的功能。但看起来React组件可能会修改它作为输入接收的道具（我已经在下面的例子中反映了他们自己的例子）。

Code Pen: Impure Component w/ Respect to Props?

JSX代码：

var Withdraw = React.createClass({
  render() {
    this.props.account.balance -= this.props.amount;
    return (
      <div>Balance: ${this.props.account.balance} </div>
    )
  }
})

var CounterContainer = React.createClass({
  render() {
    var account = { balance: 10 }
    return (
      <div>
        <Withdraw account={account} amount={2} />
        <Withdraw account={account} amount={2} />
      </div>
    )   
  }
})

React.render(<CounterContainer />, document.getElementById('app'))

另外：我知道上面的可以写成无状态功能组件，并且该状态不应该存储在this.state之外。

Answer 1

像facebook那样说，如果你需要它改变。使用状态。

功能必须是纯粹的，意思是

在给定相同参数值的情况下，函数始终评估相同的结果值。函数结果值不能依赖于程序执行过程中或程序执行不同时可能发生的任何隐藏信息或状态，也不依赖于I / O设备的任何外部输入。
评估结果不会导致任何语义上可观察到的副作用或输出，例如可变对象的突变或输出到I / O设备。

换句话说是一个纯函数

给定相同的输入，将始终返回相同的输出。
不产生副作用。不依赖于外部状态。

React非常灵活，但它有一个严格的规则：

所有React组件必须像纯函数一样   他们的道具。

当然，应用程序UI是动态的，随着时间的推移而变化。在里面   下一节，我们将介绍一种新的“状态”概念。国家允许   响应用户，反应组件以随时间改变其输出   行动，网络响应和其他任何事情，而不是违反这一点   规则。

您的Facebook Link

这是一个不错的article

有关pure functions

Answer 2

Withdraw组件可以纯粹如下

const Withdraw = ({account, amount}) =>  
   <div>Balance: {account.balance - amount} </div>;

简单吧？这就是纯组件的作用

可以减少约20％的代码
可以避免使用此关键字
用于表示组件的重点是UI
由于没有状态或生命周期方法，因此提高了性能
易于理解
易于测试

由于无状态功能组件不支持本地状态，因此您不得不将状态管理置于更高级别容器组件中或通过Flux / Redux。

这就是无状态功能组件以编程方式强制保持组件纯粹的方式

必须React组件就其道具而言就像纯函数一样吗？

2 个答案: