【React Hooks 学习笔记】useContext

简介: 前端西瓜哥

大家好,我是前端西瓜哥。今天简单说说 React Hooks 的 useContext。

useContext 用于获取 React 的 Context 对象。

const value = useContext(MyContext);

React 的 Context 指的是组件上下文的意思,用于简化子组件跨多层中间组件和上层组件的通信问题。

如果用 props 一个个往下传,直接人传晕了。而且要是以后中间组件又套多了几个,又要补上对应 props,也不利于组件的通用化。

比如你需要子组件可以修改上层组件的状态,传入了一个 setState 方法,此时 Context 是非常不错的方案。

useContext() 会拿到离它最近的 Context.Provider,即拿到向上最近的 <MyContext.Provider value={myValue}>)的 value。如果找不到,则会使用 createContext 时传入的默认值。

下面我们不妨看个例子。

import React, { createContext, useContext, useState } from 'react'
const CounterContext = createContext(() => { console.log('默认值') });
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <CounterContext.Provider value={setCount}>
      <div>
        <div>count { count }</div>
        <A />
      </div>
    </CounterContext.Provider>
  )
}
function A() {
  const setCount = useContext(CounterContext); // 拿到 Counter 下的 setCount
  return (
    <div>
      <button onClick={() => { setCount(pre => pre + 1) }}>加一</button>
    </div>
  )
}

还是一个定时器,但这次我们将 count 状态的更新方法提供给它的子组件。这里为了更专注于核心逻辑,所以故意写简单点,只有一个子组件。

我们先通过 createContext 创建一个 Context,并提供一个默认函数。

我们的 A 组件,找到的最近的 provider 是位于 Counter 组件下的 setCount 更新函数,然后 A 组件就成功通过这个方法更新了 Counter 组件的状态。

如果你把 <CounterContext.Provider />  组件移除,你会发现点击 A 组件下的按钮后,只会在控制台输出 “默认值”,因为 A 组件找不到 Provider,使用了默认函数。

默认函数很少会用到,起一个兜底的作用。

相关文章
|
4天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
4天前
|
前端开发 JavaScript
react常用的hooks有哪些?
react常用的hooks有哪些?
16 0
|
1天前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
2天前
|
前端开发
掌握React中的useContext:访问父组件数据的神奇技巧
掌握React中的useContext:访问父组件数据的神奇技巧
|
2天前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理
|
3天前
|
缓存 前端开发
Web开发:深入探讨React Hooks的使用和最佳实践
Web开发:深入探讨React Hooks的使用和最佳实践
10 0
|
4天前
|
存储 前端开发 JavaScript
React Hooks实战:从useState到useContext深度解析
React Hooks 深度解析:useState用于函数组件的状态管理,通过初始化和更新状态实现渲染控制;useContext则提供跨组件数据传递。useState的状态更新是异步的,不支持浅比较,可结合useEffect处理副作用。useContext在多层组件间共享状态,但可能导致不必要的渲染。两者结合可创建复杂应用场景,如带主题切换的计数器。了解其工作原理和优化策略,能有效提升React应用性能。
20 0
|
4天前
|
前端开发 API 开发者
React Hooks API:自定义Hooks的创建与使用
【4月更文挑战第25天】本文介绍了React自定义Hooks的创建与使用。自定义Hooks是提升React开发效率的关键工具。
|
4天前
|
前端开发
探索React Hooks:一种全新的组件逻辑管理方式
React Hooks是React 16.8版本引入的一项新功能,它改变了我们编写React组件的方式。本文将从Hooks的起源讲起,逐步分析Hooks的优势,并通过具体示例展示Hooks在组件逻辑管理中的应用,旨在帮助读者更好地理解和运用React Hooks。
|
4天前
|
前端开发 JavaScript
使用React Hooks实现简单的计数器应用
使用React Hooks实现简单的计数器应用

热门文章

最新文章