React挂钩使用类对象作为useState

import React, { useState } from 'react';

// 不推荐的方式：直接使用类对象作为初始状态
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

function App() {
  const [user, setUser] = useState(new User('John', 30)); // 不推荐

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={() => setUser(new User('Jane', 25))}>Change User</button>
    </div>
  );
}

export default App;

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

// 推荐的方式：使用不可变数据结构
function App() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const changeUser = () => {
    setUser(produce(draft => {
      draft.name = 'Jane';
      draft.age = 25;
    }));
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={changeUser}>Change User</button>
    </div>
  );
}

export default App;