React 状态管理库中的超新星？！我摸了“Jotai”

最近，一位工程师熟人告诉我，一个名为“Jotai”的状态管理库比Recoil更轻、更容易使用！有人告诉我，所以我立即触摸了“Jotai”

? Jotai 是什么？

包名来源于日语中的“状态”
您可以使用受Recoil 启发的 atom 模型来管理 React 中的状态。
通过优化基于原子依赖的渲染，解决了额外重新渲染 React 上下文的问题，消除了对记忆技术的需求
提供最少的 API
使用 TypeScript 开发

?如何使用

import { atom, useAtom } from 'jotai'

// Create your atoms and derivatives
const textAtom = atom('hello')
const uppercaseAtom = atom(
  (get) => get(textAtom).toUpperCase()
)

// Use them anywhere in your app
const Input = () => {
  const [text, setText] = useAtom(textAtom)
  const handleChange = (e) => setText(e.target.value)
  return (
    <input value={text} onChange={handleChange} />
  )
}

const Uppercase = () => {
  const [uppercase] = useAtom(uppercaseAtom)
  return (
    <div>Uppercase: {uppercase}</div>
  )
}

// Now you have the components
const App = () => {
  return (
    <>
      <Input />
      <Uppercase />
    </>
  )
}

Jotai 提供Provider、atom、useAtom API。

提供者

就像 React Context 一样工作。
Atom 值驻留在不同的 store 中。 Providers 是包含存储的组件，并在组件树下提供原子值。

const Root = () => (
  <Provider>
    <App />
  </Provider>
)

原子

表示 Jotai 状态的对象。
它可以保存数字、字符串、数组和对象等各种值。

import { atom } from 'jotai'

const priceAtom = atom(100)
const messageAtom = atom('hello world')
const productAtom = atom({ id: 12, name: 'taro' })

使用原子

您可以读取 atom 的值。
useAtom 函数的工作方式类似于 React 的 useState。

const [ value , updateValue ] = useAtom ( anAtom )

? 我做到了

杰克·哈灵顿介绍 Jotai || React 状态管理器教程 - YouTube参考时按邮政编码搜索地址

完整图像

准备

要搜索的邮政编码数据日本邮政我想从
您可以从日本邮政网站下载 CSV 数据，然后将其转换为 JSON。这次https://csvjson.com/さんを利用させていただきました。
准备好 JSON 格式的邮政编码数据后要旨我给你

JSON 数据具有以下格式。
另外，这次由于数据容量的原因，只使用了东京的地址。


[
{"zipcode":"1000000","prefecture":"東京都","city":"千代田区","town":"以下に掲載がない場合"},
{"zipcode":"1020072","prefecture":"東京都","city":"千代田区","town":"飯田橋"},
{"zipcode":"1020082","prefecture":"東京都","city":"千代田区","town":"一番町"},
{"zipcode":"1010032","prefecture":"東京都","city":"千代田区","town":"岩本町"},
{"zipcode":"1010047","prefecture":"東京都","city":"千代田区","town":"内神田"},
{"zipcode":"1000011","prefecture":"東京都","city":"千代田区","town":"内幸町"},
...
]

让我们立即使用create-react-app 创建一个 React 项目！

npx create-react-app hello-jotai

创建提供者

应用程序.js

import React from "react";
import { Provider } from "jotai";

import "./App.css";


function App() {
  ...
}

export default () => (
  <Provider>
    <App />
  </Provider>
);

创建原子

接下来，我们将创建一个原子。
这一次，我们将创建一个表示输入值的原子，一个获取 JSON 数据的原子，以及一个在 JSON 数据中有输入值时返回值的原子。

const URL = "https://gist.githubusercontent.com/55enokky/8d38751807d84af2f544b9442b6cbd22/raw/9f8353906d11c6edbf951177f47a23978b06b9cf/address-tokyo.json";

// URLからデータをfetchする
const addressAtom = atom(async () =>
  fetch(URL + `?ts=${new Date().getTime()}`).then((resp) => resp.json())
);

// inputに入力された値を保持する
const filterAtom = atom("");

// jsonに入力された値が含まれる場合にデータを返す
const filteredAddressAtom = atom((get) =>
  get(addressAtom).filter((p) =>
    p.zipcode.startsWith(get(filterAtom))
  )
);

创建表单和表格

现在我们已经完成了数据获取部分，让我们创建输入表单的数据排序部分的显示。

应用程序.js

import React from "react";
import { Provider, atom, useAtom } from "jotai";


const FilterInput = () => {
  const [filter, filterSet] = useAtom(filterAtom);

  return (
    <input value={filter} onChange={(evt) => filterSet(evt.target.value)} />
  );
}

const AddressTable = () => {
  const [filtered] = useAtom(filteredAddressAtom);
  return (
    <table width="100%">
      <tbody>
        {filtered.map((p, index) => (
          <tr key={index}>
            <td>{p.zipcode}</td>
            <td>{`${p.prefecture} ${p.city} ${p.town}`}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

const App = () => {
  return (
    <div className="App">
      <FilterInput />
      <AddressTable />
    </div>
  );
}

?完成！！

我这次创建的代码是这里是。
* 本来组件和原子是分文件的，这次为了简单起见一起写在App.js。

应用程序.js

import React from "react";
import { Provider, atom, useAtom } from "jotai";

import "./App.css";

const URL = "https://gist.githubusercontent.com/55enokky/8d38751807d84af2f544b9442b6cbd22/raw/9f8353906d11c6edbf951177f47a23978b06b9cf/address-tokyo.json";

// URLからデータをfetchする
const addressAtom = atom(async () =>
  fetch(URL + `?ts=${new Date().getTime()}`).then((resp) => resp.json())
);

// inputに入力された値を保持する
const filterAtom = atom("");

// jsonに入力された値が含まれる場合にデータを返す
const filteredAddressAtom = atom((get) =>
  get(addressAtom).filter((p) =>
    p.zipcode.startsWith(get(filterAtom))
  )
);
const FilterInput = () => {
  const [filter, filterSet] = useAtom(filterAtom);

  return (
    <input value={filter} onChange={(evt) => filterSet(evt.target.value)} />
  );
}

const AddressTable = () => {
  const [filtered] = useAtom(filteredAddressAtom);
  return (
    <table width="100%">
      <tbody>
        {filtered.map((p, index) => (
          <tr key={index}>
            <td>{p.zipcode}</td>
            <td>{`${p.prefecture} ${p.city} ${p.town}`}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

const App = () => {
  return (
    <div className="App">
      <FilterInput />
      <AddressTable />
    </div>
  );
}

export default () => (
  <Provider>
    <React.Suspense fallback={<div>Loading</div>}>
      <App />
    </React.Suspense>
  </Provider>
);

?️‍♂️总结

这太容易了！！
如果你熟悉 Recoil 的话，写法也差不多，所以我想你可以马上使用。
不过它比 Recoil 轻一些，但对于使用 Recoil 的人来说，转用 Jotai 可能还不够。这就是我的印象。
如果您对选择 React 状态管理库犹豫不决，为什么不将其视为新选项之一呢？

参考网站

React 状态管理库 Jotai 和 Jotai Friends - Qiita
如何开始使用 React 状态管理库 Jotai #JotaiFriends
[Next.js / React] 使用 URL [Recoil / Jotai] 的查询参数指定状态 - Qiita
Jotai: State?! 用于 React 的状态管理库，日文名称 - Qiita
Infometis Co., Ltd. React Native应用开发中引入Jotai的第一印象-Qiita
使用 React 状态管理库“Jotai”的 Provider-less 模式轻松编码 - Qiita
Jotai，React 的原始和灵活的状态管理
Jotai vs. Recoil：有什么区别？ - LogRocket Blog
React 状态管理库 Jotai #JotaiFriends 的核心 API
React 的状态管理：Jotai 从初学者到大师-YouTube
介绍 Jotai || React 状态管理器教程 - YouTube
Jotai 是什么？-YouTube
Jotai 教程 - 比 Recoil 更好？ - YouTube

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308622432.html

? Jotai 是什么？

?如何使用

提供者

原子

使用原子

? 我做到了

完整图像

准备

创建提供者

创建原子

创建表单和表格

?完成！ ！

?️‍♂️总结

参考网站

?完成！！