Zustand 相关

import React from "react";
import create from "zustand";

const useStore = create((set) => ({
  count: 1,
  number: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
  setNumber: () => set((state) => ({ number: state.number + 1 }))
}));

function CounterTwo() {
  const { setNumber } = useStore((state) => state);
  const number = useStore((state) => state.number);
  return (
    <div className="counter2">
      <span>{number}</span>
      <button onClick={setNumber}>Counter2 add</button>
    </div>
  );
}
function Counter() {
   // 用state.xxx这样的方式，只有当指定的xxx发生变化的时候，才会重新渲染
  // const inc = useStore((state) => state.inc);
  // const count = useStore((state) => state.count);
  // 如果用解构的方式，当store中任意一个值发生改变，都会触发重新渲染
  const { inc, count } = useStore();

  console.log("333333");
  return (
    <div className="counter">
      <span>{count}</span>
      <button onClick={inc}>Counter 1 add</button>
    </div>
  );
}

export default function App() {
  return (
    <div className="main">
      <div className="code">
        <div className="code-container">
          <Counter />
          <CounterTwo />
        </div>
      </div>
      
    </div>
  );
}