用 React 状态管理，字节跳动带你看 unstated

前端

2023-12-11 03:55:40

Unstated：轻松管理 React 状态的库

什么是 Unstated？

Unstated 是一个用于管理 React 状态的开源库。它通过将状态与组件分离，让你的代码更易于阅读和维护。

Unstated 的工作原理

Unstated 通过创建一个名为“store”的对象来存储状态。这个 store 可以被任何组件访问，但只有那些需要访问它的组件才会重新渲染。这可以提高性能，因为它防止了不必要的重新渲染。

Unstated 的优点

易于使用： Unstated 易于学习和使用，即使你是 React 新手。
高性能： Unstated 非常高效，因为它只会在需要时重新渲染组件。
可扩展： Unstated 可以轻松地扩展到大型应用程序中。
开源： Unstated 是一个开源库，这意味着它是免费的，你可以随时查看其源代码。

如何使用 Unstated？

安装

使用以下命令安装 Unstated：

npm install --save unstated

创建 Store

创建一个 store 来存储你的状态：

import { createStore } from 'unstated';

const store = createStore({
  count: 0,
});

创建组件

使用 useContainer 钩子创建组件来使用 store：

import React, { useState } from 'react';
import { useContainer } from 'unstated';

const Counter = () => {
  const store = useContainer(store);

  const handleClick = () => {
    store.setState({ count: store.state.count + 1 });
  };

  return (
    <div>
      <h1>Count: {store.state.count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;

代码示例

这个例子展示了如何使用 Unstated 创建一个计数器组件：

store.js

import { createStore } from 'unstated';

export const store = createStore({
  count: 0,
});

Counter.js

import React, { useState } from 'react';
import { useContainer } from 'unstated';
import { store } from './store';

const Counter = () => {
  const store = useContainer(store);

  const handleClick = () => {
    store.setState({ count: store.state.count + 1 });
  };

  return (
    <div>
      <h1>Count: {store.state.count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;