javascript - 使用 Hooks 编辑 React 状态

Question

我想要一个全局变量，我可以使用钩子(Hook)在任何地方编辑它。

在示例中，我有 2 个组件都使用相同的钩子(Hook)。在我看来，External toggle 正在编辑它自己的作用域 count 并且 Internal Toggle 也在改变它自己的作用域。

是否可以让两个开关编辑相同的数据？

代码示例: https://codesandbox.io/s/520zvyjwlp

索引.js

function ChangeCount() {
  const { count, increment } = useCounter();
  return <button onClick={() => increment(!count)}>External Toggle</button>;
}

function App() {
  const { count, increment } = useCounter();
  return (
    <div>
      {`${count}`}
      <br />
      <ChangeCount />
      <br />
      <button onClick={() => increment(!count)}>Internal Toggle</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement); 

使用计数.js

import { useState } from "react";
export default function useCounter() {
  const [count, setCount] = useState(false);
  const increment = (changeCount) => setCount(changeCount);
  return { count, increment };
}

Answer 1

正如您所注意到的，自定义 Hook 用于共享状态逻辑，而不是实际的状态。

如果你想分享一个状态，你可以使用 context特征并将对象中的 count 变量和 increment 函数传递给 Provider 的 value 属性并使用它使用 useContext 在树中向下移动。

示例

const { createContext, useContext, useState } = React;
const CounterContext = createContext();

function ChangeCount() {
  const { increment } = useContext(CounterContext);
  return <button onClick={increment}>External increment</button>;
}

function App() {
  const [count, setCount] = useState(0);
  function increment() {
    setCount(count + 1);
  }

  return (
    <CounterContext.Provider value={{ count, increment }}>
      <div>{count}</div>
      <ChangeCount />
      <button onClick={increment}>Internal increment</button>
    </CounterContext.Provider>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>