导出 React Hooks 来管理全局状态是错误的吗？

Question

我正在导出我在项目的根组件中使用的 Hook 的 return。那么其他组件导入globalState和setGlobalState()就变得非常容易了。

我在这里做了几次测试，效果很好。问题是我还没有看到社区中有人以同样的方式使用它。

import React, { useState } from "react";

import Level2 from "./components/Level2";

export let setGlobalState = () => {};
export let globalState = {};

const initalState = { counter: 0 };

const App = () => {
  [globalState, setGlobalState] = useState(initalState);
  return (
    <>
      <Level2 />
    </>
  );
};

export default App;

以这种方式管理全局状态是错误的吗？如果是，为什么？

这里我有一个包含整个项目的存储库： https://github.com/andregardi/global-state-with-hooks

Answer 1

全局定义状态然后改变它们不是很正确，因为同一组件的多个实例可能需要有自己的状态而不是共享它。如果您全局定义状态，则所有状态都将共享相同的状态，这将导致不一致

演示

const { useState } = React;
let initialState = 0;
let globalState;
let setGlobalState;

function Counter () {
   [globalState, setGlobalState] = useState(initialState);
   return (
      <div>
         <div>Count: {globalState}</div>
         <button onClick={() => setGlobalState(count => count + 1)}>Increment</button>
      </div>
   )
}

function App() {
   return (
      <div>
        <div>
          <div>Counter 1: </div>
          <Counter />
        </div>
        <div>
          <div>Counter 2: </div>
          <Counter />
        </div>
      </div>
   )
}


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 2

此方法在更新方面存在一些问题。只有 App 组件的子组件可以对全局状态变化做出反应。如果树中的某些内容阻止了更新（PureComponent、React.memo 等）

，这些子项可能仍然不会被重新渲染

另外 setGlobalState 可能会被某些模块重新定义。

检查此 example 以观察问题。所有组件都将更新全局状态，但 "broken" 不会对更新做出反应，因为它的道具不会改变。

导出 React Hooks 来管理全局状态是错误的吗？

Is it wrong export React Hooks to manage global state?

reactjs

react-hooks