react hooks--useContext

在开发过程中，什么时候用到useContext呢？当我们需要跨组件层级进行数据传递，实现共享时，useContext就能派上用场了。

一、基础用法

1. 声明。使用createContext 方法创建一个 Context 对象，并设置初始值。

const MyContext = React.createContext(initialValue)

2. 提供。使用Provider为所有子孙后代组件提供要传递的value值。

  {/* 内层子组件 */}
  

3. 消费。使用useContext获取值，currentContext为顶层组件传递的值，对应上述的currentValue。

const currentContext = useContext(MyContext)

二、具体案例

顶层组件：Home.tsx

import React, { useState, createContext } from 'react';
import FirstChild from './component/firstChild';
import SecondChild from './component/secondChild';
import './index.less';

export const InfoContext = createContext({ count: 0, user: '' });

const Home: React.FC = () => {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState('小红');

  const addCount = () => {
    setCount(count + 1);
  };
  const changeUser = () => {
    setUser('小明');
  };

  return (
    
      父组件（Home）

      

数字：{count}

      

操作人：{user}

      数字+1       更改操作人       {/* 使用 Provider 为所有子孙后代提供 value 值  */}                                     

  ); }; export default Home;

第1个子组件：firstChild.tsx

import React, { useContext } from 'react';
import { InfoContext } from '@/pages/Home';
import GrandChild from '../grandChild';

const firstChild: React.FC = () => {
  const { count } = useContext(InfoContext);
  return (
    
      第一个子组件（firstChild）

      

（Home）数字：{count}

           

  ); }; export default firstChild;

第2个子组件：secondChild.tsx

import React, { useContext } from 'react';
import { InfoContext } from '@/pages/Home';

const secondChild: React.FC = () => {
  const { user } = useContext(InfoContext);
  return (
    
      第二个子组件（secondChild）