2023-React生态相关技术选型 · 奇趣生活实验室 | 奇趣生活实验室

2023-React生态相关技术选型 · 奇趣生活实验室 | 奇趣生活实验室

状态管理

Jotai

Jotai 旨在为 React 应用提供一种原子性的状态管理方式，使得开发者可以更容易地管理和更新应用的状态。

特点

简单性: Jotai 的 API 是直观的，不需要多余的配置或“胶水代码”。
灵活性: 由于其原子性质，你可以轻松地将状态划分为多个独立的单元。
与 React 良好的集成: 使用 hooks，Jotai 与现代 React 代码完美融合。

代码示例

定义一个原子状态

ts

使用该原子状态:

tsx

动画库

当涉及到在 React 中创建动画时，以下是一些受欢迎的库：

react-transition-group: 提供了基本的状态过渡动画能力，适合那些需要简单过渡效果的场景。
framer-motion: 是一个更高级的动画库，允许创建复杂的交互式动画。其 API 也相对简单，初学者也能快速上手。
react-spring: 基于物理原理的动画库，特别适合创建自然和流畅的动画效果。

附录

2022 年的 React 生态

import { useAtom } from 'jotai';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>Increment</button>
    </div>
  );
}