React中setState详解

setState详解

1. 不能直接修改 state 因为没有双向数据绑定，不会自动更新视图

 2. 使用setState进行修改的时候是异步执行的

              为什么

              将多次状态修改  合并   成为1次，防止多次渲染 Object.assign

  3. setState   第一种用法：对象式 通过合并防止多次渲染

                       第二种用法：回调函数 通过维护一个队列，统一处理回调，合并多次渲染

  4. setState 第二个参数 是一个回调，用于获取最新的state状态（在render函数的return执行时）

  5. 同步更新目前使用的是 flushSync

              react 16 setState 在某些情况下是同步的 定时器 dom 更新等

              react 18 所有的 setState均为异步

创建一个app.jsx

import React, { Component } from 'react'
import { flushSync } from 'react-dom'
/* 
  1. 不能直接修改 state 因为没有双向数据绑定，不会自动更新视图
  2. 使用setState进行修改的时候是异步执行的
      为什么 
      将多次状态修改  合并   成为1次，防止多次渲染 Object.assign
  3. setState 第一种用法：对象式 通过合并防止多次渲染
              第二种用法：回调函数 通过维护一个队列，统一处理回调，合并多次渲染
  4. setState 第二个参数 是一个回调，用于获取最新的state状态（在render函数的return执行时）
  5. 同步更新目前使用的是 flushSync
     react 16 setState 在某些情况下是同步的 定时器 dom 更新等
     react 18 所有的 setState均为异步


*/
export default class App extends Component {
  state = {
    counter: 0
  }
  add() {
    flushSync(() => {
      this.setState({
        counter: this.state.counter + 1
      })
    })
    console.log(this.state.counter)
    flushSync(() => {
      this.setState({
        counter: this.state.counter + 1
      })
    })
    console.log(this.state.counter)

    // this.setState(
    //   {
    //     counter: this.state.counter + 1
    //   },
    //   () => {
    //     console.log(this.state.counter)
    //   }
    // )
    // this.setState(state => {
    //   // state 是上一次的状态值
    //   return {
    //     counter: state.counter + 1
    //   }
    // })
    // this.setState(state => {
    //   // state 是上一次的状态值
    //   return {
    //     counter: state.counter + 1
    //   }
    // })
    // this.setState(state => {
    //   // state 是上一次的状态值
    //   return {
    //     counter: state.counter + 1
    //   }
    // })
    // this.setState(state => {
    //   // state 是上一次的状态值
    //   return {
    //     counter: state.counter + 1
    //   }
    // })
    // this.state.counter += 1
    // console.log(this.state.counter)
    /* 同步更新 */
  }
  render() {
    console.log('渲染')
    return (
      <div>
        <div>Counter:{this.state.counter}</div>
        <button onClick={() => this.add()}>增加</button>
      </div>
    )
  }
}

创建main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)