【Jotai】关于Jotai

2 年 ago
宇, 华
1 minute

因为要在工作中接触到它，所以我会从概要中学习。

记录

这个功能类似于将useState和useContext结合起来，但更加灵活和强大的状态管理。

▼ 进行比较试试看

JotaiuseStateuseContext使用方法アトムを作成し、useAtomフックでアトムの状態を読み取り・更新useStateフックを使用して状態を管理useContextフックとコンテキストを使用して状態を共有状態の単位アトム（Atom）単一の状態コンポーネントツリー全体で共有値の変更アトムの値を直接変更するsetState関数を使用して状態を変更別のコンポーネントで状態を更新値の参照useAtomフックを使用してアトムの値を参照状態変数を直接参照useContextフックとコンテキストを使用して参照非同期操作非同期操作をサポート非同期操作をサポートしない非同期操作をサポートしない依存関係の追跡自動的に再レンダリングをトリガーする依存関係の追跡と再レンダリングの手動管理が必要依存関係の追跡と再レンダリングの手動管理が必要ライブラリのサイズ小さく、軽量Reactに組み込まれているため、Reactのサイズに依存Reactに組み込まれているため、Reactのサイズに依存

例子

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

export const countAtom = atom(0);

// Counter.js
import { useAtom } from 'jotai';
import { countAtom } from './atoms';

function Counter() {
  const [count, setCount] = useAtom(countAtom);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

// App.js
import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Jotai Counter App</h1>
      <Counter />
    </div>
  );
}

export default App;

在上面的例子中，我们将创建Atom的过程拆分到一个名为atoms.js的单独文件中。
在atoms.js中创建了一个名为countAtom的Atom，然后在Counter.js中进行导入和使用?

在Counter.js中，获取了countAtom，并进行了计数器的显示和值的增减。

在App.js中显示Counter组件。

通过在另一个文件中创建Atom可以提高代码的模块化和可重用性。

一篇非常易懂的文章
体验了React状态管理库的超级新星——「Jotai」

学习使用状态管理库”Jotai”来处理React应用程序。

使用React状态管理库Jotai的入门方法
使用React状态管理库Jotai的介绍特集

bannerAds