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

Question

我很难理解使用React Context API的新方法。我有一个带有自定义类Firebase的应用程序。现在我想勾住它。在我使用HOC （高阶组件）和上下文之前。

我的问题

1. 我需要使用HOC还是一种新方法？
2. 我需要Context.Provider还是新的Hook？
3. 我需要将默认值声明为null还是可以从context.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还是新的Hook？

没有相当于Context.Provider的钩子。您必须按原样使用它。

我需要将默认值声明为null还是可以从context.js中正确传递对象

仅当您不将valueprops 传递给时，才使用createContext的默认值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;