1. 首页
  2. Reactjs

请问useContext Hook 是如何工作的,你知道吗?

所有这些新的React Hook之间都有一个宗旨:就是为了使函数组件像类组件一样强大。

useContext hook 与其它几个有点不一样,但它在特定场景下还是很有用的。

React 的 Context API 是一种在应用程序中深入传递数据的方法,而无需手动一个一个在多个父子孙之间传递 prop。当咱们需要的只是传递数据时,它可以作为像Redux这样的工具的一个很好的替代。

码农进阶题库,每天一道面试题 or Js小知识

使用 Context ,首先顶层先声明 Provier 组件,并声明 value 属性,接着在后代组件中声明 Consumer 组件,这个 Consumer 子组件,只能是唯一的一个函数,函数参数即是 Context 的负载。如果有多个 Context ,ProviderConsumer 任意的顺序嵌套即可。

此外我们还可以针对任意一个 Context 使用 contextType 来简化对这个 Context 负载的获取。但在一个组件中,即使消费多个 Context,contextType 也只能指向其中一个。

码农进阶题库,每天一道面试题 or Js小知识

码农进阶题库,每天一道面试题 or Js小知识

Hooks 环境中,依旧可以使用 Consumer,但是 ContextType 作为类静态成员肯定是用不了。Hooks 提供了 useContext,不但解决了 Consumer 难用的问题同时也解决了 contextType 只能使用一个 context 的问题。

标准方式

使用 API的典型方法如下所示:


import React from "react"; import ReactDOM from "react-dom"; // 创建 Context const NumberContext = React.createContext(); // 它返回一个具有两个值的对象 // { Provider, Consumer } function App() { // 使用 Provider 为所有子孙代提供 value 值 return ( <NumberContext.Provider value={42}> <div> <Display /> </div> </NumberContext.Provider> ); } function Display() { // 使用 Consumer 从上下文中获取 value return ( <NumberContext.Consumer> {value => <div>The answer is {value}.</div>} </NumberContext.Consumer> ); } ReactDOM.render(<App />, document.querySelector("#root"));

可以 CodeSandbox上看看运行效果。

使用 useContext 方式

使用 useContext hook 来重写上面的示例


import React, { useContext } from 'react'; // ... function Display() { const value = useContext(NumberContext); return <div>The answer is {value}.</div>; }

调用useContext,传入从React.createContext获取的上下文对象。

唯一需要注意的是你必须将整个上下文对象传递给useContext – 而不仅仅是Consumer, 当然如果忘记了,React会给出警告。

嵌套的 Consumers

你可能遇到这样的情况,咱们的组件需要从多个父上下文中接收数据,从而导致这样的代码


function HeaderBar() { return ( <CurrentUser.Consumer> {user => <Notifications.Consumer> {notifications => <header> Welcome back, {user.name}! You have {notifications.length} notifications. </header> } } </CurrentUser.Consumer> ); }

这种大量嵌套只是为了接收两个值。下面是使用useContext时的效果:


function HeaderBar() { const user = useContext(CurrentUser); const notifications = useContext(Notifications); return ( <header> Welcome back, {user.name}! You have {notifications.length} notifications. </header> ); }

总结

useContext 接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <CountContext.Provider>value prop 决定。

当组件上层最近的 <CountContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 CountContext provider 的 context value 值。

别忘记 useContext 的参数必须是 context 对象本身:

  • 正确: useContext(MyContext)
  • 错误: useContext(MyContext.Consumer)
  • 错误: useContext(MyContext.Provider)

调用了 useContext 的组件总会在 context 值变化时重新渲染。如果重渲染组件的开销较大,你可以 通过使用 memoization 来优化。

*

码农进阶题库,每天一道面试题 or Js小知识 https://www.javascriptc.com/interview-tips/

参考:

https://daveceddia.com/usecon…

作者:前端小智
链接:https://segmentfault.com/a/1190000020111320

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:请问useContext Hook 是如何工作的,你知道吗?

链接:https://www.javascriptc.com/3433.html

« 前端领域的 Docker 与 Kubernetes
那么前端该如何优雅的处理异常?»

相关推荐

QR code