React 状态更新问题解决

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 2); // 第二次更新不会立即生效
  };

  return (
    <button onClick={handleClick}>Count: {count}</button>
  );
}

setCount((prevCount) => prevCount + 1);
setCount((prevCount) => prevCount + 2); // 基于最新状态更新

setCount((prevCount) => prevCount + 1);
setCount((prevCount) => prevCount + 2);

function App() {
  const [obj, setObj] = useState({ count: 0 });

  const handleClick = () => {
    obj.count += 1; // 直接修改状态，React 不会检测到变化
    setObj(obj);
  };

  return <button onClick={handleClick}>{obj.count}</button>;
}

setObj((prevObj) => ({ ...prevObj, count: prevObj.count + 1 }));

function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const handleClick = () => {
    setCount1(count1 + 1);
    setCount2(count1 + 2); // 依赖 count1 的值，但未更新
  };

  return (
    <div>
      <button onClick={handleClick}>Update</button>
      <p>{count1}</p>
      <p>{count2}</p>
    </div>
  );
}

const [state, setState] = useState({ count1: 0, count2: 0 });

setState((prevState) => ({
  count1: prevState.count1 + 1,
  count2: prevState.count1 + 2,
}));

const Child = React.memo(({ value }) => {
  console.log('Child rendered');
  return <p>{value}</p>;
});

const handleClick = useCallback(() => {
  setCount((prevCount) => prevCount + 1);
}, []);

// 不推荐
state.items.push(newItem);
setState({ items: state.items });

// 推荐
setState((prevState) => ({
  items: [...prevState.items, newItem],
}));

// 嵌套结构
const [state, setState] = useState({ user: { profile: { name: 'Alice' } } });

// 更新操作复杂
setState((prevState) => ({
  ...prevState,
  user: {
    ...prevState.user,
    profile: {
      ...prevState.user.profile,
      name: 'Bob',
    },
  },
}));

// 推荐使用扁平结构
const [user, setUser] = useState({ name: 'Alice' });
setUser((prevUser) => ({ ...prevUser, name: 'Bob' }));

const [value, setValue] = useState(() => computeExpensiveValue());

useEffect(() => {
  // 状态更新后的副作用
  fetch(`/api/data?count=${count}`);
}, [count]);

import { flushSync } from 'react-dom';

flushSync(() => setCount(count + 1));
flushSync(() => setOtherState(value));