使用新的 React 钩子 useContext 的正确方法是什么？

Question

I have some difficulties to understand the new way to use react Context API. I have an app with a custom class Firebase. Now I want to make a hook to pass it. Before I used HOC (higher-order Component) and context.

My questions

1. Do I need to use HOC or it's a new way to do this?
2. Do I need the Context.Provider or it's new Hook?
3. Do I need to declare default value as a null or I can pass my Object right from context.js
4. How can I use a new Hook instead of HOC in mine code?

Here is my code with some comments related to questions

// 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

Any help appreciated.

Answer 1

You should understand it first that, useContext is just to make use of Context and acts like a consumer and not Provider.

To answer your questions

Do I need to use HOC or it's a new way to do this?

You don't need an HOC with hooks. Hooks are meant to replace HOCs and render props pattern.

Do I need the Context.Provider or it's new Hook?

There is no hooks equivalent of Context.Provider. You have to use it as is.

Do I need to declare default value as a null or I can pass my Object right from context.js

The default value to createContext is only used if you don't pass a value props to the Context.Provider . If you pass it the default value is ignored.

How can I use a new Hook instead of HOC in mine code?

Instead of using useContext in the component returned by HOC use it directly within the component

Sample code

/ 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;

Answer 2

1. Do I need to use HOC or it's a new way to do this?

No, you don't need to use HOC as best technique.

Why? Starting from React v7.0 , you can use functional-based components. From this version efficient is to use the the latest technique named HOOKS, which were designed to replace class and provide another great alternative to compose behavior into your components.

---

2. Do I need the Context.Provider or it's new Hook?

Hook like useContext() has a relation with Context.Provider.
Context is designed to share data that can be considered “global”.

The Provider component accepts a value prop to be passed. Every Context come with a Provider.

Context.Provider component available on the context instance is used to provide the context to its child components, no matter how deep they are.

---

3. Do I need to declare default value as a null or I can pass my Object right from context.js?

No, you don't need necessarily to declare a default value.

Example of defining the context in one corner of the codebase without defaultValue.

const CountStateContext = React.createContext() // <-- define the context without defaultValue

---

4. How can I use a new Hook instead of HOC in mine code?

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'),
)

Root Component: App.js, where will be used data comes form context:

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