javascript - React 不会在自定义挂钩中的状态更新时重新渲染所有组件

Question

我创建了 2 个组件C1和C2一个custom hookuseCounter。

C1显示"count"的属性useCounter hook。

C2显示"count"属性并在按钮单击时增加或减少它。

Current behavior:更改时"count"，更新后的值仅显示在中C2而不显示在中C1。

Expected behavior:两个组件都应该re-render更新"count"。

如果我遗漏了什么，请告诉我。

PS:我已经使用Context APIand完成了此操作redux。只是想知道是否可以使用custom hooks:)来实现相同的行为

Codesandbox link: 自定义挂钩演示

import { useState } from "react";

function useCounter() {
  const [count, setCount] = useState(0);
  const updateCounter = newVal => {
    setCount(newVal);
  };

  //return [count, useCallback( (newVal) => setCount(newVal))];
  return [count, updateCounter];
}
export default useCounter;

标签： javascriptreactjsreact-hooks

Answer 1

您可能希望使用 Context API 来共享同一个实例，因为自定义挂钩useCounter将分配一个新的counton mount 实例：

export const CounterContext = React.createContext();

function App() {
  const counterController = useCounter();
  return (
    <CounterContext.Provider value={counterController}>
      <div className="App">
        <h1>App Component</h1>
        <hr />
        <C1 />
        <hr />
        <C2 />
      </div>
    </CounterContext.Provider>
  );
}

// Use context
function C1() {
  const [count] = useContext(CounterContext);
  return (
    <div>
      Component 1 <br />
      Count: {count}
    </div>
  );
}

---

此外，您可以使用如下库reusable：

const useCounter = createStore(() => {
  const [counter, setCounter] = useState(0);

  return {
    counter,
    increment: () => setCounter(prev => prev + 1)
  }
});

const Comp1 = () => {
  const something = useCounter();
}

const Comp2 = () => {
  const something = useCounter(); // same something
}