jotai 轻量级react状态管理工具

大家好，我正在参加「掘金·启航计划」

[jotai](github.com/pmndrs/jota… 主要api: atom,useAtom 实践：

• 快速创建一个react 项目（使用的js模板）

 npx create-react-app jotai-demo
//安装Jotai
 npm install jotai

App.js

import "./App.css";
//引入jotai
import { atom, useAtom } from "jotai";

//管理数据，管理的数据可以是基础类型或者是引用类型
const counterAtom = atom(0);
//可以使用jotai从一个原子的值中计算数据。
const doubleAtom = atom((get) => get(counterAtom) * 2);
function Counter1() {
  const [count, setCount] = useAtom(counterAtom);
  const [doubleCounter] = useAtom(doubleAtom);
  return (
    <div>
      <h3>当前值：{count}</h3>
      <h3>double：{doubleCounter}</h3>
      <button onClick={() => setCount((v) => v + 1)}>加 1</button>
    </div>
  );
}

function Counter2() {
  const [count, setCount] = useAtom(counterAtom);
  return (
    <div>
      <h3>当前值：{count}</h3>
      {/* <h3>double：{doubleCount}</h3> */}
      <button onClick={() => setCount((v) => v + 1)}>加 1</button>
    </div>
  );
}
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Counter1></Counter1>
        <Counter2></Counter2>
      </header>
    </div>
  );
}

export default App;

掘金上这边文章举例很好的说明了使用useState+context带来的问题 [jotai和usestate对比](juejin.cn/post/702697…) 针对上述例子和引用链接里面的例子：

我的理解，由于A B组件都使用了context传递过来的值，因此当context变化时会重新渲染所有依赖的组件。 使用jotai可以避免类似的问题，因为jotai使用是在每个用在用到的组件中的，因此只有用到的组件才会重新渲染。

例如：我的两个组件中引入了counterAtom自然每次更新的时候两个组件都会同步进行更新值。

理解原子： 原子是全局性的状态片段，可以被任何组件访问和修改。