react props && state

1.Props 的只读性 不能修改自身的 props

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

这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。

相反，下面这个函数则不是纯函数，因为它更改了自己的入参：

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

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

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

需特别注意，

this.props.children

是一个特殊的 prop，通常由 JSX 表达式中的子组件组成，而非组件本身定义。

2.组件中的 state 包含了随时可能发生变化的数据。state 由用户自定义，它是一个普通 JavaScript 对象。

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。

1).不要直接修改 State,而是应该使用

setState()

this.setState({comment: 'Hello'});
           

2).构造函数是唯一可以给

this.state

赋值的地方

constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
           

3).State 的更新可能是异步的 ,所以你不要依赖他们的值来更新下一个状态。并且出于性能考虑，React 可能会把多个

setState()

调用合并成一个调用。

解决异步问题可以

setState传入对象

this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});