首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

怎样使用React Context API

翻译:疯狂的技术宅 原文:https://www.toptal.com/react/react-context-api React Context API 【https://reactjs.org/docs...本文将向你展示两个基本的 Web 商店应用程序,一个使用了 Context API 进行构建,另一个则不用。 这个新的API解决了一个严重的问题 ——prop drilling。...两个状态流的示例:一个使用React Context API,另一个不用 重构非常简单 —— 我们不必对组件的结构进行任何修改。...Redux 最大的优势之一就是你的应用可以拥有一个可以从任何组件访问的中央存储。而使用新的 Context API,默认情况下你已经有了这个功能。...如果你只使用 Redux 的这一个功能,现在可以使用 Context API 替换它,并避免在不使用第三方库的情况下进行 prop drilling。

93120

使用 react Context API 的正确姿势

本文介绍一下 React 中常见的 Context API 的使用方式。在使用 Context API 之前,我们还需要知道为啥要使用。...首先要引入 React 内置的 React Context API ? 最后创建 consumer ? 创建 Provider 增加一个名为 ToggleContext.js 的文件作为上下文?...,里头定义一系列需要跨层级使用的 state 和 function 1import React, { createContext } from 'react' 2 3// 1....,直接导出 Context.Consumer 给外部使用即可 使用 Provider ToggleProvider 组件包装了一系列共享的状态,为了使用这些组件的状态,我们直接将其添加到 App 组件中...Context: 通过 createContext 创建一个名为 color 的 context 通过 Provider 的 value 属性传值 通过 Consumer 的 props 接收值 1import

1.6K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    React 使用Context传递参数

    尽量不要使用Context React在16.x版本之后算是将Context调整为正式接口,不过还是建议如果组件之间传递数据的层次不算太深,尽量不要使用Context。...Context需要注意: 由于 Provider 和 Consumer都是返回一个组件,所以我们最好设定一个默认的context.value,以防止出现渲染错误。...如果未定义子组件的 contextTypes ,那么调用  context 只能得到一个空对象。 父子组件耦合 Context特性还可以让开发人员快速构建父组件与子组件之间的联系。...React提供一个更新Context的接口,但是它会从根本上破坏React的结构所以建议不要使用他。 getChildContext 在state或props变更时会被调用。...,如果一个context在组件变更时才产生,接下来如果中间某个组件的 shouldComponentUpdate方法返回fasle值,那么后续组件无法从context中得到任何值。

    1.6K40

    超性感的React Hooks(八)useContext

    context能够让数据直达需要它的那一个子组件。如上图右。 1 React提供了一个名为useContext的组件,能够让我们在hooks组件中使用context的能力。...跟大家分享一下如何使用context。 首先,我们要自定义一个顶层组件,Provider。 使用React提供的api createContext能够创建一个context对象。...import React, { createContext } from 'react'; // 因为在别的组件中使用useContext时, // 需要用到这个context对象,因此对外抛出 export...对象,其他组件使用时,多次使用useContext分别订阅即可。...读过react-redux源码的同学应该知道,在react-redux内部,也是使用context来解决组件共享状态的问题。如图 ? 下一篇文章跟大家分享一些使用context的实践案例。

    1.1K20

    超性感的React Hooks(九)useContext实践

    5.合理处理组件的状态,该状态仅在该组件使用,则无需定义在父级 组件的拆分,是考验我们React水平的重要标准,但这不是通过一篇两篇文章就能够马上掌握的技能,因此多给自己一点耐心,多从实践中反复思考总结是非常好的进步方式...还需要显示未读的状态。实现如下: import React, {useContext, useState} from 'react'; import {ctx, Provider} from '....import React, { useState, useEffect, useContext } from 'react'; import {zhLastFeedApi, Feed} from '....import React, { useState, useEffect, useContext } from 'react'; import {topViewApi} from '....import React, { useContext } from 'react'; import { List, Stepper } from 'antd-mobile'; import {ctx}

    1.4K20

    使用 TypeScript 优化 React Context:综合指南

    它是一个多功能工具,可以显着增强React应用程序的可扩展性和可维护性。在文中,我们将探索如何充分发挥React Context 的潜力,确保您的应用程序不仅高效,而且可维护且易于使用。...设置 React Context和 TypeScript: 在本节中,我们将简单描述一下您使用 TypeScript 创建基本 React 应用程序并建立主题管理Context的完成过程。...使用 Vite 创建一个新的 React 应用程序: 首先,我们将使用 Vite 创建一个新的 React 应用程序。...在不使用 useMemo 的组件中使用 ThemeContext 现在我们已经建立了一个基本的 React 应用程序,可以为主题管理创建一个新的 React Context。...通过 useMemo 在组件中使用 ThemeContext 现在我们已经建立了基本的 React Context,可以在组件中使用它了。

    31040

    TS_React:Hook类型化

    类型化 useContext 为context提供类型是非常容易的。首先,为context的「值」创建一个类型,然后把它作为一个「泛型」提供给createContext函数。...上述实现的一个问题是,就TypeScript而言,context的值可以是未定义的。也就是在我们使用context的值的时候,可能取不到。此时,ts可能会阻拦代码的编译。...如何解决context的值可能是未定义的情况呢。我们针对context的获取可以使用一个「自定义的hook。」...export const useAuthContext = () => { const context = useContext(AuthContext); if (context === undefined...) { throw new Error('useAuthContext必须在AuthContext上下文中使用'); } return context; }; 通过「类型保护」,使得我们在使用

    2.4K30

    react学习(十) React 中的 context

    如果在你的项目中使用主题,基本是每个组件都需要;或者你在项目中使用多语言,也是每个组件都需要支持,这都是典型的可以通过 context 操作的例子使用示例我们实现一个多个组件,共享同一个颜色的示例,通过按钮点击切换颜色...都是 context 类型,小伙伴们可自行打印官方的库查看export const REACT_CONTEXT = Symbol('react.context')React 中有个 createContext...方法:// src/react.js// 我们的写法效仿的是我们使用官方库打印出来的结果function createContext() { const context = { $$typeof...: REACT_CONTEXT, _currentValue: undefined, // 值是绑定在 context 中的 _currentValue 属性上 } // 这里使用了递归引用,...如果使用的组件在不同的页面,我们需要把 ColorContext 进行导出,文件中自行引入。

    2.4K30

    关于react中的context

    一、context有什么用 当我们使用props进行组件中的数据传递时,假如祖先级组件的数据要传递至孙子级,这种情况的话,我们需要将祖先级别组件的属性通过props传递至父组件属性,再通过父组件的属性中的...而我们使用context,则不需要使用props进行一层一层传递。...只需要在祖先元素中使用Provider组件最外层进行包裹,在Provider的value属性中进行传值,然后需要用到的子组件就可以以最外层Consumer组件包裹,在Consumer的Children里的函数参数中进行获取...二、学习网址 https://react.docschina.org/docs/context.html#%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8-context...三、如何使用context 我们最好创建一个js文件例如context.js文件,在文件中如下引入 import {createContext} from 'react' const {Provider

    1.1K20

    解读React的新Context API

    什么是Context Api 本文的所涉及的React版本为16.8.6; Context provides a way to pass data through the component tree...Context Api是React提供的能够在全局之间共享数据的一个Api, 原有的React进行数据的通信的方式是通过props进行数据传递, 而Context提供了一个在不需要props的情况下,...这个过程中可能组件B和组件D不需要这些数据, 如果将来有组件插入到这个中间, 这个组件也需要传递props,就显得比较麻烦, 需要我们可以考虑使用Context来进行传递信息....新Context API的特点 采用声明式的写法 可以跨组件进行通信, 顶层组件提供数据, 目标组件订阅数据 不受中间组件的shouldComponentUpdate返回false的影响, 使得组件的变化可控...> ) } } 新的Context Api 的组成如下: React.createContext 初始化一个Context Provider

    1.5K00

    react源码之深度理解React.Context

    开篇在 React 中提供了一种「数据管理」机制:React.context,大家可能对它比较陌生,日常开发直接使用它的场景也并不多。...二、使用下面我们以 Hooks 函数组件为例,展开介绍 Context 的使用。2.1、React.createContext首先,我们需要创建一个 React Context 对象。...const value = useContext(Context);useContext 接收一个 context 对象(React.createContext 的返回值),返回该 context 的当前值...context;}尽管在这里我们只看到要返回一个对象,却看不出别的名堂,只需记住它返回的对象结构信息即可,我们接着往下看。...提供给 Context.Provider 的 value 对象地址不会发生变化,这使得子组件中使用了 useSelector -> useContext,但不会因顶层数据而进行重渲染。

    1.2K30
    领券