您应该如何精确地使用useContext?

问题描述 投票:0回答:1

我熟悉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,而应该将它们包装在处理程序中。我到底应该怎么做,这样做有什么好处?

reactjs
1个回答
0
投票

您的ChildComponent应该看起来像这样:

const ChildComponent = () => {
    const { playerStatus, setPlayerStatus } = usePlayerStatus();

    return (
        // remaining code
    );
}

如果您通过上下文传递值和回调,则无需作为道具传递。另外,如果您想显式地传递它们,则可以返回

<ChildComponent
    playerStatus={playerStatus}
    setPlayerStatus={setPlayerStatus}
/>

在您父母的身边,但是您不需要上下文。

© www.soinside.com 2019 - 2024. All rights reserved.