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

Question

我正在阅读React文档并阅读这一行(加粗他们的):

所有React组件必须在其道具方面表现得像纯函数一样.

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

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

码笔:不道德的组件与道具有关吗？

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

就像脸书说的，如果你需要改变的话。使用状态。

函数必须是纯函数，这意味着

1. 给定相同的参数值，该函数始终计算相同的结果值。函数结果值不能依赖于程序执行过程中或程序的不同执行之间可能改变的任何隐藏信息或状态，也不能依赖于来自 I/O 设备的任何外部输入。

2. 结果的评估不会导致任何语义上可观察到的副作用或输出，例如可变对象的突变或输出到 I/O 设备。

换句话说，一个纯函数

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

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

所有 React 组件在其 props 方面都必须像纯函数一样运行。

当然，应用程序 UI 是动态的，并且会随着时间的推移而变化。下一节，我们将介绍一个新的概念“状态”。状态允许 React 组件随着时间的推移更改其输出，以响应用户操作、网络响应和其他任何内容，而不会违反此规则。

您的Facebook 链接

这是一篇不错的文章

有关纯函数的更多信息