React之useContext()

使用场景：
深层次组件传值（父组件传值给子子孙孙...组件）

1.父组件传值给直接子组件，子组件可以通过props进行接收，如下方：

import React, { useState } from 'react';

// 定义一个Son的子组件
const Son = (props: any) => {
  return <div>我是子组件：{props.paramsFromParent}</div>;
};

// 定义一个Parent的父组件
const Parent = () => {
  const [params, setParams] = useState('我是父组件传过来的值'); // 初始化给params一个初始值'我是父组件传过来的值'
  return (
    <>
      <div>我是父组件</div>
      <Son paramsFromParent={params} />
    </>
  );
};

export default Parent;

运行结果

2.如果父组件要传值给更深层次的子孙组件，则需要用到React中的Hook：useContext()

（1）useContext 的参数必须是 context 对象本身；
（2）当距离Child组件(即接收useContext内容的组件)上层最近的那个<LuckMoney.Provider>更新时，useContext()这个hook会重渲染，并将最新的那个context值(1000元)传递给Child组件。

import React, { useState, useContext } from 'react';

// 定义一个过年红包,里面装了0元==================关键代码==================
let LuckMoney = React.createContext('0元');

// 定义一个Grandson的孙组件
const Grandson = () => {
  // ==================关键代码==================
  let myMoney = useContext(LuckMoney);// 用来接收最新的LuckMoney的值
  return <div>我是孙组件，爷爷给了我一个大红包：{myMoney}</div>;
};

// 定义一个Child的子组件
const Child = () => {
  return (
    <>
      <div>我是子组件</div>
      <Grandson></Grandson>
    </>
  );
};

// 定义一个Parent的父组件
const Parent = () => {
  const [money, setMoney] = useState('1000元');
  return (
    <>
      <div>我是父组件</div>
      {/* ==================关键代码================== */}
      {/* 负责去提供最新的LuckMoney */}
      <LuckMoney.Provider value={money}>
        <Child />
      </LuckMoney.Provider>
    </>
  );
};

export default Parent;

运行结果