React Hooks-使用state进行全局状态管理

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

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