高效更新React useState对象

const [user, setUser] = useState({ name: 'Alice', age: 25 });

const updateName = (newName) => {
  setUser((prevUser) => ({
    ...prevUser,
    name: newName,
  }));
};

import produce from 'immer';

const [user, setUser] = useState({ name: 'Alice', details: { age: 25, city: 'Wonderland' } });

const updateCity = (newCity) => {
  setUser((prevUser) => produce(prevUser, (draft) => {
    draft.details.city = newCity;
  }));
};

import React, { useState } from 'react';
import produce from 'immer';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Alice', details: { age: 25, city: 'Wonderland' } });

  const updateName = (newName) => {
    setUser((prevUser) => ({
      ...prevUser,
      name: newName,
    }));
  };

  const updateCity = (newCity) => {
    setUser((prevUser) => produce(prevUser, (draft) => {
      draft.details.city = newCity;
    }));
  };

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Age: {user.details.age}</p>
      <p>City: {user.details.city}</p>
      <button onClick={() => updateName('Bob')}>Change Name</button>
      <button onClick={() => updateCity('New Wonderland')}>Change City</button>
    </div>
  );
}

export default UserProfile;