React学习笔记之三（关于setState的若干问题及其讨论)

最新推荐文章于 2024-03-27 19:20:55 发布

会说话的汤姆

最新推荐文章于 2024-03-27 19:20:55 发布

阅读量169

点赞数

分类专栏： LearnReact 文章标签： react

本文链接：https://blog.csdn.net/sinat_36048532/article/details/111051605

版权

LearnReact 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

setState的异步更新
在组件中并没有实现setState方法，但是为什么可以调用呢？
原因很简单，setState继承自component
setState是异步更新的，我们并不能在执行完setState之后立马拿到最新的state的结果。原因在于setState之所以设计为异步，是因为可以显著提升性能，如果每次调用setState都进行一次更新，那么意味着render函数会频繁的被调用，界面被重新渲染，这样的效率是很低的。最好的办法是获取到多个更新，之后进行批量更新。第二点原因是如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步。state和props不能保持一致性，会在开发中产生很多问题。

// setState的回调
// setState接受两个参数，第二个是回调函数，这个回调函数会在更新之后会执行
// setState(partialState, callback)
changeText() {
   this.setState({
      message: "hello, react"
   }, () => {console.log(this.state.message)}); // hello react
}

// 当然，我们也可以在生命周期函数中使用:
componentDidUpdate(prevProps, provState, snapshot) {
    console.log(this.state.message);
}

关于setState一定是异步的吗的若干讨论？

// 在组件生命周期或React合成事件中，setState是异步的。
// 在setTimeout或者原生的dom事件中，setState是同步的。

```javascript
// 在setTimeout中的更新
changeText() {
   setTimeout(() => {
      this.setState({
         message: "你好啊，李银河";
      })
      console.log(this.state.message); // "你好啊，李银河";
   }, 0)
}
// 原生的DOM事件
componentDidMount() {
  const btnEl = document.getElementById("btn");
  btnEl.addEventListener('click', () => {
     this.setState({
        message: "hello react"
     });
     console.log(this.state.message)
  })
}

// 通过state去修改message，是不会对name产生影响的。
源码中其实是有对原对象和新对象进行合并的。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201211192709130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MDQ4NTMy,size_16,color_FFFFFF,t_70)

Object.assign({}, prevState, partialState);

多个state的合并：我们对setState里面传入一个函数而不是一个对象：

```javascript
increment() {
   this.setState((state, props) => {
      return {
         counter: state.counter + 1
      }
})
}

在这里插入图片描述

2. diff算法的更新策略：
情况一：对比不同类型的元素：

情况二：对比同一类型的元素：

在这里插入图片描述

在这里插入图片描述
在我们之前的使用案例中，在App中我们增加了一个计算器，代码，当App的render函数被调用的时候，所以的子组件的render函数都会被重新调用。
而事实的情况是：很多组件都没有必须要重新render，他们调用render函数的前提是，就是依赖的数据(state, props)发生改变时，再调用自己的render方法。
如何来控制render方法的调用呢，通过shouldComponentUpdate方法