useState與this.setState

• this.setState中setTimeout能獲取到新的state
• this.setState同一時間段的會合并
• react能控制的周期和合成事件等方法中是異步的，即執(zhí)行完不會立即更新組件實例的state
• 原生事件和setTimeout中state是同步更新的

import React from 'react';
class Page extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {}
  }
  componentDidMount() {
    this.setState({
      a:1
    })
    this.setState({
      b:2
    })
    this.setState({
      c:3
    })
    this.setState({
      c: this.state.c + 1
    })
    setTimeout(() => {
        this.setState({
          d:1
        })
        console.log(this.state.d)
        this.setState({
          d: this.state.d + 2
        })
         console.log(this.state.d)
        this.setState({
          d: this.state.d + 3
        })
        console.log(this.state.a, this.state.b,this.state.c,this.state.d)
    })
  }

  render() {
    return (
      <div>
        <div>a:{this.state.a}</div>
        <div>b:{this.state.b}</div>
        <div>c:{this.state.c}</div>
      </div>
    );
  }
}
export default Page;

視圖結果：

image.png

console結果：

image.png

-useState的setXX的方法也會合并，且setTimeout/原生事件中合并

• setTimeout和原生事件中不能獲取到最新的state
• 下面useState封裝的setState，多個setState對不通的key也會相互覆蓋

import { useEffect, useState } from "react";

export default function Page() {
   const [state, setState_] = useState({});
  const setState = (newState) => {
    setState_({
      ...state,
      ...newState
    })
  }
  const [A, setA] = useState();
  const [B, setB] = useState();
  const [C, setC] = useState();

  useEffect(() => {
    setState({
      a: 1
    })
    setState({
      b: 2
    })
    setState({
      c: 3
    })
    setA(11); setB(22); setC(33);
    setTimeout(() => {
      setState({
        c: 3
     })
      console.log(state, A, B, C)
    })
  }, [])
  return (
    <>
      <div>a:{state.a}</div>
      <div>b:{state.b}</div>
      <div>c:{state.c}</div>
      <hr />
      <div>A:{A}</div>
      <div>B:{B}</div>
      <div>C:{C}</div>
    </>
  )
}

視圖結果：

image.png

console結果：