zoukankan      html  css  js  c++  java
  • 如何使用Context

    一、Context

      Context 提供了一个无需为每层组件手动添加 props就能在组件树间进行数据传递的方法。

    二、设计目的

      Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。

    三、使用场景

      Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用,因为这会使得组件的复用性变差

    四、使用Context三步骤

      1、创建共享的Context

      官方API:https://zh-hans.reactjs.org/docs/context.html#reactcreatecontext

    const MyContext = React.createContext(defaultValue);

      2、使用Provider提供创建的Context 的默认值值

      官方API:https://zh-hans.reactjs.org/docs/context.html#reactcreatecontext

    <MyContext.Provider value={/* 某个值 */}>

      3、使用useContext获取Context的值

      官方API:https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext

    const value = useContext(MyContext);

    五、使用Context的栗子

      1、创建一个父组件,并创建共享Context

    import React from 'react';
    import ChildOne from './ChildOne';
    let countValue = {
      count1: 1,
      count2: 2,
    }
    //创建一个共享的context,并导出,供子组件使用
    export const CountValueContext = React.createContext(countValue);
    export default () => {
      return (
        // 使用 Provider 提供 CountValueContext 的值,Provider所包含的子树都可以直接访问CountValueContext的值
        <CountValueContext.Provider value={countValue}>
          <ChildOne />
        </CountValueContext.Provider>
      );
    }

      2、创建一个子组件,使用共享Context

    import React, { useContext } from 'react';
    import { CountValueContext } from './index'
    import ChildTwo from './ChildTwo';
    export default () => {
      //使用共享 Context
      const countValue: any = useContext(CountValueContext);
      return (
        <div>
          <p>第一个组件获取到的count值:{countValue.count1}</p>
          <ChildTwo />
        </div>
      );
    }

      3、在子组件中再创建一个子组件,使用共享Context

    import React, { useContext } from 'react';
    import { CountValueContext } from './index'
    export default () => {
      //使用共享 Context
      const countValue: any = useContext(CountValueContext);
      return (
        <div>
          <p>第二个组件获取到的count值:{countValue.count2}</p>
        </div>
      );
    }

      4、结果如下

      

      通过context,能在不同的组件拿到countValue不同的值。

  • 相关阅读:
    Android--多线程之Handler
    Android--Service之基础
    Android--UI之Fragment
    Android--多线程之图文混排
    python常用模块
    python应用之socket编程
    网络编程socket理论一
    pycharm Launching unittests with arguments
    python字符串格式化
    python数据类型之三
  • 原文地址:https://www.cnblogs.com/minorf/p/12980774.html
Copyright © 2011-2022 走看看