时间戳

首页 > 解决方案 > 使用 React Hooks 的 useContext

reactjs - 使用 React Hooks 的 useContext

问题描述

我正在关注 YouTube 上关于 useContext 的（视频）教程

从遗留道具流切换到这个，我有点困惑 ProviderWrapper 中的孩子是什么以及为什么需要传入它。

如果 children 是 SomeComponent2，为什么 someObj 不用useContext 就不用自己作为道具出现？因为它是 ProviderWrapper 的包装器，它通过它的值传递它？

const SomeContext = createContext()

function ProviderWrapper ({children}) {
    const someObj = { 'something': 'someValue' }
    return <SomeContext.Provider value={{ someObj }}>{children}</SomeContext.Provider> 
}

const SomeComponent2 = (props) => {
    console.log('props', props)
    const PropsFromProvider = useContext(SomeContext)
    console.log('PropsFromProvider', PropsFromProvider)
    return null
}

function App() {
    return (
        <ProviderWrapper>
            <SomeComponent2 />
        </ProviderWrapper>
    );
}

标签： reactjsreact-hooks

解决方案

从遗留道具流切换到这个，我有点困惑 ProviderWrapper 中的孩子是什么以及为什么需要传入它。

children是您在<ProviderWrapper> ...children... </ProviderWrapper>. 所以在这个例子中，是的，它是<SomeComponent2 />.

如果 children 是 SomeComponent2，为什么 someObj 不用useContext 就不用自己作为道具出现？因为它是 ProviderWrapper 的包装器，它通过它的值传递它？

它可以 - 你可以只渲染<SomeComponent2 something={somevalue} />. 那将是通常的做法。

然而，本教程试图演示的是 Context 如何允许您从父组件访问值，而无需通过 props 传递它们。在这个例子中，这是微不足道的，但是想象一下如果“somevalue”在更高的层次上，并且每个组件都在不同的文件中渲染另一个组件。您必须将值一直向下传递到许多组件，并将something道具添加到每个组件。这称为“prop-passing”或“prop-drilling”，它意味着添加组件不需要的 props，只是为了将它们传递给最终需要它们的组件。

使用 Context，您只需在更高的某个方便的位置渲染一个 Provider，并且树中任何位于它下面的组件，在任何深度，都可以使用它的值。这对于定义主题（例如“浅色”或“深色”）这样的事情很有用，这样组件就可以适当地呈现自己，而无需添加“主题”作为道具并将其一直向下传递。

推荐阅读