本文主要介紹了React?數(shù)據(jù)共享useContext的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

因?yàn)橐咔椋?最近接手一個(gè)新項(xiàng)目。是React的。上次寫React已經(jīng)過去1年多了。

雖然撿起來也不是什么難事，不過技術(shù)這個(gè)東西，長時(shí)間不用就容易忘記。

為了保證這個(gè)項(xiàng)目根其他平行項(xiàng)目的技術(shù)棧統(tǒng)一。

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

今天不做重點(diǎn)介紹項(xiàng)目，還是說說在項(xiàng)目中碰到的問題。

這個(gè)足足折騰了差不多2個(gè)小時(shí)，我一直在排查其問題。

最后這個(gè)問題也是比較的詭異。

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

引用錯(cuò)誤，不能在初始化之前訪問Context ，在生成頁面的時(shí)候就已經(jīng)發(fā)生。在Shell控制臺(tái)也有顯示輸出。

我嘗試過很多的辦法，例如：換用引用的方式、多個(gè)Provider的位置調(diào)整，甚至只保留一個(gè) ，依然無法解決。

后來我試試可能組建聲明的類型問題。

我平時(shí)對(duì)于寫組建的方式比較隨意。

最喜歡的一種方式就是

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是函數(shù)式組件寫法，是在TypeScript使用的一個(gè)泛型，F(xiàn)C就是FunctionComponent的縮寫，事實(shí)上React.FC可以寫成React.FunctionComponent （我對(duì)這種寫法感覺太過于冗余）

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;

還有很多習(xí)慣使用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>
    )
  }
}

這是三種的構(gòu)造方式

createContext 函數(shù)返回的有3個(gè)屬性分別是 Provider （提供者）、Customer（消費(fèi)者）、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  // 重點(diǎn)是這句 用來指定
	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) //重點(diǎn)這句話，用來獲取指定的上線文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>
  )
}

其實(shí)關(guān)鍵的還是用函數(shù)方式來接受函數(shù)的Provider ，類組件來接受類組件的Provider。保證構(gòu)造的一致。

PS：useContext 我個(gè)人覺得對(duì)于小型項(xiàng)目還是非常的不錯(cuò)，但是對(duì)于復(fù)雜的數(shù)據(jù)，他的分層意識(shí)還是不夠清晰。thunk、saga、mobx 都在一定程度上在分層上更適合context。當(dāng)然你也可以對(duì)context更進(jìn)一步封裝。適合自己的才是最好！

到此這篇關(guān)于React 數(shù)據(jù)共享useContext的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)React 數(shù)據(jù)共享useContext內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: