My Muri Life

切换主题

本页目录

深入理解useState ​

基础用法 ​

可以将useState官方文档中基础用法总结如下：

javascript
const [cnt, setCnt] = useState(0)

const handleClick = () => {
  // 自动批处理：减少函数组件的调用次数
  setCnt(cnt + 1)
  setCnt(cnt + 1)

  // 取消自动批处理 -- flushSync：需要谨慎使用
  flushSync(() => setCnt(cnt + 1))
  flushSync(() => setCnt(cnt + 1))

  // 取消自动批处理 -- 异步代码
  setTimeout(() => {
    setCnt(cnt + 1)
    setCnt(cnt + 1)
  }, 0)

  // 取消自动批处理 -- 回调函数：也可用于获取更新后的值
  setCnt((cnt) => cnt + 1)
  setCnt((cnt) => cnt + 1)
}

// 惰性初始化：lazyComputation函数只会在初始渲染时被调用
const lazyComputation = () => {
  const initialState = someComputation(props)
  return initialState
}
const [state, setState] = useState(lazyComputation)

注意事项 ​

  • 不能在循环、条件或嵌套函数中调用Hook：Hook的调用顺序在每次渲染中必须保持一致，否则会导致状态混乱。

  • 状态更新是异步的：React可能会批量更新状态，因此在更新状态后立即读取状态可能得到的是旧值。

获取新值 ​

由于useState是异步的，所以可以通过下面四种方法获取更新后的值：

  1. 在组件重新渲染后获取新值：
jsx
import React, { useState } from 'react'

const Counter = () => {
  const [cnt, setCnt] = useState(0)

  const handleClick = () => {
    setCnt(cnt + 1) // 更新状态
  }

  return (
    <div>
      <p>当前 cnt: {cnt}</p> {/* 这里会显示更新后的值 */}
      <button onClick={handleClick}>增加</button>
    </div>
  )
}
  1. 使用useEffect监听状态变化：
jsx
import React, { useState, useEffect } from 'react'

const Counter = () => {
  const [cnt, setCnt] = useState(0)

  useEffect(() => {
    console.log('cnt 已更新:', cnt) // 每次 cnt 更新后都会触发
  }, [cnt]) // 监听 cnt 的变化

  const handleClick = () => {
    setCnt(cnt + 1)
  }

  return (
    <div>
      <p>当前 cnt: {cnt}</p>
      <button onClick={handleClick}>增加</button>
    </div>
  )
}
  1. 函数式更新中获取新值：
jsx
import React, { useState } from 'react'

const Counter = () => {
  const [cnt, setCnt] = useState(0)

  const handleClick = () => {
    setCnt((prevCnt) => {
      const newCnt = prevCnt + 1
      console.log('新 cnt:', newCnt) // 这里可以获取到新值
      return newCnt
    })
  }

  return (
    <div>
      <p>当前 cnt: {cnt}</p>
      <button onClick={handleClick}>增加</button>
    </div>
  )
}
  1. 使用useRef存储最新值：
jsx
import React, { useState, useRef, useEffect } from 'react'

const Counter = () => {
  const [cnt, setCnt] = useState(0)
  const countRef = useRef(cnt)

  useEffect(() => {
    countRef.current = cnt // 每次 cnt 更新后同步到 ref
  }, [cnt])

  const handleClick = () => {
    setCnt(cnt + 1)
    console.log('最新 cnt:', countRef.current) // 这里可以获取到最新值
  }

  return (
    <div>
      <p>当前 cnt: {cnt}</p>
      <button onClick={handleClick}>增加</button>
    </div>
  )
}

实现原理 ​

以下是一个简单实现，只是帮助理解其工作原理：

javascript
let state // 当前状态
let setters // 更新函数数组
let stateIdx = 0 // 当前状态索引

function useState(initState) {
  const curIdx = stateIdx
  // 初始化
  if(state === undefined) {
    state = []
  }
  // 初始化赋值
  if(state[curIdx] === undefined) {
    state[curIdx] = typeof initState === 'function'
      ? initState()
      : initState
  }
  // 初始化setter函数
  const setState = (newState) => {
    state[curIdx] = typeof newState === 'function'
      ? newState(state[curIdx])
      : newState

    render() // 触发重新渲染
  }

  setter[curIdx] = setState
  stateIdx++

  return [state[curIdx], setState]
}

function render() {
  stateIdx = 0 // 重置索引
  // 重新渲染组件
}

事务机制 ​

React引入事务机制即批量处理机制（默认异步）的原因？

为了优化性能，减少不必要的渲染。

批量处理（batch）主流程：

null

事务机制的原理如下： ​

  1. 执行定义的方法updateMsg时，先声明isBatchingUpdates，并设置为true；

  2. updateMsg函数内部按序执行到setMsg时，此时的isBatchingUpdate初始值为true，命中batchUpdate，走主流程的中Y分支：

jsx
const Component = () => {
  const [msg, setMsg] = useState('init')

  const updateMsg = () => {
    // 1.开始时
    // isBatchingUpdate = true，命中batchUpdate
    setMsg('update')
    // 2.结束时
    // isBatchingUpdate = false
  }

  retrun({
    // JSX
  })
}
  1. 若setMsg作为异步函数的回调函数会等待同步代码执行完（同EventLoop），再执行，而此时的isBatchingUpdate为false，未命中batchUpdate，走主流程的中N分支：
jsx
const Component = () => {
  const [msg, setMsg] = useState('init')

  const updateMsg = () => {
    // 1.开始时
    // isBatchingUpdate = true
    setTimeout(() => {
      // 此时isBatchingUpdate = false，未命中batchUpdate
      setMsg('update')
    }, 0)
    // 2.结束时
    // isBatchingUpdate = false

    /* 等价于在此时执行setMsg */
    // setMsg('update')
  }

  retrun({
    // JSX
  })
}

总结

  • 同步更新：在React生命周期方法、React事件处理函数中调用setState或useState时，更新是异步的，因为React会将这些更新放入队列中批量处理。

  • 异步更新：在setTimeout、setInterval或自定义DOM事件处理函数中调用setState或useState时，更新是同步的，因为此时React不会进行批量更新。