React中setState/useState的使用方法详细介绍

import React, { Component } from 'react'
export default class DemoClassComp extends Component {
  constructor(props) {
    super(props)
    this.state = {
      number: 1,
    }
  }
  inControl = ()=>{
    this.setState({number: 1}, () => {
      console.log('%c 📯 DemoClassComp -> inControl -> this.state.number ', 'font-size:16px;background-color:#f31440;color:white;', this.state.number)
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.inControl} >点我</button>
      </div>
    )
  }
}

function DemoFuncComp() {
  const [qimingFlag, setQimingFlag] = useState(false);
  const qimingFlagRef = useRef(false);
  const handleLine = () => {
    deleteQimingFieldsData(data, qimingFlagRef?.current); //* 删除启明相关字段的数据
  }
  const initData = useCallback(async () => {
    await commonQuery(basicInfoHeader, { contractId });
    const qimingFlagNow = basicInfoHeader.current?.get('qimingFlag');
    setQimingFlag(qimingFlagNow); //* 用于出发重新渲染
    qimingFlagRef.current = qimingFlagNow;
    handleLine(); //* 要求 先setQimingFlag
  }, [contractId])
  /**生命周期 */
  useEffect(() => {
    initData();
  }, [contractId]);
  return (
    <>
      <Form dataSet={basicInfoHeader} disabled={true} columns={4}>
        <Lov name="receiverObj" />
    </Form>
    </>
  )
}

function DemoFuncComp() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  console.log('render')
  function outControl() {
    Promise.resolve().then(() => {
      setA((a) => a + 1);
      setB((b) => b + 1);
    })
  }
  function inControl() {
    setA((a) => a + 1);
    setB((b) => b + 1);
  }
  return (
    <>
      <button onClick={outControl} >{a}-{b} 【不受react调度】</button>
      <button onClick={inControl} >{a}-{b} 【react调度】</button>
    </>
  )
}
//! 当点击【不受react调度】按钮时，render 了两次
//! 当点击【react调度】按钮时，只重新 render 了一次

function DemoFuncComp() {
  const [a, setA] = useState(1)
  console.log('a', a)
  function outControl() {
    Promise.resolve().then(() => {
      setA((a) => a + 1)
      setA((a) => a + 1)
    })
  }
  function inControl() {
    setA((a) => a + 1)
    setA((a) => a + 1)
  }
  return (
    <>
      <button onClick={outControl} >{a} 【不受react调度】</button>
      <button onClick={inControl} >{a} 【react调度】</button>
    </>
  )
}
//! 当点击【不受react调度】按钮时，两次 setA 各自 render 一次，分别打印 2，3
//! 当点击【react调度】按钮时，两次 setA 都执行，但合并 render 了一次，打印 3

class DemoClassComp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      a: 1,
      b: 'b',
    }
  }
  outControl = () => {
    Promise.resolve().then(() => {
      this.setState({...this.state, a: 'aa'})
      this.setState({...this.state, b: 'bb'})
    })
  }
  inControl = () => {
    this.setState({...this.state, a: 'aa'})
    this.setState({...this.state, b: 'bb'})
  }
  render() {
    console.log('render')
    return (
      <>
        <button onClick={this.outControl} >【不受react调度】</button>
        <button onClick={this.inControl} >【react调度】</button>
      </>
    )
  }
}
//! 当点击【不受react调度】按钮时，render 了两次
//! 当点击【react调度】按钮时，只重新 render 了一次

class DemoClassComp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      a: 1,
    }
  }
  outControl = () => {
    Promise.resolve().then(() => {
      this.setState({a: this.state.a + 1})
      this.setState({a: this.state.a + 1})
    })
  }
  inControl = () => {
    this.setState({a: this.state.a + 1})
    this.setState({a: this.state.a + 1})
  }
  render() {
    console.log('a', this.state.a)
    return (
      <>
        <button onClick={this.outControl} >【不受react调度】</button>
        <button onClick={this.inControl} >【react调度】</button>
      </>
    )
  }
}
//! 当点击【不受react调度】按钮时，两次 setState 各自 render 一次，分别打印 2，3
//! 当点击【react调度】按钮时，两次 setState 合并，只执行了最后一次，打印 2