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

Question

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

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

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

}

Answer 1

感谢所有有见地的评论！这真的帮我理清了问题。

我以前不熟悉“螺旋钻”这个词，但现在它很有意义。

我在这里留下一些有用的链接，供任何想了解更多信息的人使用：

https://kentcdodds.com/blog/prop-drilling

https://www.geeksforgeeks.org/what-is-prop-drilling-and-how-to-avoid-it/

https://medium.com/analytics-vidhya/props-drilling-in-react-js-934120a4906b

编辑： 我刚在这里找到这篇文章，他描述了一种像我这样的方法并列出了它的一些好处。

https://dev.to/bytebodger/rethinking-prop-drilling-state-management-in-react-1h61

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

React Hooks - useState for global state management

global-state

reactjs

react-redux

react-hooks