113.jotai

jotai，react状态管理工具，比redux有更小的体积，更少的api，使用简单。
实践：

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

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

使用App.js

 import logo from "./logo.svg";
import "./App.css";
import { atom, useAtom } from "jotai";

const counterAtom = atom(0);
//创建二次依赖
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对比
理解原子式：
我的理解，由于A B组件都使用了context传递过来的值，因此当context变化时会重新渲染所有依赖的组件。
使用jotai可以避免类似的问题，因为jotai使用是在每个用在用到的组件中的，因此只有用到的组件才会重新渲染。