当前位置：首页 > news >正文

React使用Valtio的hook实现响应式状态管理

news 2025/7/1 22:14:11

Valtio 是一个轻量级的库，可以在前端应用程序中管理状态。它的使用方式非常简单直观，让我们能够轻松跟踪和更新应用程序的状态，并且无需手动处理组件重新渲染的逻辑。假设我们正在构建一个社交媒体应用，我们想要追踪用户的信息、主题设置以及未读通知的数量。
首先，我们需要创建一个状态对象，我们可以称之为 appState，并使用 Valtio 的 proxy 函数来将其转换为可变对象。这样，我们就可以直接修改状态字段，而无需手动编写繁琐的状态更新逻辑。

import { proxy, useProxy } from 'valtio';
const appState = proxy({
  username: "",
  theme: "light",
  unreadNotifications: 0
});

现在，我们可以定义一些函数来更新状态字段。例如，我们可以编写一个叫做 updateUsername 的函数，用于更新用户名字段。

export function updateUsername(newUsername) {
  appState.username = newUsername;
}

另外，我们可以编写一个名为 toggleTheme 的函数，用于切换应用程序的主题。

export function toggleTheme() {
  appState.theme = appState.theme === "light" ? "dark" : "light";
}

此外，我们还可以编写一个叫做 incrementUnreadNotifications 的函数，用于增加未读通知的数量。

export function incrementUnreadNotifications() {
  appState.unreadNotifications++;
}

现在，我们已经定义了一些更新状态的函数。接下来，让我们看看如何在组件中使用这些状态和函数。
我们可以使用 Valtio 提供的 useProxy 函数来订阅状态的变化。这样，当状态字段发生变化时，相关的组件将自动重新渲染。

export function UserProfile() {
  const state = useProxy(appState);
  return (
    <div>
      <h2>Welcome, {state.username}!</h2>
      <p>Theme: {state.theme}</p>
      <p>Unread notifications: {state.unreadNotifications}</p>
    </div>
  );
}

在上面的示例中，我们使用了 useProxy 函数来订阅 appState 的变化，并将其赋值给 state 变量。然后，我们可以在组件中直接访问状态字段，并将其渲染到页面上。
使用 Valtio，我们可以轻松地管理状态，让状态更新和组件重新渲染变得简单而直观。无论是更新用户名、切换主题还是增加通知数量，Valtio 都能够自动处理这些事情。

其他注意:取数据的两种方式

import { proxy, useSnapshot } from 'valtio';
// import { useProxy } from 'valtio/utils'
const info = useSnapshot(accountInfo);//Snapshot cannot be modified after export.
//const info =  useProxy(accountInfo);//this object can be modified;