reactjs - React Hooks - useState 用于全局状态管理

Question

我知道现在有 Context API 应该用于全局应用程序状态管理。

但我想知道，使用 useState 管理应用程序的全局状态并传递给这样的道具有什么问题（或不是最佳的）吗？

//App.js

function App() {

  const [counterA, setCounterA] =  useState(0);
  const [counterB, setCounterB] =  useState(0);

  let masterStates = {
    counterA: counterA,
    counterB: counterB,
  }

  let masterFunctions = {
    setCounterA: setCounterA,
    setCounterB: setCounterB,
  }


  return (
    <div>
      ...
      <ChildComponent masterStates={masterStates} masterFunctions={masterFunctions} />
      ...
    </div>
  )
  
}

然后在我的 ChildComponent 中，我可以轻松地访问状态并像这样更新它：

//ChildComponent.js

function ChildComponent(props) {

  useEffect(() => {
    console.log("This will successfully log when counterA changes: ", props.masterStates.counterA);
  }, [props.masterStates.counterA]);

  return(
    <button onClick={() => props.masterFunctions.setCounterA(a => a + 1)}>
      {props.masterStates.counterA}
    </button>
  )

}