react setState 原理

• 组件的数据来源有两个地方，分别是属性对象和状态对象
• 属性是父组件传递过来的，不可更改
• 状态是自己内部的，改变状态的唯一方式就是setState
• 属性和状态的变化都会引起视图更新

import React from "react"; import ReactDOM from "react-dom"; /** * 属性是由父组件传递过来的，不能改变 * 状态是组件内部，由自己维护，外界无法访问 改变状态的唯一方式就是setState */ class Counter extends React.Component{ constructor(props) { //构造函数是唯一给状态赋值的地方
 super(props) //定义状态的地方
    this.state = {number: 0} } render(){ //当我们调用setState的时候会引起状态的改变和组件的更新
    console.log('render') return ( <div>
        <p>{this.state.number}</p>
        <button onClick={() => this.setState({number: this.state.number + 1})}>+</button>
      </div>
 ) } } // let counter = new Counter()
ReactDOM.render(<Counter></Counter>,document.getElementById('root'))

构造函数是唯一定义状态并且赋值的地方，当我们要改变状态的值的时候需要通过setState方法，而不是直接修改state的值，并且每次调用setState的时候会引起状态的改变和组件的更新。

1.不能直接修改state的值

import React from "react"; import ReactDOM from "react-dom"; /** * 属性是由父组件传递过来的，不能改变 * 状态是组件内部，由自己维护，外界无法访问 改变状态的唯一方式就是setState */ class Counter extends React.Component{ constructor(props) { //构造函数是唯一给状态赋值的地方
 super(props) //定义状态的地方
    this.state = {number: 0} } add = () => { this.state.number += 1 } render(){ //当我们调用setState的时候会引起状态的改变和组件的更新
    console.log('render') return ( <div>
        <p>{this.state.number}</p>
        <button onClick={this.add}>+</button>
      </div>
 ) } } // let counter = new Counter()
ReactDOM.render(<Counter></Counter>,document.getElementById('root'))

像这种直接修改state值得方法并不会生效。

 2.state的更新可能是异步

我们知道调用setState会触发更新操作，这个过程包括更新state，创建新的VNode，在经过diff算法对比差异，决定需要渲染那一部分，假如他是同步更新的话，每次调用都要执行一次前面的流程，这样会造成很大的性能问题，所以需要将多个setState放进一个队列里面，、然后再一个一个执行，最后再一次性更新视图，这样会提高性能。举个例子：

let state = {number: 0} function setState(newState) { state = newState console.log(state) } setState({number: state.number + 1}) setState({number: state.number + 2}) setState({number: state.number + 3})

这段代码会通过 setState 方法改变state值，我们看看打印结果：

 

 可以看到每次调用setState都会改变state的值并且进行渲染，这将是一个非常消耗性能的问题。

所以React针对setState做了一些特别的优化：将多个setState的调用放进了一个队列，合并成一个来执行，这意味着当调用setState时，state并不会立即更新，看下面这个例子：

let state = {number: 0} let updataQueue = [] function setState(newState) { updataQueue.push(newState) } setState({number: state.number + 1}) setState({number: state.number + 2}) setState({number: state.number + 3}) updataQueue.forEach(item =>{ state = item }) console.log(state) // 3

我们预想的是结果等于6.但是输出的却是3，这是因为变成异步更新之后state的值并不会立即更新，所以每次拿到的state都是 0 ，如果我们想要让结果等于 6，也就是每次都能拿到最新值，那就需要给setState()传递一个函数作为参数，在这个函数中可以拿到每次改变后的值，并通过这个函数的返回值得到下一个状态。

let state = { number: 0 }
let updataQueue = [] //更新函数队列
let callbackQueue = [] //回调函数队列
function setState(updataState,callback) { //入队
 updataQueue.push(updataState) callbackQueue.push(callback) } //清空队列
function flushUpdata () { for(let i = 0; i < updataQueue.length; i++) { state = updataQueue[i](state) //拿到每次改变后的值作为下一个的状态 } state = state callbackQueue.forEach(callbackItem => callbackItem()) } function add(){ setState(preState => ({ number: preState.number + 1}),() => { console.log(state) }) setState(preState => ({ number: preState.number + 2}),() => { console.log(state) }) setState(preState => ({ number: preState.number + 3}),() => { console.log(state) }) //批量更新
 flushUpdata() } add() console.log(state) // 6

 

 

 由于回调函数也是异步执行的，所以最后一次性输出的都是6.

 改写成class类的形式如下：

class Component { constructor() { this.state = { number: 0 } this.batchUpdata = false
        this.updataQueue = [] //更新队列
        this.callbackQueue = [] //回调函数队列
 } setState(updataState, callback) { if (this.batchUpdata) { this.updataQueue.push(updataState) //放入队列
            this.callbackQueue.push(callback) } } flushUpdata() { let state = this.state // this.updataQueue.forEach(newStateitem => this.state = newStateitem)
        for(let i = 0; i < this.updataQueue.length; i++) { state = this.updataQueue[i](state) } this.state = state this.callbackQueue.forEach(callback => callback()) } add() { this.batchUpdata = true //开启合并模式

        this.setState(preState => ({ number: preState.number + 1}),() => { console.log(this.state) }) this.setState(preState => ({ number: preState.number + 2}),() => { console.log(this.state) }) this.setState(preState => ({ number: preState.number + 3}),() => { console.log(this.state) }) //批量更新
        this.flushUpdata() } } let c = new Component() c.add() console.log(c.state)

现在这个逻辑对于setState传入的参数是函数很适合，但是有时候我们希望传入的是对象，且希望利用setState执行完之后做一些操作，比如在请求到数据之后隐藏进度条等，这个时候就需要setState能变为同步执行，这个时候我们会借助promise、setTimeout等方法来改变setState让它变为同步的。也就是不用放入队列，而是立即执行，但是以上逻辑不支持同步的情况，我们需要修改：

class Component { constructor() { this.state = { number: 0 } this.batchUpdata = false
        this.updataQueue = [] //更新队列
        this.callbackQueue = [] //回调函数队列
 } setState(updataState, callback) { if (this.batchUpdata) { //批量更新
            this.updataQueue.push(updataState) //放入队列
            this.callbackQueue.push(callback) }else { //直接更新
            console.log('直接更新') //如果是函数需要把老值传进去
            if(typeof updataState === 'function') { this.state = updataState(this.state) }else { this.state = updataState } } } flushUpdata() { let state = this.state // console.log(this.updataQueue)
        for(let i = 0; i < this.updataQueue.length; i++) { //为了兼容参数为函数和对象的情况需要判断一下 参数为对象的时候不用传上一个的状态值，参数为函数的时候需要传上一个的状态给下一个状态
            if(typeof this.updataQueue[i] === 'function') { state = this.updataQueue[i](state) }else { state = this.updataQueue[i] } } this.state = state this.callbackQueue.forEach(callback => { if(callback) callback() //为了兼容参数为函数和对象的情况需要判断一下，参数为对象的时候没有回调函数就不执行
 }) this.batchUpdata = false //更新完毕置为false
 } add() { this.batchUpdata = true //开启合并模式
        //不会放进更新队列
       setTimeout(() => { this.setState({number: this.state.number + 4}) console.log(this.state) },1000) this.setState({number: this.state.number + 1}) // this.setState(preState => ({ number: preState.number + 1}),() => {
    // console.log(this.state)
    // })
    // this.setState({number: this.state.number + 1})

        //批量更新
        this.flushUpdata() } } let c = new Component() c.add() console.log('end'+ JSON.stringify(c.state))

 

批量处理机制就是为了减少setState刷新页面的次数，setTimeout,promise等异步方法可以直接跳过批量处理机制，setState调几次就改几次。

 https://www.cnblogs.com/jiuyi/p/9263114.html这篇文章对于同步更新讲的比较好

3.seState的更新会被合并

当调用setState的时候，React会把你要修改的那一部分的对象合并到当前的state上面，举个栗子：

class Counter extends React.Component{ constructor(props) { //构造函数是唯一给状态赋值的地方
 super(props) this.add = this.add.bind(this) //定义状态的地方
    this.state = {name: 'leah' ,number: 0} }  add (event) { console.log(event) // this.state.number += 1 不能直接修改state的值
    this.setState({number: this.state.number + 1}) } render(){ console.log(this) //当我们调用setState的时候会引起状态的改变和组件的更新
    console.log('render') return ( <div>
        <p>{this.state.name}</p>
        <p>{this.state.number}</p>
        <button onClick={this.add}>+</button>
      </div>
 ) } }

当前我们只修改了state.number这个时候，name还是会渲染，我们需要对这部分进行合并

class Component { constructor() { this.state = { name: 'leah', number: 0 } this.batchUpdata = false
        this.updataQueue = [] //更新队列
        this.callbackQueue = [] //回调函数队列
 } setState(updataState, callback) { if (this.batchUpdata) { //批量更新
            this.updataQueue.push(updataState) //放入队列
            this.callbackQueue.push(callback) }else { //直接更新
            console.log('直接更新') //如果是函数需要把老值传进去
            if(typeof updataState === 'function') { this.state = updataState(this.state) }else { this.state = updataState } } } flushUpdata() { let state = this.state // console.log(this.updataQueue)
        for(let i = 0; i < this.updataQueue.length; i++) { //为了兼容参数为函数和对象的情况需要判断一下 参数为对象的时候不用传上一个的状态值，参数为函数的时候需要传上一个的状态给下一个状态
            let partialState = typeof this.updataQueue[i] === 'function' ? this.updataQueue[i](this.state) : this.updataQueue[i] state = {...state, ...partialState} } this.state = state this.callbackQueue.forEach(callback => { if(callback) callback() //为了兼容参数为函数和对象的情况需要判断一下，参数为对象的时候没有回调函数就不执行
 }) this.batchUpdata = false //更新完毕置为false
 } add() { this.batchUpdata = true //开启合并模式
        //不会放进更新队列
       setTimeout(() => { this.setState({number: this.state.number + 4}) console.log(this.state) },1000) this.setState({number: this.state.number + 1}) // this.setState(preState => ({ number: preState.number + 1}),() => {
    // console.log(this.state)
    // })
    // this.setState({number: this.state.number + 1})

        //批量更新
        this.flushUpdata() } } let c = new Component() c.add() console.log('end'+ JSON.stringify(c.state))

4.在组件实例中this的指向问题：

一般来说，类的方法里this是undefined，那如何让普通方法的this指向组件实例呢？

4.1.箭头函数

class Counter extends React.Component{ constructor(props) { //构造函数是唯一给状态赋值的地方
 super(props) //定义状态的地方
    this.state = {number: 0} } add = (event) => { console.log(event) // this.state.number += 1 不能直接修改state的值
    this.setState({number: this.state.number + 1}) this.setState({number: this.state.number + 2}) this.setState({number: this.state.number + 3}) } render(){ console.log(this) //当我们调用setState的时候会引起状态的改变和组件的更新
    console.log('render') return ( <div>
        <p>{this.state.number}</p>
        <button onClick={this.add}>+</button>
      </div>
 ) } }

4.2.匿名函数

class Counter extends React.Component{ constructor(props) { //构造函数是唯一给状态赋值的地方
 super(props) //定义状态的地方
    this.state = {number: 0} } add (event) { console.log(event) // this.state.number += 1 不能直接修改state的值
    this.setState({number: this.state.number + 1}) this.setState({number: this.state.number + 2}) this.setState({number: this.state.number + 3}) } render(){ console.log(this) //当我们调用setState的时候会引起状态的改变和组件的更新
    console.log('render') return ( <div>
        <p>{this.state.number}</p>
        <button onClick={() => this.add()}>+</button>
      </div>
 ) } }

4.3.bind绑定

class Counter extends React.Component{ constructor(props) { //构造函数是唯一给状态赋值的地方
 super(props) //定义状态的地方
    this.state = {number: 0} } /** * 合成事件 react合成事件 * 事件代理 * event 并不是原始的dom对象 而是react二次封装的事件对象 可以复用 */ add (event) { console.log(event) // this.state.number += 1 不能直接修改state的值
    this.setState({number: this.state.number + 1}) this.setState({number: this.state.number + 2}) this.setState({number: this.state.number + 3}) } render(){ console.log(this) //当我们调用setState的时候会引起状态的改变和组件的更新
    console.log('render') return ( <div>
        <p>{this.state.number}</p>
        <button onClick={this.add.bind(this)}>+</button>
      </div>
 ) } }

但是这样绑定有个问题，就是每次渲染的时候都需要绑定一次，所以可以在构造函数里面一次性绑定

class Counter extends React.Component{ constructor(props) { //构造函数是唯一给状态赋值的地方
 super(props) this.add = this.add.bind(this) //定义状态的地方
    this.state = {number: 0} } /** * 合成事件 react合成事件 * 事件代理 * event 并不是原始的dom对象 而是react二次封装的事件对象 可以复用 */ add (event) { console.log(event) // this.state.number += 1 不能直接修改state的值
    this.setState({number: this.state.number + 1}) this.setState({number: this.state.number + 2}) this.setState({number: this.state.number + 3}) } render(){ console.log(this) //当我们调用setState的时候会引起状态的改变和组件的更新
    console.log('render') return ( <div>
        <p>{this.state.number}</p>
        <button onClick={this.add}>+</button>
      </div>
 ) } }

5.合成事件

合成事件原理：利用事件冒泡机制
如果react事件绑定在了真实DOM节点上，一个节点同事有多个事件时，页面的响应和内存的占用会受到很大的影响。因此SyntheticEvent作为中间层出现了。
事件没有在目标对象上绑定，而是在document上监听所支持的所有事件，当事件发生并冒泡至document时，react将事件内容封装并叫由真正的处理函数运行。

 

这篇主要讲了一下setState的异步更新处理过程。

我们的更新其实并不是真正的异步处理，而是更新的时候把更新内容放到了更新队列中，最后批次更新，这样才表现出异步更新的状态。setTimeout,promise等异步方法可以直接跳过批量处理机制，setState调几次就改几次。