React数据共享useContext怎么实现

这篇“React数据共享useContext怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“React数据共享useContext怎么实现”文章吧。

问题：

ReferenceError: Cannot access 'Context' before initialization This error happened while generating the page. Any console logs will be displayed in the terminal window.

引用错误 ， 不能在初始化之前访问Context ， 在生成页面的时候就已经发生。在Shell控制台也有显示输出。

我尝试过很多的办法， 例如：换用引用的方式、多个Provider的位置调整，甚至只保留一个 ， 依然无法解决。

后来我试试可能组建声明的类型问题。

我平时对于写组建的方式比较随意。

最喜欢的一种方式就是

import { useState  , createContext} from 'react'import Me from './me'export const MyContext =  createContext({});export default function Demo(){  const [say , setSay] = useState('');  return (    <MyContext.Provider value={{say , setSay}}>      <div>father</div>谁在讲话 {say}      <Me />    </FatherContext.Provider>  )}

React.FC是函数式组件写法，是在TypeScript使用的一个泛型，FC就是FunctionComponent的缩写，事实上React.FC可以写成React.FunctionComponent （ 我对这种写法感觉太过于冗余 ）

import React, { createContext, FunctionComponent, useState } from 'react'import Me from './me'interface DemoProps {  say: string;  setSay: React.Dispatch<React.SetStateAction<boolean>>;  demoString?:string;}const defaultDemoProps: DemoProps = {isDay: true,setIsDay: (day) => day};export const MyContext = createContext<DemoProps>({...defaultDemoProps});const Demo: React.FC<DemoProps> = ({ children, ...props }) => {  const { say : propIsSay } = props;  const [ isSay, setSay ] = useState(propIsDay)  return <MyContext.Provider value={{ say,setSay}}>      <Me />    </MyContext.Provider>}export default Demo;

还有很多习惯使用class components

import React, { createContext, PureComponent } from 'react'import Me from './me'export const MyContext = createContext({})export default class Demo extends PureComponent {  state = {    say:true,   }  setSay ()=>{    let say = !this.state.say    this.setState({      say    });  }  render() {    return(      <MyContext.Provider value={{ say,setSay}}>      <Me />      <MyContext.Provider>    )  }}

这是三种的构造方式

createContext 函数返回的有3个属性分别是 Provider （ 提供者 ）、Customer（ 消费者 ）、displayName （ 貌似用不到 ）

import React, { Context, PureComponent } from 'react';import {MyContext} from '../components/data';import Memo from '../components/classDemo';export const MyContext = React.createContext()export default class CurstomerDemo extends PureComponent {  static contextType = MyContext  // 重点是这句 用来指定constructor(props) {super(props);}  handleClick = () => {    console.log (this.context) // 获取上下文 Provider 属性  }render() {return (      <div>        <button>Provider</button>        <button onClick={this.handleClick}>Customer</button>      </div>)}}import React, { useState  ,useContext, createContext} from 'react'import {MyContext} from './Demo'function useCountContext(CounterContext) {  const context = useContext(MyContext) //重点这句话，用来获取指定的上线文Context  if (!context) {    throw new Error('useCountContext must used within Context.Provider')  }  return context}export default function Me(props){  let context = useCountContext(MyContext)  let {say , setSay} = context  return (    <div>      me      <button onClick={()=>{        setSay(say + ',同志们好')      }}>come from grandpa Provier {say}</button>    </div>  )}

其实关键的还是用函数方式来接受函数的Provider ， 类组件来接受类组件的Provider。保证构造的一致。

PS：useContext 我个人觉得对于小型项目还是非常的不错，但是对于复杂的数据，他的分层意识还是不够清晰。thunk、saga、mobx 都在一定程度上在分层上更适合context。当然你也可以对context更进一步封装。适合自己的才是最好！

以上就是关于“React数据共享useContext怎么实现”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。