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

Question

我很难理解使用 react Context API 的新方法。 我有一个带有自定义类 Firebase 的应用程序。现在我想做一个钩子来传递它。在我使用HOC (higher-order Component) 和上下文之前。

我的问题

1. 我是否需要使用 HOC 或者这是一种新方法？
2. 我需要 Context.Provider 还是新的 Hook？
3. 我是否需要将默认值声明为 null 或者我可以传递我的对象 直接来自 context.js
4. 如何在我的代码中使用新的 Hook 而不是 HOC？

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

// 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 只是为了使用 Context 并且充当消费者而不是提供者。

回答你的问题

我是否需要使用 HOC 或者这是一种新的方法？

您不需要带有钩子的 HOC。 Hooks 旨在替换 HOC 并渲染 props 模式。

我需要 Context.Provider 还是新的 Hook？

没有与 Context.Provider 等效的钩子。您必须按原样使用它。

我是否需要将默认值声明为 null 或者我可以传递我的对象 直接来自 context.js

仅当您不将 value 属性传递给 Context.Provider 时，才会使用 createContext 的默认值。如果你传递它，默认值将被忽略。

如何在我的代码中使用新的 Hook 而不是 HOC？

不要在 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;

Answer 2

1. 我是否需要使用 HOC 或者这是一种新方法？

不，您不需要将 HOC 用作最佳技术。

为什么？ 从 React v7.0 开始，您可以使用基于函数的组件。 从这个版本高效的是使用最新的 名为 HOOKS 的技术，旨在取代类和 提供另一个很好的选择来将行为组合到你的 组件。

---

1. 我需要 Context.Provider 还是新的 Hook？

useContext() 之类的 Hook 与 Context.Provider 有关系。
Context 旨在共享可被视为“全局”的数据。

Provider 组件接受一个 要传递的值道具。每个上下文都有一个提供者。

上下文实例上可用的

Context.Provider 组件用于为其子组件提供上下文，无论它们有多深。

---

1. 我是否需要将默认值声明为 null 或者我可以直接从 context.js 传递我的对象？

不，您不必声明默认值。

在代码库的一个角落定义上下文而不使用 defaultValue 的示例。

const CountStateContext = React.createContext() //

---

4. 如何在我的代码中使用新的 Hook 而不是 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.js，使用的数据来自上下文：

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