ReactJS 设计模式 ~Context Selector~

Source: Dev.to

上下文选择器模式

• Context 模式使用 useContextSelector（而非 useContext）来跟踪特定状态片段。当其他状态片段变化时，它可以防止不必要的重新渲染。

示例实现

import { useState, useEffect } from "react";
import {
  createContext,
  useContext,
  useContextSelector,
} from "use-context-selector";

const AppContext = createContext();

function NameComponent() {
  const name = useContextSelector(AppContext, (state) => state.name);

  useEffect(() => {
    console.log("NameComponent rendered");
  });

  return (
    <>Name: {name}</>
  );
}

function CountComponent() {
  const count = useContextSelector(AppContext, (state) => state.count);

  useEffect(() => {
    console.log("CountComponent rendered");
  });

  return (
    <>Count: {count}</>
  );
}

function AppProvider({ children }) {
  const [name, setName] = useState("John");
  const [count, setCount] = useState(0);

  return (
    <AppContext.Provider value={{ name, count, setName, setCount }}>
      <button onClick={() => setName(name === "John" ? "Jane" : "John")}>
        Change Name
      </button>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      {children}
    </AppContext.Provider>
  );
}

function App() {
  return (
    <AppProvider>
      <NameComponent />
      <CountComponent />
    </AppProvider>
  );
}

export default App;