Как правильно использовать новый React-хук useContext?

Question

У меня есть некоторые трудности, чтобы понять новый способ использования реагирования Context API.У меня есть приложение с пользовательским классом Firebase.Теперь я хочу сделать крюк, чтобы передать его.До того, как я использовал HOC (Компонент высшего порядка) и контекст.

Мои вопросы

1. Нужно ли использовать HOC илиновый способ сделать это?
2. Нужен ли мне Context.Provider или его новый Hook?
3. Нужно ли объявлять значение по умолчанию как ноль, или я могу передать свой объект прямо из контекста.js
4. Как я могу использовать новый Hook вместо HOC в моем коде?

Вот мой код с некоторыми комментариями, связанными с вопросами

// context.js this is my hoc
// index.jsx
import App from './App'
import Firebase, { FirebaseContext } from './components/Firebase'

const FirebaseContext = React.createContext(null)

export const withFirebase = Component => (props) => {
  // I don't need to wrap it to the FirebaseContext.Consumer
  // 1 But do I need this HOC or it's a new way?
  const firebase = useContext(FirebaseContext)
  return <Component {...props} firebase={firebase} />
}

ReactDOM.render(
  // 2 Here I'm lost. Do I need the FirebaseContext.Provider or not?
  // 3 Do I need to declare value her or I should do it in context.js as a default?
  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root'),
)

// App.jsx
// 4 Can I use a new Hook instead of HOC here and how?
import { withFirebase } from './components/Firebase/context'
const App = () => {
    const firebase = this.props.firebase // But should be useContext(FirebaseContext) or something like this?
    return(...)
}
export default withFirebase(App) // I don't need this with the Hook

Любая помощь приветствуется.

Answer 1

Вы должны сначала понять, что useContext - это просто использование контекста и действует как потребитель, а не как поставщик.

Чтобы ответить на ваши вопросы

Нужно ли использовать HOC или это новый способ сделать это?

Вам не нужен HOCс крючкамиХуки предназначены для замены HOC и рендеринга реквизита.

Нужен ли мне Context.Provider или его новый хук?

Не существует хуков, эквивалентных Context.Provider,Вы должны использовать его как есть.

Нужно ли объявлять значение по умолчанию как нулевое, или я могу передать свой объект прямо из context.js

Значение по умолчаниюto createContext используется только в том случае, если вы не передаете value реквизиты Context.Provider.Если вы передадите его, значение по умолчанию будет проигнорировано.

Как я могу использовать новый Hook вместо HOC в моем коде?

Вместо использования useContext вКомпонент, возвращаемый HOC, использует его непосредственно внутри компонента

Пример кода

/ context.js this is my hoc
// index.jsx
import App from './App'
import Firebase, { FirebaseContext } from './components/Firebase'

const FirebaseContext = React.createContext(null)

ReactDOM.render(
  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root'),
)

App.jsx

const App = () => {
    const firebase = useContext(FirebaseContext) 
    return(...)
}
export default App;