React state状态属性用法讲解

setState(obj,callback)

/* 第一个参数为function类型 */
this.setState((state,props)=>{
    return {number:}
})
/* 第一个参数为object类型 */
this.setState({ number:1 },()=>{
    console.log(this.state.number) //获取最新的number
})

enqueueSetState(){
    //每次调用setState，react都会创建一个update里面保存了如下
    const update= createUpdate(expirationTime,suspenseConfig)
    //callback 可以理解为setState回调函数，第二个参数
    callback && (update.callback=callback)
    //enqueuUpdate 把当前的update 传入当前fier ，待更新队列中
    enqueuUpdate(fiber,update)
    //开始调度更新
    scheduleUpdateOnFiber(fiber,expirationTime)
}

//在legcy模式下，所有的事件都将经过此函数统一处理
function dispatchEventFoLegacyPluginEventSystem(){
    //handleTopLevel 事件处理函数
    batchEventUpdates(handleTopLvele,bookKeeping)
}

batchEventUpdate(fn,a){
    //开启批量更新
    isBatchingEventUpdates=true；
    try{
        //这里执行了事处理函数，比如在一次点击事件中触发setState，那么它将在这个函数执行
        return batchEventUpdateImpl(fn,a,b);
    }finally{
        //try里面的return 不会影响finally执行
        //完成一次事件，批量更新
        isBatchingEventUpdates=false
    }
}

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>
    );
  }
}

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)
  })
}

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)
    })
  })

const [state,setState] = useState(initData)

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

  const [number,setNumber]=React.useState(()=>{
    //props中的a=1 state为0-1随机数
    //props中a=2 state为1-10的随机数
    //否则 state为1-100的随机数
    if(props.a===1) return Math.random()
    if(props.a===2) return Math.ceil(Math.random()*10)
    return Math.ceil(Math.random()*100)
  })

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

  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
    })
  }

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>
  )
}

  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)
    })
  }

  const [state,dispatchState]= React.useState({
    name:'aline'
  })
  const handleClick=()=>{
    state.name='aline'
    dispatchState(state)//直接改变state，在内存中执行的地址没有变
  }