详解setState 方法

文章目录

为什么要是用 setState
setState 异步更新
- 为什么要异步更新
- 如何获取更新后的值
- 同步 or 异步
setState的合并
- 数据的合并
- 多个setState合并
setState性能优化
- react 更新机制
- diff算法的作用
- - 传统 diff算法
  - react diff算法
  - - 对比不同类型的元素
    - 对比同一类型的元素
    - 对子节点进行递归
  - keys的优化
  - - 在最后位置插入数据
    - 在前面插入数据

为什么要是用 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，对性能是没有优化的；