React 组件的 props 必须像纯函数一样吗？答案

【问题标题】：Must React components act like pure functions with respect to their props?React 组件的 props 必须像纯函数一样吗？
【发布时间】：2016-12-14 01:42:54
【问题描述】：

我正在浏览 React 文档并阅读了这一行（粗体字）：

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

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

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之外。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

函数必须是纯粹的，意思是

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

换句话说，一个纯函数

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

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

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

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

你的Facebook Link

这是一个不错的article

更多关于pure functions

【讨论】：

【解决方案2】：

Withdraw 组件可以像下面这样纯

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

简单吧？这就是纯组件所做的事情

可以减少大约 20% 的代码
可以避免使用这个关键字
对于专注于 UI 的展示组件很有用
由于没有状态或生命周期方法而提高了性能
简单易懂
易于测试

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

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

【讨论】：