react Hook useContext()

useContext

接收一个上下文对象（React.createContext的返回值，可以理解为全局比变量）并返回该上下文的当前值。当前的上下文值由上层组件中距离当前组件最近的属性<MyContext.Provider>决定value。

当上层最近<MyContext.Provider>更新时，该 Hook 会触发重渲染，并使用最新提交给MyContext提供者的上下文value。即使祖先使用React.memo或使用组件，也会在其自身shouldComponentUpdate组件使用useContext时重新渲染。

使用方法：

创建createContex。

const context = createContext(null);

使用context.Provider包裹根组件，在value中传入值。

function A () {const [count,setCount] = useState(0)return(// 指定上下文使用范围，使用provider,并传入读数据和写入据<context.Provider value={{count, setCount}}>这是A组件<B></B></context.Provider>)
}

使用useContext接受上下文(上下文可以理解为全局变量)，这样子组件就可以使用value中共享的值。

function C () {const { count, setCount }= useContext(context)return(<div>这是C组件: {count}  <button onClick={() =>  { setCount( count+1 )}}>-</button></div>)
}

完整试例

import React, { createContext, useContext, useReducer, useState } from 'react'// 创造一个上下文
const context = createContext(null);function A () {const [count, setCount] = useState(0)return(// 指定上下文使用范围，使用provider,并传入读数据和写入据<context.Provider value={{count, setCount}}>这是A组件<B></B></context.Provider>)
}function B () {return(<div>这是B组件<C></C></div>)
}function C () {const { count, setCount }= useContext(context)return(<div>这是C组件: {count}  <button onClick={() =>  { setCount( count+1 )}}>-</button></div>)
}

react Hook useContext()相关推荐

react hook问题讲解
React Hook 官网地址:https://react.docschina.org/docs/hooks-faq.html (1)问题分析? Hook 是什么? Hook 是一个特殊的函数,它可以 ...
react dispatch_React测试的那些事(三) React Hook 测试实例
useReducer 测试 useReducer 首先需要在组件中用 actions 和 reducers ,代码如下. Reducer import * as ACTIONS from './act ...
关于react hook视频讲解笔记
https://react.docschina.org/docs/hooks-intro.html Hook 是能让你在函数组件中"钩入" React 特性的函数.它们名字通常都以 ...
尝鲜用 React Hook + Parcel 构建真心话大冒险简单页面
首发于我的 Blog 阅读推荐:本人需要您有一定的 React 基础,并且想简单了解一下 Hook 的工作方式和注意点.但是并不详细介绍 React Hook,如果想有进一步的了解,可以查看官方文档. ...
react hook函数
State Hook useState():状态钩子.纯函数组件没有状态,用于为函数组件引入state状态, 并进行状态数据的读写操作语法.参数及返回值说明:: const [xxx, setXxx ...
React Hook的用法: Contex + Reducer(二)
React Hook 简述通过上篇文章我们知道使用 State Hook 和 Effect Hook 可以让函数组件也能够具有自己的状态和在组件的各个阶段提供钩子暴露给开发者使用(点击我查看 Sta ...
React Hook
React Hook Hook 是 React 16.8 的新增一系列封装函数,它可以让函数组件中可以使用state,跨组件通信,生命周期等React的特性 Hook的意义在于:将函数组件中的业务逻辑 ...
在React Hook里使用history.push跳转
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法首先引入 import { useHistory } from ' ...
源码解析 React Hook 构建过程
2018 年的 React Conf 上 Dan Abramov 正式对外介绍了React Hook,这是一种让函数组件支持状态和其他 React 特性的全新方式,并被官方解读为这是下一个 5 年 R ...
React Hook基本使用踩坑指南
React因为提倡函数式编程,所以提出了Hook思想来增强函数组件的功能,以此来替代基于Class的组件.但是我们有可能从基于Class这样的实例化组件转向函数组件时思想还没有完全转过来,还是用基于实 ...

react Hook useContext()

react Hook useContext()相关推荐

最新文章

热门文章