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

Jotai：一个简单而强大的 React 状态管理库

聖光之護

发布： 2024-12-20 09:42:18

原创

391人浏览过

jotai：一个简单而强大的 react 状态管理库

Jotai：React状态管理的简洁之选

Jotai 是一款为React应用设计的轻量级状态管理库，它提供了一种基于原子的、简洁的状态管理方式。开发者可以直接在组件内部管理和更新状态，同时保持架构清晰易懂。Jotai兼具高性能和灵活性，非常适合各种规模的React项目，从小项目到大应用都能轻松胜任。

其简洁的API和微小的包体积，尤其适合偏好原子状态管理，且希望避免Redux等复杂库带来的冗余代码的开发者。

1. Jotai核心概念

Jotai提供了一个精简的API，包含几个关键概念，方便管理React中的状态：

1. 原子 (Atom)

Jotai中的原子代表着最小的状态单元，类似于Recoil中的原子。每个原子保存单个状态，组件可以读取和修改原子的值。原子具有全局可访问性，是Jotai状态管理的基础。

示例：

<code class="javascript">import { atom } from 'jotai';

// 创建一个计数器状态的原子
export const counterAtom = atom(0); // 默认值为0</code>

登录后复制

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

2. 使用原子 (useAtom)

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

示例：

<code class="javascript">import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [count, setCount] = useAtom(counterAtom);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>计数器：{count}</p>
      <button onClick={increment}>递增</button>
      <button onClick={decrement}>递减</button>
    </div>
  );
};</code>

登录后复制

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

3. 派生原子 (Derived Atom)

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

示例：

<code class="javascript">import { atom } from 'jotai';
import { counterAtom } from './atoms';

// 创建一个派生原子
export const doubleCounterAtom = atom((get) => {
  const count = get(counterAtom); // 获取计数器原子的值
  return count * 2; // 派生新值
});</code>

登录后复制

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

4. 原子效应 (Atom Effect)

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

示例：

<code class="javascript">import { atom } from 'jotai';

export const counterAtom = atom(
  0, // 初始值
  (get, set, update) => {
    // 原子效应：在计数器更新时运行副作用
    console.log('计数器已更新：', update);
    set(counterAtom, update); // 更新 counterAtom 的状态
  }
);</code>

登录后复制

当原子状态发生变化时，此模式会执行副作用，例如API调用或日志记录。

2. 使用Jotai的优势

1. 简洁轻量

Jotai的设计简洁轻量，API极小。它不需要像动作创建器或reducer那样的冗余代码，从而可以更快上手。

2. 高性能

Jotai使用响应式模型，只有使用特定原子的组件才会在该原子发生变化时重新渲染。这可以实现高效的更新，尤其对于大型应用。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

3. 细粒度控制

Jotai允许对应用状态进行细粒度控制。原子是独立的，可以直接管理，不需要复杂的结构。

4. 最小化重新渲染

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

5. 可扩展灵活

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

3. 完整的Jotai应用示例

这是一个使用Jotai的小型计数器应用示例：

<code class="javascript">// atoms.js
import { atom } from 'jotai';

export const counterAtom = atom(0); // 定义一个原子来保存计数器的值</code>

登录后复制

<code class="javascript">// App.js
import React from 'react';
import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [count, setCount] = useAtom(counterAtom); // 在组件中使用原子

  return (
    <div>
      <p>计数器：{count}</p>
      <button onClick={() => setCount(count + 1)}>递增</button>
      <button onClick={() => setCount(count - 1)}>递减</button>
    </div>
  );
};

export default Counter;</code>

登录后复制

<code class="javascript">// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'jotai';
import Counter from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider>
      <Counter />
    </Provider>
  </React.StrictMode>
);</code>

登录后复制