Question

我很难理解使用React Context API的新方法。我有一个带有自定义类Firebase的应用程序。现在我想勾住它。在我使用hok和context之前。

我的问题

我需要使用Hoc还是这是一种新方法？
我需要Context.Provider还是新的Hook？
我需要将默认值声明为null还是可以传递我的Object 直接从context.js
如何在我的代码中使用新的Hook代替Hok？

这是我的代码，其中包含与问题相关的一些注释

// 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 Hok 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还是可以传递我的Object 直接从context.js

仅当您不将value道具传递给Context.Provider时，才使用createContext的默认值。如果通过，则默认值将被忽略。

如何在我的代码中使用新的Hook代替Hok？

不是在HOC返回的组件中使用useContext，而是直接在组件内使用

示例代码

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

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

1 个答案: