React: Context 的几种用法

最新推荐文章于 2024-06-15 19:02:23 发布

前端卡卡西呀

最新推荐文章于 2024-06-15 19:02:23 发布

阅读量123

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/RedaTao/article/details/132251965

版权

/*
 * @Desc: Context 的几种用法
 * @Author: Reda
 * @Date: 2023-08-12 17:48:17
 */

import React, { Component, createContext, useContext } from "react";

const AppContext = createContext();

/**
 * 1. Provider 和 Consumer 组合使用， Consumer中通过函数传参的形式 传值
 * 缺点：不易理解，多层嵌套中 不推荐
 */
class Head extends Component {
  render() {
    return (
      <AppContext.Consumer>{(value) => <div>{value}</div>}</AppContext.Consumer>
    );
  }
}

/**
 * 2. 结合Class组件的 contextType属性
 * Class组件的 contextType 属性可以赋值为 由React.createContext() 创建的Context对象
 * 此属性可以让你使用 this.context 来获取最近 Context上的值
 * 可以在 任何生命周期中访问到 this.context, 包括 render 函数
 */
class Content extends Component {
  static contextType = AppContext;

  render() {
    const value = this.context;

    return <div>{value}</div>;
  }
}

/**
 * 3. 函数组件 hooks 方式
 * 最简单
 */
const Foot = (params) => {
  const value = useContext(AppContext);
  return <div>{value}</div>;
};

class ContextUseDemo extends Component {
  render() {
    return (
      <AppContext.Provider value="Hello word!">
        <Head />
        <Content />
        <Foot />
      </AppContext.Provider>
    );
  }
}

export default ContextUseDemo;