亲宝软件园·资讯

展开

React 数据共享useContext

www当下 人气:0

因为疫情, 最近接手一个新项目。是React的。上次写React已经过去1年多了。

虽然捡起来也不是什么难事,不过技术这个东西,长时间不用就容易忘记。

为了保证这个项目根其他平行项目的技术栈统一。

采用的是 Nextjs 、styled-components、useContext 、react-query、ts

今天不做重点介绍项目,还是说说在项目中碰到的问题。

这个足足折腾了差不多2个小时,我一直在排查其问题。

最后这个问题也是比较的诡异。

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 我个人觉得对于小型项目还是非常的不错,但是对于复杂的数据,他的分层意识还是不够清晰。thunksagamobx 都在一定程度上在分层上更适合context。当然你也可以对context更进一步封装。适合自己的才是最好!

加载全部内容

相关教程
猜你喜欢
用户评论