Могу ли я заменить контекст с помощью хуков? - PullRequest
Новая
       6

Могу ли я заменить контекст с помощью хуков?

0 голосов
/ 02 ноября 2018

Есть ли способ с помощью нового API реагирования на хуки заменить контекстную выборку данных?

Если вам нужно загрузить профиль пользователя и использовать его почти везде, сначала вы создаете контекст и экспортируете его: 

export const ProfileContext = React.createContext()

Затем вы импортируете в верхний компонент, загружаете данные и используете провайдера, как это: 

import { ProfileContext } from 'src/shared/ProfileContext'

<ProfileContext.Provider
      value={{ profile: profile, reloadProfile: reloadProfile }}
    >
        <Site />
    </ProfileContext.Provider>

Затем в некоторых других компонентах вы импортируете данные профиля следующим образом: 

import { ProfileContext } from 'src/shared/ProfileContext'
const context = useContext(profile);

Но есть ли способ экспортировать некоторую функцию с перехватчиками, которые будут иметь состояние и совместно использовать профиль с любым компонентом, который хочет получить данные?

Ответы [ 3 ]

0 голосов
/ 04 ноября 2018

React предоставляет хук useContext для использования контекста, который имеет сигнатуру типа 

const context = useContext(Context);

useContext принимает объект контекста (значение, возвращаемое из React.createContext) и возвращает текущее значение контекста, как указано ближайшим поставщиком контекста для данного контекста.

Когда провайдер обновляется, этот хук вызовет повторное рендеринг последнее значение контекста.

Вы можете использовать его в своем компоненте как 

import { ProfileContext } from 'src/shared/ProfileContext'

const Site = () => {
   const context = useContext(ProfileContext);
   // make use of context values here
}

Однако, если вы хотите использовать один и тот же контекст в каждом компоненте и не хотите импортировать ProfileContext везде, вы можете просто написать пользовательский хук, такой как 

import { ProfileContext } from 'src/shared/ProfileContext'
const useProfileContext = () => {
   const context = useContext(ProfileContext);
   return context;
}

и используйте его в таких компонентах, как 

const Site = () => {
   const context = useProfileContext();
}

Однако, что касается создания хука, который разделяет данные между различными компонентами, у хуков есть экземпляр данных для себя, и они не могут делиться ими, если вы не используете Context;

0 голосов
/ 19 февраля 2019

Теперь я использую это так.

Contexts.js - экспорт всего контекста из одного места 

export { ClickEventContextProvider,ClickEventContext} from '../contexts/ClickEventContext'
export { PopupContextProvider, PopupContext } from '../contexts/PopupContext'
export { ThemeContextProvider, ThemeContext } from '../contexts/ThemeContext'
export { ProfileContextProvider, ProfileContext } from '../contexts/ProfileContext'
export { WindowSizeContextProvider, WindowSizeContext } from '../contexts/WindowSizeContext'

ClickEventContext.js - один из примеров контекста: 

import React, { useState, useEffect } from 'react'

export const ClickEventContext = React.createContext(null)
export const ClickEventContextProvider = props => {
  const [clickEvent, clickEventSet] = useState(false)
  const handleClick = e => clickEventSet(e)

  useEffect(() => {
    window.addEventListener('click', handleClick)
    return () => {
      window.removeEventListener('click', handleClick)
    }
  }, [])

  return (
    <ClickEventContext.Provider value={{ clickEvent }}>
      {props.children}
    </ClickEventContext.Provider>
  )
}

импорт и использование: 

import React, { useContext, useEffect } from 'react'
import { ClickEventContext } from 'shared/Contexts'

export function Modal({ show, children }) {
  const { clickEvent } = useContext(ClickEventContext)

  useEffect(() => {
    console.log(clickEvent.target)
  }, [clickEvent])

  return <DivModal show={show}>{children}</DivModal>
}
0 голосов
/ 02 ноября 2018

Последнее обновление:

Мой предыдущий ответ был - Вы можете использовать пользовательские хуки с useState для этой цели, но это было неправильно из-за этого факта:

Есть ли у двух компонентов одно и то же состояние общего ресурса хуков? Нет. Пользовательские хуки - это механизм для повторного использования логики с отслеживанием состояния (такой как настройка подписки и запоминание текущего значения), но каждый раз, когда вы используете Пользовательский хук, все состояния и эффекты внутри него полностью изолированы.

Правильный ответ, как это сделать с помощью useContext () при условии @ ShubhamKhatri

...