useContext с React Hooks - PullRequest
Новая
       5

useContext с React Hooks

0 голосов
/ 05 мая 2020
• 1000 передано.

Если дочерние элементы - это 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>
    );
}

Ответы [ 3 ]

0 голосов
/ 05 мая 2020

Из reactJS do c useContext получает значение из ближайшего поставщика контекста . Обычно они делают 

// You create a context
const SomeContext  = createContext();

// Then you wrap any component that need the value in it provider
<SomeContext.Provider value={{'something': 'someValue'}}>
    //Your component
</SomeContext.Provider>

// In any Your Component, You access the value by using useContext
function YourComponent() {
    const value = useContext(SomeContext);

    console.log(value); //You will get the Obj
    // It is not pass as Props
    ...
}

ProviderWrapper - это просто оболочка, поэтому вы можете обернуть любой компонент, который может получить доступ к SomeContext , поэтому вам не нужно продолжать писать 

<SomeContext.Provider value={{}}>
    //Your Component
</SomeContext.Provider>

Надеюсь, это имеет смысл, и ответьте на ваш вопрос. Поправьте меня, если я ошибаюсь

0 голосов
/ 09 июля 2020

Переключение с устаревшего потока props на это, я немного запутался в том, какие дочерние элементы находятся в ProviderWrapper и почему его нужно передать.

children is любой дочерний компонент, который вы визуализируете внутри <ProviderWrapper> ...children... </ProviderWrapper>. Итак, в примере, да, это <SomeComponent2 />.

Если дочерние элементы - это SomeComponent2, почему someObj не появляется как опора самостоятельно без использования useContext? поскольку это оболочка от ProviderWrapper, которая передает ему свое значение?

Может - вы можете просто отобразить <SomeComponent2 something={somevalue} />. Это было бы обычным делом.

Однако то, что в учебнике пытается продемонстрировать, - это то, как Context позволяет вам получать доступ к значениям из родительского компонента без необходимости передавать их через props. В этом примере это тривиально, но представьте, что «somevalue» было на много уровней выше, и каждый компонент отображал другой в другом файле. Вам нужно будет полностью пропустить значение через многие компоненты, добавляя к каждому из них свойство something. Это называется «передача опоры» или «бурение опор» и означает добавление опор, в которых компоненты не нуждаются, просто ради передачи их некоторому компоненту, который в конечном итоге в них нуждается.

С контекстом , вы просто визуализируете Provider в удобном месте наверху, и любой компонент под ним в дереве на любой глубине может потреблять его значения. Это полезно для таких вещей, как определение тем (например, «светлый» или «темный»), чтобы компоненты могли правильно отображать себя без необходимости добавлять «тему» ​​в качестве опоры и передавать ее полностью вниз.

0 голосов
/ 05 мая 2020

children здесь означает рендеринг всего, что передается между тегами <ProviderWrapper>, что в вашем случае является <SomeComponent2 />

Насколько вы думаете о том, что someObj доступен в качестве реквизита для SomeComponent2, обеспокоен, вы не должны передавать {someObj} в значение prop <SomeContext.Provider>, которое вы должны рассматривать как компонент, содержащий данные, и когда вы используете useContext, он будет передавать эти данные компоненту, использующему его

Думайте об этом как о компоненте Provider в react-redux, если бы вы использовали redux. В redux для доступа к любому значению redux в компоненте, который вы используете connect с mapStateToProps, useContext здесь играет аналогичную роль

Реализация вышеуказанного logi c может быть выполнена без контекста, но использование реквизита рендеринга, так что SomeComponent2 передается someObj как реквизит, как показано ниже 

function ProviderWrapper ({children}) {
    const someObj = { 'something': 'someValue' }
    return children({someObj}); 
}

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

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

Однако ограничение вышеупомянутого logi c заключается в том, что он может передавать реквизиты напрямую детям . Чтобы получить доступ к реквизитам на вложенном уровне, вам нужно пройти их полностью вниз.

...