我熟悉Redux,但是我很难理解useContext的概念。
我有以下代码;
export default () => {
const PlayerStatusContext = React.createContext(null);
const [playerStatus, setPlayerStatus] = useState({
playerHealth: 5,
playerCoins: 0,
playerMoves: 0,
currentLevel: 1,
});
const usePlayerStatus = () => useContext(PlayerStatusContext);
return (
<PlayerStatusContext.Provider value={ playerStatus, setPlayerStatus } >
<ChildComponent />
</PlayerStatusContext.Provider>
)
}
并且在childComponent中;
export default ({playerStatus, setPlayerStatus}) => {
return (
<Wrapper>
<button onClick={() => {
console.log(playerStatus)
}}>Log status</button>
<button onClick={() => {
setPlayerStatus({
playerHealth: 6,
playerCoins: 1,
playerMoves: 1,
currentLevel: 2,
})
}}>Update Test</button>
</Wrapper>
)
}
现在,有人告诉我,我不应该直接传递playerStatus和setPlayerStatus,而应该将它们包装在处理程序中。我到底应该怎么做,这样做有什么好处?
您的ChildComponent
应该看起来像这样:
const ChildComponent = () => {
const { playerStatus, setPlayerStatus } = usePlayerStatus();
return (
// remaining code
);
}
如果您通过上下文传递值和回调,则无需作为道具传递。另外,如果您想显式地传递它们,则可以返回
<ChildComponent
playerStatus={playerStatus}
setPlayerStatus={setPlayerStatus}
/>
在您父母的身边,但是您不需要上下文。