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

提取成分可按如下方式制成纯品

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

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

• 大约20%的代码可以减少

由于无状态功能组件不支持本地状态，因此您必须将状态管理放在更高级别的容器组件中或通过Flux/Redux进行。

这就是无状态函数组件如何以编程方式强制保持组件纯净

Answer 2

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

功能必须是纯粹的、有意义的

>

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

换句话说，这是一个纯函数

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

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

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

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

您的Facebook链接

这是一篇不错的文章

更多关于纯函数