React状态管理的详细解读

1、React中的数据

站在组件的角度，React应用中流动的数据可以分为两种：

• 不可更改内容，但可以单向跨组件传递的props;
• 可以更改内容，但不可以跨组件传递的state。

进一步说，props和state的区别在于：props是外部传进来的；state是属于组件自身内部的。

2、函数组件

函数组件又称为"无状态组件"，只负责接收props并返回UI。自身并不能拥有可改变的数据。

• 如果组件不需要追踪内部状态，尽量使用函数组件；
• 尽可能使用函数组件，将整个应用的UI拆分成尽可能小的单；

3、类组件

和函数组件相对应的，就是"类组件"，也成为"有状态组件"/"容器组件"。
不同于函数组件，类组件拥有可以更改的内部数据state。state属性是一个对象，代表了组件的状态，对象的每一个属性名都代表组件的一个特定状态。

由于React把变化的数据封装在组件内部，并坚持单项数据流的原则。因此有了高度抽象的UI组件，并封装了复杂的业务逻辑。因此，可以构建、组合一系列小组件开发出大型应用。

//state在组件内部的使用方式
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      isFetching: false,
      isNew: true
    };
    this.onChange = this.onChange.bind(this);
  }

通过让组件管理自己的状态，任何时候状态的变更都会令React自动更新响应的页面部分。这便是React构建组件的优势之一：当页面需要重新渲染时，我们仅仅需要思考的是如何更改状态，不必跟踪页面的哪些部分需要更改，不需要决定如何有效的重新呈现页面。

3.1 state的修改

this.setState()有两种方式使用该api：

• 设置对象参数

this.setState({
  name: 'stevekeol'
})

• 设置函数参数（当组件需要一个新的state，该state的变化又依赖于旧的state的值）

this.setState((prevState) => ({
  name: 'Mr.' + prevState.name
}))

疑问：直接修改state对象的属性不就可以了嘛，为何需要一个this.setState()?
解释：this.setState()的作用，不仅仅是对象属性值发生变化，还需要驱动整个UI进行重新渲染。

3.2深度解析this.setState

• setState不会立即改变React组件中state的值；
• setState通过引发一系列组件的生命周期的更新过程来引发重新绘制；
• 多次setState函数调用产生的效果会合并；

function updateName() {
  this.setState({FirstName: 'Morgan'});
  this.setState({LastName: 'Cheng'});
}
//相当于
function updateName() {
  this.setState({FirstName: 'Morgan', LastName: 'Cheng'});
}

function incrementMultiple() {
  this.setState({count: this.state.count + 1});
  this.setState({count: this.state.count + 1});
  this.setState({count: this.state.count + 1});
}
//相当于
function incrementMultiple() {
  const currentCount = this.state.count;
  this.setState({count: currentCount + 1});
  this.setState({count: currentCount + 1});
  this.setState({count: currentCount + 1});
}
//相当于
function incrementMultiple() {
  const currentCount = this.state.count;
  this.setState({count: currentCount + 1});
}

综上，this.setState并不会立即更新。由此带来的副作用，如何解决呢？

• 首先，this.setState肯定还是不能立即更新state。否则就推翻了React的整个概念。
• this.setState的隐藏功能：this.setState可以接收一个函数作为参数！！！

function increment(state, props) {
  return {count: state.count + 1};
}
function incrementMultiple() {
  this.setState(increment);
  this.setState(increment);
  this.setState(increment);
}
//这样多次调用函数式的setState，可以保证每次调用increment时，state都合并了之前状态修改的结果。

this.setState可以接收一个函数作为参数，该函数接收两个参数：当前的state,当前的props。该函数返回一个对象，代表对state所作的更改。注意，此时依赖的参数是state，而不是this.state。