React Hooks 系列 之 useState ​

import { useState } from "react";
import { Card, Button, Space } from "antd";
const Counter = () => {
  const [count, setCount] = useState(0);
  // 方法一
  function handleMultipleUpdates() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  // 方法二
  function handleMultipleUpdatesFn() {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
  return (
      <Space>
        <div>Count: {count}</div>
        <Button onClick={handleMultipleUpdates} type="primary">
          批量更新[方法一]
        </Button>
        <Button onClick={handleMultipleUpdatesFn} type="primary">
          批量更新[方法二]
        </Button>
        <Button onClick={() => setCount(0)} type="primary">
        </Button>
      </Space>
    </Card>
export default Counter;

import { useState } from "react";
import { Card, Button, Space } from "antd";
const Counter = () => {
  const [count, setCount] = useState(0);
  // 方法一
  function handleMultipleUpdates() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  // 方法二
  function handleMultipleUpdatesFn() {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
  return (
      <Space>
        <div>Count: {count}</div>
        <Button onClick={handleMultipleUpdates} type="primary">
          批量更新[方法一]
        </Button>
        <Button onClick={handleMultipleUpdatesFn} type="primary">
          批量更新[方法二]
        </Button>
        <Button onClick={() => setCount(0)} type="primary">
        </Button>
      </Space>
    </Card>
export default Counter;

考虑以下代码：

function handleMultipleUpdates() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

function handleMultipleUpdates() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

如果 count 的初始值为 0，调用 handleMultipleUpdates 函数后，你可能期望 count 的值为 3。但实际上，由于三次 setCount 调用都基于同一个 count 值，结果 count 的值仍然为 1。

相反，如果我们使用函数式更新：

function handleMultipleUpdatesFn() {
  setCount((prevCount) => prevCount + 1);
  setCount((prevCount) => prevCount + 1);
  setCount((prevCount) => prevCount + 1);
}

function handleMultipleUpdatesFn() {
  setCount((prevCount) => prevCount + 1);
  setCount((prevCount) => prevCount + 1);
  setCount((prevCount) => prevCount + 1);
}

这时，每次 setCount 调用都基于最新的状态值，所以 count 的值会如预期地增加到 3。

结论 :

• 当状态更新不依赖于先前的状态值时，可以直接传递一个新的状态值。
• 当状态更新依赖于先前的状态值，或者你需要连续多次更新状态时，建议使用函数式更新。

useState 的惰性初始化 ​

useState 的初始状态参数支持惰性初始化。这意味着你可以传递一个函数作为 useState 的参数，这个函数会在组件的首次渲染时被调用，而不是在每次渲染时都被调用。

惰性初始化的主要用途是为了优化性能。当初始化状态需要进行计算密集型操作或其他昂贵的操作时，你不希望这些操作在每次组件渲染时都被执行。通过使用惰性初始化，你可以确保这些操作只在组件首次渲染时执行一次。

假设你有一个大的 JSON 数据，你只想在组件首次渲染时解析它：

const bigJsonData = "{...}"; // 大量的 JSON 数据
function MyComponent() {
  const [data, setData] = useState(() => {
    console.log("Parsing JSON");
    return JSON.parse(bigJsonData);
  // ... 其他代码
}

const bigJsonData = "{...}"; // 大量的 JSON 数据
function MyComponent() {
  const [data, setData] = useState(() => {
    console.log("Parsing JSON");
    return JSON.parse(bigJsonData);
  // ... 其他代码
}

在上述代码中，console.log("Parsing JSON") 只会在 MyComponent 首次渲染时打印一次，即使组件重新渲染多次。这是因为 useState 使用了惰性初始化，所以传递给它的函数只在首次渲染时被调用。

这种特性在处理大量数据或昂贵的计算时特别有用，因为它可以避免不必要的重复操作，从而提高应用的性能。

useState 是异步函数吗 ​

useState 不是异步函数。

在 React 中，当你调用 setState 或 useState 时，React 并不会立即更新组件。相反，它会将更新标记为“待处理”，并将其添加到一个更新队列中。然后，React 的调度机制会决定何时进行这些更新。

在 React 18 中，引入了新的并发模式，这使得 React 的调度机制变得更加复杂。在并发模式下，React 可以在多个更新之间进行切换，这意味着在某些情况下，useState 的行为可能看起来像是异步的。但实际上，这是由于 React 的调度机制，而不是 useState 本身是异步的。

例如，考虑以下代码：

function MyComponent() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
    console.log(count);
  return <button onClick={handleClick}>Click me</button>;
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
    console.log(count);
  return <button onClick={handleClick}>Click me</button>;
}

在这个例子中，当你点击按钮时，你可能期望控制台会打印出更新后的计数值。但实际上，它会打印出点击按钮时的计数值。这是因为 setCount 并不会立即更新 count 的值，而是将更新排入队列，等待 React 的调度机制决定何时进行更新。

因此，虽然 useState 可能在某些情况下表现得像是异步的，但这实际上是由于 React 的调度机制，而不是 useState 本身是异步的。

利用 useState 封装自定义 Hook-useSetState ​

import { useCallback, useState } from "react";
 * 一个自定义 hook，提供 setState 功能，但与 class 组件中的 setState 类似，
 * 它允许合并状态更新，而不是替换它。
 * @param {Object} initialState - 初始状态，默认为空对象。
 * @returns {Array} 返回一个数组，第一个元素是当前状态，第二个元素是合并状态的函数。
const useSetState = (initialState = {}) => {
  // 使用 useState hook 设置初始状态
  const [state, setState] = useState(initialState);
  // 定义一个合并状态的函数
  const setMergeState = useCallback((patch) => {
    setState((prevState) => ({
      ...prevState, // 保留之前的状态
      // 如果 patch 是一个函数，那么使用该函数返回的结果来更新状态，
      // 否则直接使用 patch 对象来更新状态。
      ...(typeof patch === "function" ? patch(prevState) : patch),
  }, []); // 使用空依赖数组，确保该回调函数不会重新创建
  // 返回当前状态和合并状态的函数
  return [state, setMergeState];
// 导出自定义 hook
export default useSetState;

import { useCallback, useState } from "react";
 * 一个自定义 hook，提供 setState 功能，但与 class 组件中的 setState 类似，
 * 它允许合并状态更新，而不是替换它。
 * @param {Object} initialState - 初始状态，默认为空对象。
 * @returns {Array} 返回一个数组，第一个元素是当前状态，第二个元素是合并状态的函数。
const useSetState = (initialState = {}) => {
  // 使用 useState hook 设置初始状态
  const [state, setState] = useState(initialState);
  // 定义一个合并状态的函数
  const setMergeState = useCallback((patch) => {
    setState((prevState) => ({
      ...prevState, // 保留之前的状态
      // 如果 patch 是一个函数，那么使用该函数返回的结果来更新状态，
      // 否则直接使用 patch 对象来更新状态。
      ...(typeof patch === "function" ? patch(prevState) : patch),
  }, []); // 使用空依赖数组，确保该回调函数不会重新创建
  // 返回当前状态和合并状态的函数
  return [state, setMergeState];