Jotai v2: React状态管理的新篇章

Jotai v2: React状态管理的新篇章
Photo by Clay Banks / Unsplash

Jotai是一个为React应用设计的轻量级状态管理库。2023年3月,Jotai发布了v2.0版本,带来了许多新特性和改进。本文将深入探讨Jotai v2的使用方法、适用场景、设计理念、源码结构以及核心功能的实现原理。

版本信息

本文讨论的是Jotai v2.0.3版本,发布于2023年5月。你可以通过以下命令安装

npm install [email protected]

基本使用

Jotai的核心概念是"atom"。atom是最小的状态单位,可以存储任何JavaScript值。让我们看一个简单的例子:

import { atom, useAtom } from 'jotai'

// 创建一个atom
const countAtom = atom(0)

function Counter() {
  // 使用atom
  const [count, setCount] = useAtom(countAtom)
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  )
}

在这个例子中,我们创建了一个初始值为0的countAtom,然后在Counter组件中使用useAtom hook来读取和更新这个atom的值。

适用场景

Jotai特别适合以下场景:

  1. 需要共享状态的小型到中型React应用
  2. 希望避免React Context的过度使用导致的重渲染问题
  3. 需要细粒度控制状态更新的场景
  4. 处理异步状态和派生状态的应用

设计理念

Jotai的设计理念可以概括为以下几点:

  1. 原子化状态: 将状态分解为最小的可能单位。
  2. 简单性: API简洁,学习曲线平缓。
  3. 灵活性: 可以轻松处理同步和异步状态。
  4. 高性能: 通过细粒度更新减少不必要的重渲染。
  5. 类型安全: 完全支持TypeScript。

Jotai的源码结构非常清晰。让我们看一下主要的模块:

  1. core: 包含Jotai的核心功能,如atom的创建和基本操作。
  2. react: 提供React相关的hooks和组件。
  3. utils: 包含各种工具函数和高级特性。
  4. vanilla: 提供非React环境下使用Jotai的能力。

让我们用一个图表来展示这些模块之间的关系:

这个图表展示了Jotai的主要模块及其之间的依赖关系。可以看到,core模块是其他所有模块的基础。

模块交互

Jotai的模块之间通过清晰的接口进行交互。让我们看一个例子,展示core模块和react模块是如何协同工作的:

// core/atom.ts
export function atom<Value>(initialValue: Value) {
  // ... atom implementation
}

// react/useAtom.ts
import { atom } from '../core/atom'

export function useAtom<Value>(anAtom: Atom<Value>) {
  // ... useAtom implementation using the core atom
}

在这个例子中,react模块中的useAtom hook依赖于core模块中定义的atom函数。这种模块化的设计使得Jotai可以在不同环境中灵活使用,同时保持核心逻辑的一致性。

关键功能流程解析

让我们深入分析Jotai的一个核心功能:atom的创建和更新流程。

  1. 创建atom:
// 简化版的atom创建函数
function atom<Value>(initialValue: Value) {
  const config = {
    init: initialValue,
    read: (get: Getter) => get(config),
    write: (get: Getter, set: Setter, update: Value | ((prev: Value) => Value)) => {
      const nextValue = typeof update === 'function' ? (update as Function)(get(config)) : update
      set(config, nextValue)
    }
  }
  return config
}
  1. 使用atom:
function useAtom(atom) {
  const [value, setValue] = useState(() => atom.init)
  
  useEffect(() => {
    // 订阅atom的变化
    const unsubscribe = subscribe(atom, () => {
      setValue(atom.read(get))
    })
    return unsubscribe
  }, [atom])
  
  const updateAtom = useCallback((update) => {
    atom.write(get, set, update)
  }, [atom])
  
  return [value, updateAtom]
}

这个简化的实现展示了Jotai如何管理atom的状态和更新。实际的Jotai实现要复杂得多,包括了性能优化、依赖追踪等高级特性。

让我们用一个流程图来展示atom的更新过程:

这个流程图展示了当组件调用setValue函数时,Jotai内部是如何处理状态更新并触发重新渲染的。

UTILITIES

Jotai提供了一系列实用工具,大大扩展了其功能和灵活性。这些工具位于UTILITIES模块中,包括:

  1. Storage: 用于持久化存储状态,可以与localStorage或sessionStorage集成。
import { atomWithStorage } from 'jotai/utils'
const persistedAtom = atomWithStorage('my-key', initialValue)
  1. SSR: 为服务器端渲染提供支持,确保状态在服务器和客户端之间的一致性。
import { Provider } from 'jotai/react'
import { hydrateAtoms } from 'jotai/utils'

const hydratedAtoms = hydrateAtoms([[myAtom, initialValue]])

function App() {
  return (
    <Provider initialValues={hydratedAtoms}>
      {/* Your app components */}
    </Provider>
  )
}
  1. Async: 处理异步状态,支持Promise和异步函数。
import { atom } from 'jotai'

const asyncAtom = atom(async (get) => {
  const response = await fetch('https://api.example.com/data')
  return response.json()
})
  1. Lazy: 允许延迟初始化状态,优化性能。
import { atom } from 'jotai'

const lazyAtom = atom(
  () => expensiveComputation(),
  (get, set, newValue) => {
    set(lazyAtom, newValue)
  }
)
  1. Resettable: 创建可以重置到初始状态的atom。
import { atomWithReset } from 'jotai/utils'

const resettableAtom = atomWithReset(initialValue)
  1. Family: 创建一组相关的atom,适用于处理列表或集合。
import { atomFamily } from 'jotai/utils'

const todoAtomFamily = atomFamily(
  (id) => atom({ id, text: '', completed: false })
)
  1. Callback: 优化回调函数,避免不必要的重渲染。
import { useAtomCallback } from 'jotai/utils'

const callback = useAtomCallback(useCallback((get) => {
  return get(myAtom)
}, []))
  1. Reducer: 提供类似Redux的reducer模式来更新状态。
import { atomWithReducer } from 'jotai/utils'

const counterAtom = atomWithReducer(0, (prev, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return prev + 1
    case 'DECREMENT':
      return prev - 1
    default:
      return prev
  }
})
  1. Select: 允许组件只订阅状态的一部分,优化性能。
import { selectAtom } from 'jotai/utils'

const namesAtom = selectAtom(
  usersAtom,
  (users) => users.map((u) => u.name)
)
  1. Split: 将一个atom拆分成多个相关的atom。
import { splitAtom } from 'jotai/utils'

const originalAtom = atom([1, 2, 3])
const splittedAtoms = splitAtom(originalAtom)

这些工具极大地增强了Jotai的功能,使其能够处理各种复杂的状态管理场景。开发者可以根据具体需求选择合适的工具,以实现更高效和灵活的状态管理。

结论

Jotai v2为React应用提供了一个强大而灵活的状态管理解决方案。通过其简洁的API、高效的实现以及丰富的工具集,Jotai能够轻松处理从简单到复杂的各种状态管理需求,同时保持良好的性能和开发体验。

Read more

ngrok本地调试原理及Telegram mini app cookie path 问题

ngrok本地调试原理及Telegram mini app cookie path 问题

在现代web开发中,本地调试是一个非常重要的环节。然而,当我们需要将本地开发的应用暴露到公网以便进行测试时,就会遇到一些挑战。本文将详细介绍如何使用ngrok实现内网穿透进行本地调试,特别是在Telegram小程序开发场景中的应用,以及可能遇到的常见问题及其解决方案。 ngrok原理 ngrok是一个反向代理工具,它可以将本地服务器安全地暴露到公网。下面是ngrok的工作原理: 1. 用户启动ngrok客户端,并指定要暴露的本地端口。 2. ngrok客户端与ngrok云服务建立安全的通道。 3. ngrok云服务生成一个公网可访问的URL。 4. 当外部请求到达这个URL时,ngrok云服务将请求通过安全通道转发到本地ngrok客户端。 5. 本地ngrok客户端将请求转发到指定的本地端口。 6. 本地服务器处理请求并返回响应,响应通过相同的路径返回给客户端。 Telegram小程序调试场景 在Telegram小程序开发中,我们经常需要使用ngrok来进行本地调试。以下是具体步骤: 1. 启动本地开发服务器(例如运行在localhost:3000)。

TypeScript:从架构分层设计到IOC和AOP

TypeScript:从架构分层设计到IOC和AOP

TypeScript作为JavaScript的超集,为开发者提供了强大的类型系统和面向对象编程能力。然而,要在大型项目中充分发挥TypeScript的优势,我们需要深入理解软件架构原则和设计模式。本文将探讨如何使用TypeScript构建一个健壮的应用架构,涵盖分层设计、常见设计模式、控制反转(IOC)和面向切面编程(AOP)等高级概念。 分层架构 分层架构是组织大型应用程序的常用方法。它有助于关注点分离,使得每一层都可以独立开发和测试。一个典型的分层架构包括: 1. 表现层(Presentation Layer) 2. 业务逻辑层(Business Logic Layer) 3. 数据访问层(Data Access Layer) 4. 数据库(Database) 让我们使用图表来可视化这个架构: 接下来,我们将探讨每一层中可能使用的设计模式,并通过TypeScript代码示例来说明如何实现这些模式。 表现层 表现层负责处理用户界面和用户交互。在这一层,我们经常使用MVC(Model-View-Controller)或MVVM(Model-View-ViewM