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

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

演示

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以观察该问题。所有组件都会更新全局状态，但是“损坏”的组件不会对更新做出反应，因为其道具不会更改。

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

2 个答案: