日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React?this.setState方法使用原理分析介紹_React

作者：搞前端的小菜 ? 更新時間： 2022-10-28 編程語言

摘要

這一篇文章，主要是簡單的實現(xiàn)一下this.setState方法，為了實現(xiàn)該方法，就要知道this.setState方法具有什么特點。

首先在React組件中，我們先定義一個state和setState方法：

  myState = {
    value: 0
  }
  mySetState = ( changeState ) =>{
    this.setState(
      this.myState
    )
  }

這里可能會說，為什么在自己寫的mySetState 方法里還要調用React的setState呢？都調用人家的了還算自己寫的嗎？

由于在React中，render只能處理通過setState方法修改的值，所以這里我們在mySetState 中調用了一下。但是mySetState方法的具體實現(xiàn)還是我們自己去完成。

1.異步的setState

首先，我們看一段代碼：

  state = {
    value: 0
  }

    setTimeout(() => {
      console.log('SetTimeOut ---- '+this.state.value);
    }, 0);
    new Promise((resolve,reject) => {
      resolve(this.state.value)
    })
    .then(res => {
      console.log('Promise ---- '+res);
    })
    this.setState({
      value: this.state.value+1
    })
    console.log(this.state.value);

這段代碼會輸出什么呢？

由這個結果我們可以知道上面的代碼執(zhí)行順序：

（1）console.log(this.state.value);

（2）Promise代碼

（3）setState方法

（4）setTimeOut方法

所以setState一定是一個異步的方法。

在實現(xiàn)的時候，要注意異步的問題。

2.多個setState方法

我們繼續(xù)看一段代碼：

    this.setState({
      value: this.state.value+1
    })
    this.setState({
      value: this.state.value+1
    })
    this.setState({
      value: this.state.value+1
    })
    this.setState({
      value: this.state.value+1
    })
    this.setState({
      value: this.state.value+1
    })
    setTimeout(() => {
      console.log(this.state.value);
    }, 0);

這段代碼輸出的會是1還是5呢？

答案是1，這是React為了效率所作的一個優(yōu)化。防止每次setState都會導致render重新渲染！

而如果我就想要這個效果，React也是提供了一個解決辦法，就是setState方法可以接受一個函數(shù)作為參數(shù)：

    this.setState( (preState) => {
      return {
        value: preState.value+1
      }
    } )
    this.setState( (preState) => {
      return {
        value: preState.value+1
      }
    } )
    this.setState( (preState) => {
      return {
        value: preState.value+1
      }
    } )
    this.setState( (preState) => {
      return {
        value: preState.value+1
      }
    } )
    setTimeout(() => {
      console.log(this.state.value);
    }, 0);

preState代表的是上一個state。

3.手動實現(xiàn)mySetState

OK，有了上面對setState方法分了解，我們可以手動的實現(xiàn)一下mySetState方法

首先解決就是調用多個setState方法的時候，所以我們不能每次調用mySetState方法都讓state值更新，也就是這么寫：

  mySetState = ( changeState ) =>{
    Object.assign(this.myState,changeState)
    this.setState(
      this.myState
    )
  }

我們只需要知道最后一個changeState，所以這里我們維護一個隊列，用來保存所有的changeState，然后每次調用mySetState 方法的時候，將changeState放到隊列里面：

  queue = []
  mySetState = ( changeState ) =>{
    Promise.resolve().then(()=>{
      this.stateShift()
    })
    this.queue.push(changeState)
    this.setState(
      this.myState
    )
  }

重頭戲來了，我們已經有了這個隊列，那我們是如何讓這個隊列的changeState 出來的呢？

這里我們寫一個方法：

  stateShift() {
    let empty;
    while(empty = this.queue.shift()){
    }
  }

通過迭代器的方式，遍歷隊列。empty就是拿到的每個changeState 。changeState 有兩種形式，對象的時候肯定是很好寫的。

  stateShift() {
    let empty;
    while(empty = this.queue.shift()){
      if(typeof empty === 'object'){
        Object.assign(this.myState,empty)
      }
  }

只需要讓新出來的去替換舊的就可以了。如果changeState 是一個方法，這個時候，我們需要手動去維護一個preState變量，這個變量的作用就是用來保存上一個state。

所以具體的實現(xiàn)應該為：

  stateShift() {
    let empty;
    while(empty = this.queue.shift()){
      if(!this.preState){
        this.preState =  Object.assign({},this.myState)
      }
      if(typeof empty === 'object'){
        Object.assign(this.myState,empty)
      }else if(typeof empty === 'function'){
        Object.assign(this.myState,empty(this.preState))
      }
      this.preState = this.myState
    }
  }

最后一步，這個方法應該什么時候調用。其實需要注意的無非就是，要在所有的changeState 都放到隊列中，再進行調用。

而this.queue.push(changeState)這段代碼又是同步的代碼，所以在它之前，通過異步的方式調用，就可以實現(xiàn)出這種效果：

  mySetState = ( changeState ) =>{
    Promise.resolve().then(()=>{
      this.stateShift()
    })
    this.queue.push(changeState)
    this.setState(
      this.myState
    )
  }

最后將整個實現(xiàn)代碼附上：

import React, { Component } from 'react'
export default class Child extends Component {
  state = {
    value: 0
  }
  myState = {
    value: 0
  }
  queue = []
  mySetState = ( changeState ) =>{
    Promise.resolve().then(()=>{
      this.stateShift()
    })
    this.queue.push(changeState)
    this.setState(
      this.myState
    )
  }
  stateShift() {
    let empty;
    while(empty = this.queue.shift()){
      if(!this.preState){
        this.preState =  Object.assign({},this.myState)
      }
      if(typeof empty === 'object'){
        Object.assign(this.myState,empty)
      }else if(typeof empty === 'function'){
        Object.assign(this.myState,empty(this.preState))
      }
      this.preState = this.myState
    }
  }
  add = ()=>{
    //測試代碼
    // this.mySetState( (pre) => {
    //   return {
    //     value: pre.value + 1
    //   }
    // } )
    // this.mySetState( (pre) => {
    //   return {
    //     value: pre.value + 1
    //   }
    // } )
    // this.mySetState( (pre) => {
    //   return {
    //     value: pre.value + 1
    //   }
    // } )
    // this.mySetState({
    //   value: this.myState.value+1
    // })
    // this.mySetState({
    //   value: this.myState.value+1
    // })
    // this.mySetState({
    //   value: this.myState.value+1
    // })
    // this.mySetState({
    //   value: this.myState.value+1
    // })
    setTimeout(() => {
      console.log('SetTimeOut ---- '+this.myState.value);
    }, 0);
    new Promise((resolve,reject) => {
      resolve(this.myState.value)
    })
    .then(res => {
      console.log('Promise ---- '+res);
    })
    this.mySetState({
      value: this.myState.value+1
    })
    console.log(this.myState.value);
  }
  render() {
    return (
      <div>
        <span>{this.myState.value}</span>
        <br></br>
        <button onClick={this.add}>++</button>
      </div>
    )
  }
}

最后值得注意的是，這里只是針對于setState的一些特點去模擬了一下setState的實現(xiàn)，具體的源碼可能不會像這樣簡單！

原文鏈接：https://blog.csdn.net/weixin_46726346/article/details/126610535

欄目分類
最近更新