--- theme: fancy highlight: a11y-dark --- ## 前言目前，前端流行的状态管理有很多，Redux、Mobx、Mobx-lite、Recoil、jotai、xstate等等，根据多年开发经验，没有所谓的最好，重要的是要适合自己的项目和团队风格，本文主要简述jotai的基本用法和工程实践 ## 前端数据状态库简介 ### Redux 这个就不用多述了，**老Store了** - 中心化、组件外状态库，使用复杂，反正个人十分不喜欢，有点闹挺儿～ - Redux的作者在加入Reack团队后，在发布React17版本时，把Redux这一套直接融进了React中了，增加了 useReducer，Provider + inject模式，会造成 provider 嵌套地狱，因此用的人不多 ### Mobx 个人非常喜欢的半中心化，组件外状态库 - 由 Class Componets(装饰器写法) 过度到 Function Component（hooks用法），个人经历了很多大型项目落地，已验证其可靠性，使用简单方便，几乎无上手成本，团队接受度高 - 有兴趣可以阅读: - [react hooks + mobx usage of summary](https://juejin.cn/post/6921320490409836551) - [Mobx vs Recoil application](https://juejin.cn/post/6921535150475968520) - 它去掉了Redux的miiddleware、dispatch等操作，使用更加简洁 ### Mobx-lite API变更太频繁，废了，而且也没感觉比mobx好在哪，只能说是在mobx没出hooks版本之前的过渡替代品吧（仅代表个人见解） ### recoil 原子化、组件内状态，但是api较多，它通过将原子状态进行派生、组合成新的状态(类似**vue的computed**)，上手成本有点高 - 所谓组件内状态，其实就是内部使用了useState，state变化，触发更新渲染罢了 - 有兴趣可以阅读[手动实现Recoil原理](https://juejin.cn/post/7230335974085492773) ### jotai 原子化、组件内状态库，api不多，可以理解为recoil的简约版 ## jotai 使用 ### atom、派生、useAtom ```ts import { FC } from 'react'; import { atom, useAtom } from 'jotai'; const valueAtom = atom(0); // 派生1 const doubleCount = atom(get => get(valueAtom) * 2); // 派生2：组合atom const count1 = atom(1); const count2 = atom(2); const sumAtom = atom(get => get(count1) + get(count2)); // 派生3：组合atom const atoms = [count1, count2]; const sumAtom2 = atom(get => atoms.map(get).reduce((acc, count) => acc + count)); const Text = () => { const [value] = useAtom(valueAtom); const [dobueValue] = useAtom(doubleCount); const [sum] = useAtom(sumAtom); const [sum2] = useAtom(sumAtom2); return (

{value}

{dobueValue}

{sum}

{sum2}

); }; const Button = () => { const [, setValue] = useAtom(valueAtom); const add = () => setValue(prev => prev + 1); const dec = () => setValue(prev => prev - 1); const reset = () => setValue(0); return (

); }; const Demo1: FC = () => { return ( <> ); }; ``` ### async action - 定一个dataAtom，用于接收异步任务返回的值 - 通过调用派生实现异步请求 ```ts import { FC } from 'react'; import { atom, useAtom } from 'jotai'; const getMockData = (): Promise => new Promise(resolve => setTimeout(() => resolve('random-' + Math.random()), 2000)); const dataAtom = atom(''); const fetchDataAtom = atom( get => get(dataAtom), async (_get, set, url) => { const data = await getMockData(); set(dataAtom, data); } ); const AsyncTest = () => { const [asyncData, getAsyncData] = useAtom(fetchDataAtom); return ( <>

Hi: {asyncData} ); }; ``` ### useAtomValue、useSetAtom - 如果有的组件只需要监听状态的变化值，而没有更新操作，请使用`useAtomValue` - 如果仅更新操作，而无需渲染状态的组件，请使用 `useSetAtom` - 这么做的目的：**防止无意义的渲染** 下面我们看一个例子 ```ts import { FC } from 'react'; import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'; const countAtom = atom(0); const A = () => { const [, setCount] = useAtom(countAtom); console.log('组件A渲染'); return (

); }; const B = () => { const [count] = useAtom(countAtom); console.log('组件B渲染'); return (

组件B：{count}

); }; const Demo1: FC = () => { return ( <> ); }; ``` 当我们点击add时，发现A和B都重新渲染了，但是问题来了，A为什么要重新渲染呀，A只是触发了更新操作，并不需要重新渲染呀？？？ - 这是因为，如果使用useAtom，即使你不引入它的value值，但它由useAtomValue包裹，当更新时，useAtomValue会触发订阅事件，从而触发渲染，如果不理解可以阅读 [Recoil原理](https://juejin.cn/post/7230335974085492773) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/913d1c3912b84673bab3d37f154ff163~tplv-k3u1fbpfcp-watermark.image?) - 解决办法 - 我们将A组件中的useAtom 替换成 useSetAtom，B组件的useAtom替换成useAtomValue - 同时，代码语意更好 ```ts // A组件 // const [, setCount] = useAtom(countAtom); const setCount = useSetAtom(countAtom); // B组件 // const [count] = useAtom(countAtom); const count = useAtomValue(countAtom); ``` 修改后，发现点击add时，A组件不会重新渲染了 It's wonderful! ### Provider - 正常情况下，无需用Provider包裹组件 - 但如果需要控制某些组件的状态不发生更新，可以用Provider包裹 - 或者说，用Provider包裹的组件，状态是独立的，不受外部影响，同时也不影响外部，即使大家共用同一个atom状态 **例1** ```js import { Provider, atom, useAtom, useAtomValue } from 'jotai'; const textAtom = atom('hello'); const textLenAtom = atom(get => get(textAtom).length); const uppercaseAtom = atom(get => get(textAtom).toUpperCase()); const Input = () => { const [text, setText] = useAtom(textAtom); return setText(e.target.value)} />; }; const CharCount = () => { const len = useAtomValue(textLenAtom); return
Length: {len}
; }; const Uppercase = () => { const upper = useAtomValue(uppercaseAtom); return
Uppercase: {upper}
; }; export default () => ( <> ); ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c797a91d8504e04bb55a0ec197c06f2~tplv-k3u1fbpfcp-watermark.image?) 输入变化，Lengh 跟着变化，但是Uppercase没变化，因为 Provider包裹了Uppercase组件，它的状态是独立的，不受外部更新的影响，或者给Input与CharCount用Provider包裹，效果也是一样的 **例2** 在上面代码的基础上修改 ```ts export default () => ( <>

); ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/403e85acf0b5437f9d9ce9c151eeb721~tplv-k3u1fbpfcp-watermark.image?) 两份相同的组件用Provider包裹了，那么他们互不影响，各玩各的 - **应用** - 比如对比看板，一个看板作为初始观察，另一个看板做编辑更新，感觉跟抄作业似的 ### store 在实际开发中，我们会将那些atom放到Store文件夹内，export出去就可以了，这也没什么可说的了... **No No No, 它有大用** - createStore 创建一个空store - set、get ```ts // store.ts import { createStore, atom } from 'jotai'; const myStore = createStore(); export const countAtom = atom(0); export const statusAtom = atom(false); // 监听发生变化 myStore.sub(countAtom, () => { console.log('countAtom value is changed to', myStore.get(countAtom)); myStore.set(statusAtom, myStore.get(countAtom) % 2 !== 0); }); export default myStore; // App.ts import { getDefaultStore, useAtom, useAtomValue } from 'jotai'; import { countAtom, statusAtom } from './store'; export default () => { const [count, setCount] = useAtom(countAtom); const status = useAtomValue(statusAtom); return ( <>
Default Count: {getDefaultStore().get(countAtom)}

Count: {count}
); }; ``` 点击add，当count为奇数时，背景变色 **这不多此一举么？我们直接用派生的方式不就行了么？？？** 这么做的好处是，store通过监听某一个状态发生变化时，可以批量更新多个状态，而派生的话，就不方便了，举个例子 - 当 A 变化时，B、C跟着一起变化，那么B和C都要写派生，但如果是10个，50个呢，写起来不麻烦，主要是，数据流就不太清晰了，维护起来有些分散，维护成本高 ## jotai-immer 如果不了解immer，可以阅读[React渲染优化之useImmer](https://juejin.cn/post/7230026709481865253) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d0993db6ca34a86afd03279cc94a7f4~tplv-k3u1fbpfcp-watermark.image?) ## jotai-signal - 最小粒度的局部渲染 - 比如：一个组件中，当状态更新时，我只想让某一行，重新渲染，而不是整个组件都重新渲染，比如组件中有两个div，div1和div2，我只想让div1重新渲染，而div2不重新渲染，这能做到么？答案是肯定的，jotai-signal 做到了，直接上代码，看效果 - 注意：使用 signal，注意在文件顶部，写上`/** @jsxImportSource jotai-signal */`，否则不生效 - 两种写法： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dae9f36389014fec8fe481f312b953f4~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/658b51d3851146c3aa6eefd1dc607b8c~tplv-k3u1fbpfcp-watermark.image?) - 看效果 ![屏幕录制2023-05-09 02.10.44 (1).gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4efe6f2a170943018042d6bd4a885cb1~tplv-k3u1fbpfcp-watermark.image?) 根据效果，我们可以看到，身处在同一个组件内，点击 with atom 中按钮，页面会整体更新，而在with signal中，当点击时，只发生了局部更新，只有用signal包裹的状态才发生更新。 That's amazing。Just Wonderful！ ## 总结在实际项目开发中，使用jotai + jotai-immer + jotai-signal，将会带来美妙的开发体验和性能飞起。Let‘s do it!