index.js

Question

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

在示例中，我有2个组件都使用相同的钩子。在我看来，External toggle正在编辑自己的范围count，而Internal Toggle也正在更改自己的范围。

是否有可能两个开关都编辑相同的数据？

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

index.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);

useCount.js

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

Answer 1

您已经注意到，自定义钩子用于共享状态逻辑，而不是实际的状态。

如果要共享状态，可以使用context功能并将对象中的increment变量和value函数传递给Provider道具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>

{{1}}

Answer 2

要完成此任务，您应该通过上下文API共享状态，

请考虑以下内容：

const CounterContext = React.createContext({
  count: 0,
  increment: () => null,
});

const changeCount = () => {
  const counter = useContext(CounterContext);

  return <button onClick={() => counter.increment(!counter.count)}>External Toggle</button>;
}

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

有关更多信息，请访问：https://reactjs.org/docs/context.html

使用挂钩编辑React状态

index.js

useCount.js

2 个答案: