前端学习-React 原理

一.setState() 的说明

1.更新数组

• setState() 是异步更新数据的

  this.state = { count: 1 };
  this.setState({
      count: this.state.count + 1
  });
  //虽然count加了1，但是此时 count 的值依然显示 1
  console.log(this.state.count);    

• 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()。比如说，前面的 setState() 对 state 进行了加 1，但因为异步的原因，后面的 setState() 还是以原来的 state 进行操作。

  this.setState(
      count: this.state.count + 1    // 1 + 1
  );
  this.setState(
      count: this.state.count + 1    // 1 + 1
  );

• 可以多次调用 setState()，只会触发一次重新渲染

2.推荐语法

• 推荐：使用 setState((state, props) => {}) 语法
• 参数 state：表示最新的 state
• 参数 props：表示最新的 props
• 注意：这种语法也是异步更新 state 的！
• 和上面方式不同的是，后面的 setState() 会依赖于前面的 setState()。

this.setState((state, props) => {
    return (
        count: state.count + 1
    );
});
console.log(this.state.count);    // 1

3.第二个参数

• 场景：在状态更新（页面完成重新渲染）后立即执行某个操作
• 语法：setState(updater[, callback])

this.setState(
    (state, props) => {},
    () => {console.log('这个回调函数会在状态更新后立刻执行')};
)

this.setState(
    (state, props) => {
        return {
            count: state.count &