React挂钩使用类对象作为useState

基础概念

React Hooks 是 React 16.8 版本引入的一个新特性，它允许你在函数组件中使用状态和其他 React 特性，而不需要编写类组件。useState 是 React Hooks 中的一个基本钩子，用于在函数组件中添加状态。

类型

useState 是一个钩子函数，它接受一个初始状态值，并返回一个状态变量和一个更新该状态的函数。

应用场景

任何需要在函数组件中管理状态的场景都可以使用 useState。例如，表单输入、计数器、轮播图等。

遇到的问题及解决方法

问题：为什么不能在 `useState` 中直接使用类对象作为初始状态？

useState 的初始状态应该是不可变的（immutable）。类对象是可变的（mutable），因为它们的属性可以被修改。如果直接使用类对象作为初始状态，可能会导致状态更新不一致的问题。

原因

React 的状态更新是基于浅比较（shallow comparison）的。如果初始状态是一个类对象，React 在比较新旧状态时可能会认为状态没有变化，即使对象的属性已经发生了变化。

解决方法

使用不可变数据结构：将类对象转换为不可变的数据结构，例如使用 immer 库来处理复杂的状态更新。
使用函数作为初始状态：如果初始状态的创建成本较高，可以传递一个函数来生成初始状态。

示例代码

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;