React hooks学习 -- “useContext”

useContext

useContext可以创建一个独立的空间,用来跨层传递数据.且所传递的数据能够实时更新.

// useContext
// 基础demo - App -> A -> B 把app组件中的数据传给B
// 用法
// 1. createContext() -> coutext对象
// 2. 在顶层组件中 通过 context.Provider提供数据
// 3. 在底层组件中 通过 useContext() 获取顶层组件提供的数据import { createContext, useContext, useState } from "react"const CountContext = createContext()function A () {return <div>this is A <B /></div>
}function B () {const count = useContext(CountContext)return <div>this is B {count} </div>
}function App () {const [count,setCount] = useState(0)return (<><CountContext.Provider value={count}>this is app<button onClick={() => setCount(count + 1)}>+</button><A /></CountContext.Provider></>)
}export default App

2.useContext也能和Mobx一同使用(仅记录,笔者暂时不会Mbox,学习后加更)

import { useStore } from '../store'
import { observer } from 'mobx-react-lite'function A() {return <div>this is A <B /></div>
}function B() {const store = useStore()return <div>this is B <button onClick={store.setCount}>+</button></div>
}function App() {const store = useStore()console.log(store.count);return (<>this is app<A /></>)
}export default observer(App)

React hooks学习 -- “useContext”相关推荐

react hooks学习之useState set值后，获取值没有更新
设置了一个useState,用setPage来更新Page值.看看打印效果即使setPage了,拿到的page值依旧没有更新. 原因: 因为setState是异步的,所以在调用setState后,t ...
通过构建Paint App学习React Hooks
According to people in the know, React Hooks are hot, hot, hot. In this article, we follow Christian ...
React学习七（React Hooks）
文章目录一.为什么会有Hooks 二.Hooks的含义三.React Hooks的用法 1.useState() 2.useContext() 3.useReducer() 4.useEffect ...
Reac项目搭建,学习React hooks
创建react项目 1 安装脚手架工具 2 ceact-react-app创建react项目运行使用useState改变状态视频链接https://www.bilibili.com/video/ ...
（十三）react hooks
react hooks react hooks 出几道react hooks面试题 class组件存在哪些问题用useState实现state和setState功能用useEffect模拟组件生命 ...
React Hooks 完全使用指南
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...
react hooks使用_如何使用React Hooks和Context API构建简单的PokémonWeb App
react hooks使用 After seven years of full stack development using Ruby, Python, and vanilla JavaScript ...
React16：Hooks总览，拥抱函数式 (这大概是最全的React Hooks吧)
React16.8中加入了Hooks,让React函数式组件再一次升华,那么到底什么是Hooks? 动机 React官网和2018年的React conf上都提到了动机这个东西,那么出现hooks的动 ...
React Hooks 分享
目录一,什么是Hooks 二,为什么要使用Hooks 三,React hooks 四, useState 使用及实现五,useEffect 使用及实现六,如何实现多个useState, useE ...

React hooks学习 -- “useContext”

useContext

useContext可以创建一个独立的空间,用来跨层传递数据.且所传递的数据能够实时更新.

2.useContext也能和Mobx一同使用(仅记录,笔者暂时不会Mbox,学习后加更)

React hooks学习 -- “useContext”相关推荐

最新文章

热门文章