類組件中的state

setState的用法

React項(xiàng)目中UI改變來源于state的改變，類組件中setState是更新組件，渲染視圖的主要方式

基本用法

setState(obj,callback)

• 第一個(gè)參數(shù)：當(dāng)obj是一個(gè)對(duì)象，即為即將合并的state；如果obj是一個(gè)函數(shù)，那么當(dāng)組件的state和props將作為參數(shù)，返回值用于合并新的state
• 第二個(gè)參數(shù)callback：callback為一個(gè)函數(shù)，函數(shù)執(zhí)行上下文中可以獲取當(dāng)前setState更新后的最新的值，可以作為依賴state變化的副作用函數(shù)，可以用來做一些基本的DOM操作

/* 第一個(gè)參數(shù)為function類型 */
this.setState((state,props)=>{
    return {number:}
})
/* 第一個(gè)參數(shù)為object類型 */
this.setState({ number:1 },()=>{
    console.log(this.state.number) //獲取最新的number
})

加入一次事件中觸發(fā)一次如上的setState，在React底層主要做了哪些事呢？

• 首先，setState會(huì)產(chǎn)生當(dāng)前更新的優(yōu)先級(jí)------產(chǎn)生更新優(yōu)先級(jí)
• 接下來React會(huì)從fiber Root根部fiber向下調(diào)和子節(jié)點(diǎn)，調(diào)和階段將對(duì)比發(fā)生更新的彼方，更新對(duì)比expirationTime，找到發(fā)生更新的組件，合并state，然后觸發(fā)render函數(shù)，得到最新的UI視圖，完成render階段--------對(duì)比
• 接下來到commit階段，commit階段，替換真實(shí)DOM，完成此次更新流程。--------替換真實(shí)DOM
• 此時(shí)仍然在commit階段，會(huì)執(zhí)行setState中callback函數(shù)，如上的()=>{console.log(this.state.number)} ，到此為止就完成了一次setState的過程。

更新的流層圖如下：

要記住一個(gè)主要任務(wù)的先后順序，這對(duì)于弄清渲染過程會(huì)有幫助：

render階段render函數(shù)執(zhí)行--->commit階段真實(shí)DOM替換--->setState回調(diào)函數(shù)執(zhí)行callback

類組件如何限制state更新視圖

對(duì)于類組件如何顯示state帶來的更新作用呢？

• pureComponet可以對(duì)state和props進(jìn)行淺比較，如果沒有發(fā)生變化，那么組件就不會(huì)更新
• shouldComponentUpdate生命周期可以通過判斷前后state變化來決定組件需不需要更新，需要更新返回true，否則返回false

setState原理揭秘

知其然，知其所以然，下面將介紹setState的底層邏輯，要弄清楚state的更新機(jī)制，所以接下來要從兩個(gè)方向分析

• 一是揭秘enqueueSetState到底做了什么？
• 二是React底層是如何進(jìn)行批量更新的？

首先，這里極簡了一下enqueueSetState的代碼，如下：

enqueueSetState(){
    //每次調(diào)用setState，react都會(huì)創(chuàng)建一個(gè)update里面保存了如下
    const update= createUpdate(expirationTime,suspenseConfig)
    //callback 可以理解為setState回調(diào)函數(shù)，第二個(gè)參數(shù)
    callback && (update.callback=callback)
    //enqueuUpdate 把當(dāng)前的update 傳入當(dāng)前fier ，待更新隊(duì)列中
    enqueuUpdate(fiber,update)
    //開始調(diào)度更新
    scheduleUpdateOnFiber(fiber,expirationTime)
}

enqueueSetState作用實(shí)際很簡單，就是創(chuàng)建一個(gè)update，然后放入當(dāng)前的fiber對(duì)象的待更新隊(duì)列中，最后開啟調(diào)度更新，進(jìn)入上述講到的更新流程。

那么問題來了，React的batchUpdate批量更新是什么時(shí)候加上去的呢?

這就要提前聊到事件系統(tǒng)了，正常的state更新，UI交互，都離不開用戶的事件，比如點(diǎn)擊事件，表單輸入等，React是采用事件合成的形式，每一個(gè)事件都是由React事件系統(tǒng)統(tǒng)一調(diào)度的，那么State批量更新正是和事件系統(tǒng)息息相關(guān)的。

//在legcy模式下，所有的事件都將經(jīng)過此函數(shù)統(tǒng)一處理
function dispatchEventFoLegacyPluginEventSystem(){
    //handleTopLevel 事件處理函數(shù)
    batchEventUpdates(handleTopLvele,bookKeeping)
}

batchEventUpdates方法具體如下：

batchEventUpdate(fn,a){
    //開啟批量更新
    isBatchingEventUpdates=true；
    try{
        //這里執(zhí)行了事處理函數(shù)，比如在一次點(diǎn)擊事件中觸發(fā)setState，那么它將在這個(gè)函數(shù)執(zhí)行
        return batchEventUpdateImpl(fn,a,b);
    }finally{
        //try里面的return 不會(huì)影響finally執(zhí)行
        //完成一次事件，批量更新
        isBatchingEventUpdates=false
    }
}

如上分析出流程圖，在React事件執(zhí)行之前通過isBatchEventUpdates=true打開開關(guān)開啟事件批量更新，當(dāng)該事件結(jié)束，再通過isBactchEventUpdates=false；關(guān)閉開關(guān)，然后在scheduleUpdateOnFiber中根據(jù)開關(guān)來確定是否進(jìn)行批量更新

舉個(gè)例子，如下組件中這么寫：

import React, { Component } from 'react';
export default class Test extends Component {
  state={number:0}
  handleClick=()=>{
    this.setState({number:this.state.number+1},()=>{
      console.log('callback1',this.state.number)
    })
    console.log(this.state.number)
    this.setState({number:this.state.number+1},()=>{
      console.log('callback2',this.state.number)
    })    
    console.log(this.state.number)
    this.setState({number:this.state.number+1},()=>{
      console.log('callback3',this.state.number)
    })
    console.log(this.state.number)
  }
  render() {
    return (
      <div> 
        {this.state.number}
        <button onClick={this.handleClick}>number++</button>
      </div>
    );
  }
}

點(diǎn)擊打印結(jié)果：0，0，0 callback1 1 ，callback2 1，callback3 1

如上代碼，在整個(gè)React上下文執(zhí)行棧中會(huì)變成這樣：

那么，為什么異步操作里面的批量更新規(guī)則會(huì)被打破呢？比如用promise或者setTime在handleClick中這么寫：

handleClick=()=>{
  setTimeout(()=>{
    this.setState({number:this.state.number+1},()=>{
      console.log('callback1',this.state.number)
    })
    console.log(this.state.number)
    this.setState({number:this.state.number+1},()=>{
      console.log('callback2',this.state.number)
    })    
    console.log(this.state.number)
    this.setState({number:this.state.number+1},()=>{
      console.log('callback3',this.state.number)
    })
    console.log(this.state.number)
  })
}

打印：callback1 1,1，callback2 2,2，callback3 3 ，3

那么整個(gè)React上下文執(zhí)行棧就會(huì)變成如圖這樣

所以批量更新規(guī)則被打破。

那么，如果在如上異步環(huán)境下，繼續(xù)開啟批量更新模式呢?

React-Dom提供了批量更新方法unstable_batchChedUpdates，可以去手動(dòng)批量更新，可以將上述setTimeout里面的內(nèi)容作如下修改：

import ReactDom from 'react-dom';
const {unstable_batchedUpdates}=ReactDom

  setTimeout(()=>{
    unstable_batchedUpdates(()=>{
      this.setState({number:this.state.number+1},()=>{
        console.log('callback1',this.state.number)
      })
      console.log(this.state.number)
      this.setState({number:this.state.number+1},()=>{
        console.log('callback2',this.state.number)
      })    
      console.log(this.state.number)
      this.setState({number:this.state.number+1},()=>{
        console.log('callback3',this.state.number)
      })
      console.log(this.state.number)
    })
  })

點(diǎn)擊打印結(jié)果：0，0，0 callback1 1 ，callback2 1，callback3 1

在實(shí)際工作中，unstable_batchChedUpdates可以用于Ajax數(shù)據(jù)交互之后，合并多次setState，或者是多次useState。原因很簡單，所有的數(shù)據(jù)交互都是在異步環(huán)境下，如果沒有批量更新處理，一次數(shù)據(jù)交互多次改變state會(huì)促使視圖多次渲染。

那么如何提升更新優(yōu)先級(jí)呢?

React-dom提供了flushSync，flushSync可以將回調(diào)函數(shù)中的更新任務(wù)，放在一個(gè)比較高的優(yōu)先級(jí)中。React設(shè)定了很多不同優(yōu)先級(jí)的更新任務(wù)，如果一次更新任務(wù)在flushSync回調(diào)內(nèi)部，那么將獲得一個(gè)比較高優(yōu)先級(jí)的更新。

函數(shù)組件中的state

React-hooks發(fā)布之后，useState可以使函數(shù)組件像類組件一樣擁有state，也就是說名函數(shù)組件可以通過useState來改變UI視圖。那么useState到底應(yīng)該如何使用，底層優(yōu)勢(shì)怎么運(yùn)行的呢？

useState的用法

const [state,setState] = useState(initData)

• state，目的是提供給UI，作為渲染視圖的數(shù)據(jù)源
• setState改變state的函數(shù)，可以理解為推動(dòng)函數(shù)組件渲染的渲染函數(shù)
• initData有兩種情況，第一種情況是非函數(shù)，將作為state的初始化的值，第二種情況是函數(shù)，函數(shù)返回值作為作為useState初始化的值

initData為函數(shù)的情況：

const [number,setNumber]= React.useState(0)

initData為函數(shù)的情況：

  const [number,setNumber]=React.useState(()=>{
    //props中的a=1 state為0-1隨機(jī)數(shù)
    //props中a=2 state為1-10的隨機(jī)數(shù)
    //否則 state為1-100的隨機(jī)數(shù)
    if(props.a===1) return Math.random()
    if(props.a===2) return Math.ceil(Math.random()*10)
    return Math.ceil(Math.random()*100)
  })

對(duì)于setState參數(shù)，也有兩種情況：

• 第一種是非函數(shù)情況，此時(shí)將作為新的值，賦予state，作為下一次渲染使用；
• 第二種是函數(shù)的情況，如果setState的參數(shù)是一個(gè)函數(shù)，這里可以稱它為reducer，reducer參數(shù)，是上一次返回最新的state，返回值作為新的state

setState參數(shù)是一個(gè)非函數(shù)的情況：

  const [number,setNumber]= React.useState(0)
  const handleClick=()=>{
    setNumber(1)
    setNumber(2)
    setNumber(3)
  }

setState參數(shù)是一個(gè)函數(shù)的情況：

  const [number,setNumber]= React.useState(0)
  const handleClick=()=>{
    setNumber((state)=>{
      return state+1//0+1=1
    })
    setNumber(8)//8
    setNumber((state)=>{
      return state+1//8+1=9
    })
  }

如何監(jiān)聽state的變化

類組件中的setState中，有第二個(gè)參數(shù)callback或是生命周期函數(shù)componentDidUpdate可以檢測(cè)監(jiān)聽到state改變或是組件更新。

那么在函數(shù)組件中，如何監(jiān)聽state變化呢？這個(gè)時(shí)候就需要useEffect出場(chǎng)了，通?？梢园裺tate作為依賴項(xiàng)傳入useEffect第二個(gè)參數(shù)deps，但是注意useEffect初始化是會(huì)默認(rèn)執(zhí)行一遍。

import React,{useEffect, useState} from 'react'
import ReactDom from 'react-dom'
export default function Test() {
  const [number,setNumber]= React.useState(0)
  const handleClick=()=>{
    ReactDom.flushSync(()=>{
      setNumber(2)
    })
    setNumber(1)
    setTimeout(()=>{
      setNumber(3)
    })
  }
  useEffect(()=>{
    console.log('變化',number)
  },[number])
  console.log(number)
  return (
    <button onClick={handleClick}>text1</button>
  )
}

執(zhí)行結(jié)果：

setState(dispatch)更新特點(diǎn)

上述講到的批量更新和flushSync，在函數(shù)組件中，dispatch更新效果和類組件是一樣的，但是useState有一點(diǎn)值得注意，就是當(dāng)?shù)蹛塾酶淖僺tate的函數(shù)dispatch，在本次函數(shù)執(zhí)行上下文中，是獲取不到state的值的，舉例如下：

  const [number,setNumber]= React.useState(0)
  const handleClick=()=>{
    ReactDom.flushSync(()=>{
      setNumber(2)
      console.log(number)
    })
    setNumber(1)
    console.log(number)
    setNumber(()=>{
      setNumber(3)
      console.log(number)
    })
  }

結(jié)果：0 0 0

原因很簡單，函數(shù)組件更新就是函數(shù)的執(zhí)行，在函數(shù)一次執(zhí)行過程中，函數(shù)內(nèi)部所有變量重新生命，所以改變的state，只有在下一次函數(shù)組件執(zhí)行時(shí)才會(huì)更新，所以在如同上一個(gè)函數(shù)執(zhí)行上下文中，number一直為0，無論怎么打印，都拿不到最新的state。

useState的注意事項(xiàng)

在使用useState的dispatchAction更新state的時(shí)候，記得不要傳入相同的state，這樣會(huì)使視圖不更新，比如下面：

  const [state,dispatchState]= React.useState({
    name:'aline'
  })
  const handleClick=()=>{
    state.name='aline'
    dispatchState(state)//直接改變state，在內(nèi)存中執(zhí)行的地址沒有變
  }

上述例子為什么沒有更新呢？是因?yàn)樵趗seState的dispatchAction處理邏輯中，會(huì)淺比較state兩次，發(fā)現(xiàn)state相同，不會(huì)開啟更新調(diào)度任務(wù)。其中demo中兩次state指向了相同的內(nèi)存空間，所以默認(rèn)為state相等，就不會(huì)發(fā)生視圖更新了

解決問題：把上述的dispatchState改成dispatch({...state}）根本解決了問題，淺拷貝了對(duì)象，重新開啟了內(nèi)存空間。

總結(jié)

類組件中的setState和函數(shù)組件中的useState有什么異同？

相同點(diǎn)

首先從原理角度出發(fā)，setState和useState更新視圖，底層都調(diào)用了scheduleUpdateOnFiber方法，而且時(shí)間驅(qū)動(dòng)情況下都有批量更新規(guī)則

不同點(diǎn)

• 再不是pureComponent組件模式下，setState不會(huì)淺比較兩次的state的值，只有調(diào)用setState，在沒有其他優(yōu)化手段的前提下，會(huì)執(zhí)行更新，但是useState中的dispatchAction會(huì)默認(rèn)比較兩次state是否相同，然后決定是否更新組件
• setState有專門監(jiān)聽state變化的回調(diào)函數(shù)callback，著這個(gè)回調(diào)函數(shù)中可以獲取到最新的值，而在函數(shù)組件中，只能通過useEffect來執(zhí)行state變化引起副作用。
• setState在頂層處理state的邏輯主要是和舊state進(jìn)行合并操作，而useState則是替換，及重新賦值

到此這篇關(guān)于React state狀態(tài)屬性用法講解的文章就介紹到這了,更多相關(guān)React state狀態(tài)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論