useContext（减少组件层级）

useContext

• 应用场景：非父子组件通信，使用 const GlobalContext = React.createContext() // 创建供应商
• 供应商提供数据

// App组件提供数据
<GlobalContext value={{
  test: "这是一个测试数据"
}}></GlobalContext>

• 组件消费数据

const value = useContext(GlobalContext)
console.log(value); // { test: "这是一个测试数据"}

1. 举个栗子

/*
 * @Author: HuangBingQuan bingquan111@qq.com
 * @Date: 2022-11-23 15:08:14
 * @LastEditors: HuangBingQuan bingquan111@qq.com
 * @LastEditTime: 2022-12-01 01:58:11
 * @FilePath: /react_test/src/02-advanced/06-中间人模式.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component, useContext, useEffect, useState } from 'react'
import axios from 'axios';
import './css/communinaion.scss'

const GlobalContext = React.createContext() // 创建供应商

const FilmItem = ({ name, poster, grade, synopsis })=> {
  const value = useContext(GlobalContext) // 接收供应商提供的数据

  return (
    <div className='filmitem' onClick={(e)=> {
      // console.log(value);
      value.changeCon(synopsis)
      // callback(synopsis)
    }}>
      <img src={poster} alt={name}></img>
      <h4>{name}</h4>
      <div>观众评分：{grade}</div>
    </div>
  )
}

const FilmDetail = ()=> {
  const value = useContext(GlobalContext) // 接收供应商提供的数据
  return <div className='filmdetail'>{value.con}</div>
}
export default function App() {
  const [filmList, setFilmList] = useState([]);
  const [con, setCon] = useState("");
  const getData = ()=> {
    return async()=> {
      let { data: { data: { films } } } = await axios({ url: "/test.json", method: "get" });
      console.log( films );
      setFilmList(films)
    }
  }
  useEffect(()=> {
    getData()();
  }, [])
  return (
    // 供应商
    <GlobalContext.Provider value={{
      name: "zhangsan",
      age: 29,
      con: con,
      changeCon: (val)=> {
        console.log(val);
        setCon(val)
      }
    }}>
      <div>
        { 
          filmList.map(item =>
            <FilmItem key={item.filmId} {...item} callback={(value)=> {
              setCon(value) 
            }}></FilmItem>
          )
        }
        <FilmDetail></FilmDetail>
      </div>
    </GlobalContext.Provider>
  )
}