[全局数据传递] useContext 实战使用

只包含 useContext 应用场景和 useContext 的组件使用方法

---

useContext应用场景

App.js

import React from 'react';

import Page_1 from './pages/Page_1';

// 自定义属性
const deafultContxt = {
  name: 'youwne',
};

/*
	创建上下文对象, 并导出上下文对象
	在它们的父组件上使用 React 的 Context API，在组件外部建立一个 Context。
*/
export const appContext = React.createContext(deafultContxt);

function App() {
  return (
    // 提供了一个 Context 对象，这个对象是可以被子组件共享的。
    <appContext.Provider value={deafultContxt}>
      <Page_1 />
    </appContext.Provider>
  );
}

export default App;

---

第一种使用 appContext.Consumer
./pages/Page_1.js

import React from 'react';
import { appContext } from '../App';	// 引入 appContext 

export default function Page1() {
  return (
    <appContext.Consumer>
      {/* 通过 value 来输出你的自定义属性 */}
      {({ name }) => <h3>{name}</h3>}
    </appContext.Consumer>
  );
}

---

第二种使用useContext

import React, { useContext } from 'react';
import { appContext } from '../App';

export default function Page1() {
  const { name } = useContext(appContext);
  return <h3>{name}</h3>;
}

截图

---

组件化使用 useContext

./context/index.

import React, { useState } from 'react';

const deafultContxt = {
  name: 'youwne',
  cart: { item: [] },
};

export const appContext = React.createContext(deafultContxt);
// 因为我们初始化的是一个函数，所以我们可以传一个 undefined 为初始值
export const appSetStateContext = React.createContext(undefined);

export const AppStateProvider = (props) => {
  /**
   * 为了能使用 setState 这个钩子函数，我们需要设置一个 Context 连接这个 setState 函数
   */
  const [state, setState] = useState(deafultContxt);

  return (
    <appContext.Provider value={state}>
      <appSetStateContext.Provider value={setState}>
        {props.children}
      </appSetStateContext.Provider>
    </appContext.Provider>
  );
};

App.js

import React from 'react';
import { AppStateProvider } from './context/app';

import Page_2 from './pages/Page_2';

function App() {
  return (
    <AppStateProvider>
      <Page_2 />
    </AppStateProvider>
  );
}

export default App;

Page_2

import React, { useContext } from 'react';
import { appContext, appSetStateContext } from '../context/app';

export default function Page1() {
  // 获取相对应的 Context 属性
  const state = useContext(appContext);
  const setState = useContext(appSetStateContext);

  /**
   * @description 更新 state 数据
   */
  const updateContext = () => {
    console.log('update name...');
    setState((state) => ({ ...state, name: 'hhh' }));
    console.log('update complete');
  };

  return (
    <>
      <h3>{state.name}</h3>
      <button onClick={updateContext}>修改 name</button>
    </>
  );
}

截图