Jotai：一个简单而强大的 React 状态管理库-js教程-PHP中文网

Jotai: A Simple and Powerful State Management Library for React

Jotai：一个原始而灵活的 React 状态管理库

Jotai 是一个用于 React 应用程序的简约状态管理库。它提供了一种简单的原子方法来管理状态，允许您直接在组件内管理和更新状态，同时保持架构精简且易于理解。 Jotai 的设计具有高性能和灵活性，使其成为任何规模的 React 应用程序（从小型项目到大型应用程序）的绝佳选择。

凭借其简单的 API 和较小的包大小，Jotai 特别适合喜欢原子状态管理的开发人员，而无需通常与 Redux 等更复杂的状态管理库相关的样板。

1. Jotai的核心理念

Jotai 引入了一个简单的 API，其中包含一些关键概念，可以轻松管理 React 中的状态：

1.原子

Jotai 中的原子代表最小的状态单位，类似于 Recoil 的原子。原子保存单个状态，组件可以读取和写入原子的值。 Atom 是全球可访问的，是 Jotai 状态管理的基础。

示例：

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

登录后复制

atom 用于定义状态单元。该原子的值可以在 React 组件中读取或写入。

2.使用Atom

useAtom 钩子是 Jotai 中与原子交互的主要方式。它允许组件读取原子的值并更新它。这与使用 useState 类似，但能够跨组件共享状态。

示例：

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

登录后复制

useAtom 用于获取和设置原子的状态。第一个值（counter）是当前状态，第二个值（setCounter）是用于更新状态的函数。

3.派生原子

Jotai 允许您创建依赖于其他原子或派生数据的派生原子。这些类似于 Recoil 的选择器，允许您根据其他原子计算新值。

示例：

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

登录后复制

派生原子是使用读取其他原子并基于这些原子返回新值的函数创建的。

4.原子效应

Jotai 还支持原子效果，它可以运行代码以响应原子值的变化。这允许您执行副作用，例如在状态更改时获取数据或运行回调。

示例：

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

登录后复制

只要原子状态发生变化，此模式就可以执行副作用，例如 API 调用或日志记录。

2.使用 Jotai 的好处

1.简单且轻量

Jotai 的设计是简约且轻量级的，API 接口非常小。它不需要像动作创建器或减速器这样的样板代码，从而可以更快地开始使用。

2.表现

Jotai 使用 reactive 模型，其中只有使用特定原子的组件才会在该原子发生变化时重新渲染。这可以实现高效的更新，特别是对于具有许多组件的大型应用程序。

3.细粒度控制

Jotai 使您可以对应用程序中的状态进行细粒度控制。原子是独立的，可以直接管理，不需要像减速器或上下文提供者这样的复杂结构。

4.最少的重新渲染

Jotai 通过仅更新订阅更改的特定原子的组件来优化重新渲染，而不是重新渲染整个组件树。

5.可扩展且灵活

Jotai 的原子设计使其能够随着应用程序的增长而轻松扩展。您可以拥有多个独立的原子来代表应用程序状态的不同部分，这使得架构干净且灵活。

3.完整 Jotai 应用示例

这是使用 Jotai 的小型计数器应用程序的示例：

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

登录后复制

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

登录后复制

import { atom } from 'jotai';

export const counterAtom = atom(
  0, // Initial value
  (get, set, update) => {
    // Atom effect: run a side effect when the counter is updated
    console.log('Counter updated:', update);
    set(counterAtom, update); // Update the state of counterAtom
  }
);

登录后复制