react+tsx中使用`createContext, useContext`hooks

类组件中使用props进行传值，react17后采用createContext, useContext进行共有数据传递。

1. 导入

import React, { useState, useEffect, createContext, useContext } from "react";

createContext用于创建父组件想要赋予给子组件的值，初始要有默认值

useContext在子组件中使用，用于接收父组件传递来的数据

想要使用这两个hooks，还需要在父组件内使用<xxx.Provider>包裹住子组件</ xxx.Provider>

2. 简单使用

interface objData {
  id: number;
  name: string;
}
// 首先定义父组件要传递的数据初值，要在父组件外部
const fatherDataContext = createContext<Array<objData>>([]);
// 定义子组件
function Son(): JSX.Element {
  //定义一个接收父元素数据的变量 可以直接使用接收到的value的值
  const fatherDataList = useContext(selectListContext);
  console.log("fatherDataList :>> ", fatherDataList);
  return <></>;
}
// 定义父组件
function Father(): JSX.Element {
  const [myList, setMyList] = useState<Array<objData>>([]);
  const exapleList: Array<objData> = [
    {
      id: 1,
      name: "小敏",
    },
    {
      id: 2,
      name: "糖糖",
    },
  ];
  // 模拟网络请求，三秒后list被赋值
  useEffect(() => {
    setTimeout(() => {
      setMyList(exapleList);
    }, 3000);
  }, []);
  return (
    <>
      <p>我是父组件</p>
      {/* 在这里，需要使用父组件声明的context变量 ，value就是父组件要传递给子组件的值 */}
      <fatherDataContext.Provider value={myList}>
        <Son />
      </fatherDataContext.Provider>
    </>
  );
}

3.总结

1. 先在公共区域申明一个createContext变量:

const fatherDataContext = createContext<Array<objData>>([]);

2. 在父组件内，将要共享数据的子组件使用createContext.Provider 包裹住，value就是父组件要传递的数据

 {/* 父组件内*/}
      <fatherDataContext.Provider value={myList}>
        <Son />
      </fatherDataContext.Provider>

3.子组件使用useContext接收

// 子组件内  此时fatherDataList 就是父组件中value传递来的值
const fatherDataList = useContext(selectListContext);

今天先学先用，如有不对的麻烦请指出，笔者不想误导他人，谢谢 。