出口React Hooks管理全球状态是错误的吗？

Question

我正在导出我在项目的根组件中使用的Hook的返回。然后，其他组件很容易导入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

这种方法存在一些更新问题。只有App组件的子项才能对全局状态变化做出反应。如果树中的某些东西阻止更新（PureComponent，React.memo等），那些孩子仍然可能不会被重新渲染

setGlobalState也可能被某些模块重新定义。

检查这个example以观察问题。所有组件都将更新全局状态，但“已损坏”的组件将不会对更新做出反应，因为其道具不会更改。

Answer 2

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

DEMO

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"/>