浅谈props 以及 什么是纯函数

当 React 遇到一个代表用户定义组件的元素时，它将 JSX 属性以一个单独对象的形式传递给相应的组件。 我们将其称为 “props” 对象。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="China" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

如上代码所示：其实props 就是集合了所有属性的一个对象

 以上代码在页面上渲染 “Hello, China” 

这里需要强调一点 Props 是只读的 ： 无论你用函数或类的方法来声明组件, 它都无法修改其自身 props.

function sum(a, b) {
  return a + b;
}

这种函数称为 “纯函数” ，因为它们不会试图改变它们的输入，并且对于同样的输入,始终可以得到相同的结果

反之， 以下是非纯函数， 因为它改变了自身的输入值：

function withdraw(account, amount) {
  account.total -= amount;
}

虽然 React 很灵活，但是它有一条严格的规则：所有 React 组件都必须是纯函数，并禁止修改其自身 props 

state 允许 React 组件在不违反上述规则的情况下, 根据用户操作, 网络响应, 或者其他随便什么东西, 来动态地改变其输出。