详解setState 方法

为什么要是用 setState

当我们希望通过点击一个按钮从而改变一个文本时,就需要使用到 setState方法,比如:

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      message: "Hello World"
    }
  }

  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
        <button onClick={e => this.changeText()}>改变文本</button>
      </div>
    )
  }

 changeText() {
    this.setState({
      message: "文本已经被改变"
    })
  }
}

当我们调用setState时,会重新执行render函数,根据最新的State来创建ReactElement对象;然后再根据最新的ReactElement对象,对DOM进行修改

另外,setState方法是从Component中继承过来的

setState 异步更新

changeText() {
  this.setState({
    message: "文本已经被改变"
  })
  console.log(this.state.message); // Hello World
}

上面代码中再使用 setState 方法后,再打印 message,发现 message 没有被改变,由此可以看到 setState 是异步操作,在执行完setState之后不能够立刻拿到最新的state的结果

为什么要异步更新

传送门

  • 设计成异步,可以显著提升性能,如果每次调用 setState都进行一次更新,那么意味着render函数会被频繁调用,界面重新渲染,这样效率是很低的,所以最好的办法是获取到多个更新,然后进行批量的更新
  • 如果同步更新了state,但是还没有执行render函数,那么state和props不能保持同步,这样做会引起很多问题

如何获取更新后的值

1、setState接受两个参数:第二个参数是一个回调函数,这个回调函数会在更新后会执行

changeText() {
  this.setState({
    message: "文本已经被改变"
  }, () => {
    console.log(this.state.message); // 文本已经被改变
  });
}

2、通过生命周期函数 componentDidUpdate

componentDidUpdate(prevProps, provState, snapshot) {
  console.log(this.state.message);
}

同步 or 异步

setState 方法到底是同步还是异步分两种情况

  • 在组件生命周期或React合成事件中,setState是异步

  • 在setTimeout或者原生dom事件中,setState是同步

// 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: "文本已经被改变"
    });
    console.log(this.state.message); // 文本已经被改变
  })
}

setState的合并

数据的合并

this.state = {
  name: '小冯',
  age: 19
}

// 通过setState去修改age,是不会对name产生影响的
this.setState({
  age: 18
})

多个setState合并

this.state = {
  counter: 0
}


increment() {
    this.setState({
      counter: this.state.counter + 1
    });

    this.setState({
      counter: this.state.counter + 1
    });

    this.setState({
      counter: this.state.counter + 1
    });
  }

setState 方法执行了3次,但是 counter 的值还是为1,这就是多个state进行合并

如果想要变为3,如何去做:传入一个函数

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

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

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

setState性能优化

react 更新机制

react 渲染流程

在这里插入图片描述

react 更新流程

在这里插入图片描述

React在props或state发生改变时,会调用React的render方法,会创建一颗不同的树。

React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI:

  • 如果一棵树参考另外一棵树进行完全比较更新,那么即使是最先进的算法,该算法的复杂程度为 O(n 3 ),其中 n 是树中元素的数量;
  • https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf;
  • 如果在 React 中使用了该算法,那么展示 1000 个元素所需要执行的计算量将在十亿的量级范围;
  • 这个开销太过昂贵了,React的更新性能会变得非常低效;

于是,React对这个算法进行了优化,将其优化成了O(n),如何优化的呢?

  • 同层节点之间相互比较,不会跨层级进行节点的比较。
  • 不同类型的节点,产生不同的树结构;
  • 开发中,可以通过key来指定哪些节点在不同的渲染下保持稳定;

diff算法的作用

计算出虚拟 dom中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面

传统 diff算法

通过循环递归节点进行依次比较,复杂度为O(n^3) ,n为是树中节点(元素)的数量

如果在 React 中使用了该算法,那么展示 1000 个元素就需要进行上亿次比较,太浪费性能

传送门

react diff算法

  • 同层节点之间相互比较,不会跨节点比较;
  • 不同类型的节点,产生不同的树结构;
  • 开发中,可以通过key来指定哪些节点在不同的渲染下保持稳定;
对比不同类型的元素

当节点为不同的元素,React会拆卸原有的树,并且建立起新的树:

  • 当一个元素从 <a> 变成 <img>,从 <Article> 变成 <Comment>,或从 <Button> 变成<div> 都会触发一个完整的重建流程;
  • 当卸载一棵树时,对应的DOM节点也会被销毁,组件实例将执行componentWillUnmount() 方法;
  • 当建立一棵新的树时,对应的 DOM 节点会被创建以及插入到 DOM 中,组件实例将执行 componentWillMount() 方法,紧接着 componentDidMount() 方法;

比如下面的代码更改:

在这里插入图片描述

  • React 会销毁 Counter 组件并且重新装载一个新的组件,而不会对Counter进行复用;
<div>
  <Counter />
</div>

<span>
  <Counter />
</span>
对比同一类型的元素

当比对两个相同类型的 React 元素时,React 会保留 DOM 节点,仅比对及更新有改变的属性。

比如下面的代码更改:

  • 通过比对这两个元素,React 知道只需要修改 DOM 元素上的 className 属性;
<div className="before" title="stuff" />

<div className="after" title="stuff" />

比如下面的代码更改:

  • 当更新 style 属性时,React 仅更新有所更变的属性。
  • 通过比对这两个元素,React 知道只需要修改 DOM 元素上的 color 样式,无需修改 fontWeight
<div style={{color: 'red', fontWeight: 'bold'}} />

<div style={{color: 'green', fontWeight: 'bold'}} />

如果是同类型的组件元素:

  • 组件会保持不变,React会更新该组件的props,并且调用componentWillReceiveProps()componentWillUpdate() 方法;
  • 下一步,调用 render() 方法,diff 算法将在之前的结果以及新的结果中进行递归;
对子节点进行递归

在默认条件下,当递归 DOM 节点的子元素时,React 会同时遍历两个子元素的列表;当产生差异时,生成一个 mutation。

我们来看一下在最后插入一条数据的情况:

  • 前面两个比较是完全相同的,所以不会产生mutation;
  • 最后一个比较,产生一个mutation,将其插入到新的DOM树中即可;
<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

但是如果我们是在中间插入一条数据:

  • React会对每一个子元素产生一个mutation,而不是保持 <li>星际穿越</li><li>盗梦空间</li>的不变;
  • 这种低效的比较方式会带来一定的性能问题;
<ul>
  <li>星际穿越</li>
  <li>盗梦空间</li>
</ul>

<ul>
  <li>大话西游</li>
  <li>星际穿越</li>
  <li>盗梦空间</li>
</ul>

推荐阅读1

推荐阅读2

keys的优化

在遍历数据进行渲染时,需要加 key 值,没有 key 值得话会出现下面的错误

在这里插入图片描述

分析一下下面这个例子

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      movies: ["星际穿越", "盗梦空间"]
    }
  }

  render() {
    return (
      <div>
        <h2>电影列表</h2>
        <ul>
          {
            this.state.movies.map((item, index) => {
              return <li>{item}</li>
            })
          }
        </ul>
        <button onClick={e => this.insertMovie()}>插入数据</button>
      </div>
    )
  }

  insertMovie() {
  }
}
在最后位置插入数据

这种情况,有无key意义并不大

insertMovie() {
  const newMovies = [...this.state.movies, "大话西游"];
  this.setState({
    movies: newMovies
  })
}
在前面插入数据
  • 这种做法,在没有key的情况下,所有的li都需要进行修改;
insertMovie() {
  const newMovies = ["大话西游", ...this.state.movies];
  this.setState({
    movies: newMovies
  })
}

当子元素(这里的li)拥有 key 时,React 使用 key 来匹配原有树上的子元素以及最新树上的子元素:

  • 在下面这种场景下,key为111和222的元素仅仅进行位移,不需要进行任何的修改;
  • 将key为333的元素插入到最前面的位置即可;
<ul>
  <li key="111">星际穿越</li>
  <li key="222">盗梦空间</li>
</ul>

<ul>
  <li key="333">Connecticut</li>
  <li key="111">星际穿越</li>
  <li key="222">盗梦空间</li>
</ul>

key的注意事项:

  • key应该是唯一的;
  • key不要使用随机数(随机数在下一次render时,会重新生成一个数字);
  • 使用index作为key,对性能是没有优化的;
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页