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

Posted 2023-04-14

【中文标题】使用新的 React 钩子 useContext 的正确方法是啥？

【英文标题】：What is the right way to use new React hook useContext?使用新的 React 钩子 useContext 的正确方法是什么？

【发布时间】：2019-07-12 12:22:10

【问题描述】：

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

我的问题

我是否需要使用 HOC 或者这是一种新方法？ 我需要 Context.Provider 还是新的 Hook？ 我是否需要将默认值声明为 null 或者我可以传递我的对象 直接来自 context.js 如何在我的代码中使用新的 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

任何帮助表示赞赏。

【问题讨论】：

堆栈溢出不是一个教程网站。我建议为您的每个问题设置一个新问题。尝试解决问题，如果您遇到困难，我们可以提供帮助。

看起来你想要一个初学者使用上下文挂钩的介绍，为此我推荐 Dave Ceddia 的 https://daveceddia.com/usecontext-hook/

useContext 只是Context.Consumer 或myClass.contextType 的替代品。使用该变量并将上下文引用作为默认值传递给它。

@JoshPittman 我已经看过本教程（以及更多），但仍然有这些问题。我认为将所有内容放在一起很好，因为我使用了我所描述的上下文（它有效）并且想展示我不确定如何使用它的地方。

@KenoClayton 这对我来说很清楚。但是我需要将 App 包装到 Provider 吗？

【参考方案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;

【讨论】：

谢谢。那是工作。还有一件事。如何传递默认值？如果我在没有它的情况下尝试提供者，它是未定义的。

One more thing. How to pass the default value 如果您不将 value 属性传递给 FirebaseContext.Provider，您可以将默认值指定为 React.createContext 的参数

所以我可以让 App 不使用 Provider 并使用默认值（Firebase 始终相同）？这是一个好习惯吗？

我测试过，它可以工作。没有 value 属性的提供者将通过 undefined。看看它在文档中reactjs.org/docs/context.html#reactcreatecontextThe defaultValue argument is only used when a component does not have a matching Provider above it in the tree.

对不起我的错误。我对别的东西感到困惑。感谢告知

【参考方案2】：

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

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

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

---

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

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

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

上下文实例上可用的

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

---

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

不，您不必声明默认值。

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

const CountStateContext = React.createContext() //

---

如何在我的代码中使用新的 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;