React中Context基础知识_组件入门知识

何时使用contextContext 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。// Context 可以让我们无须明确地传遍每一个组件,就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context(“light”为默认值)。
const ThemeContext = React.cre

React中Context基础知识

何时使用context

Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。

React中Context基础知识_组件入门知识

// Context 可以让我们无须明确地传遍每一个组件,就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context(“light”为默认值)。
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
    // 无论多深,任何组件都能读取这个值。
    // 在这个例子中,我们将 “dark” 作为当前的值传递下去。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 读取当前的 theme context。
  // React 会往上找到最近的 theme Provider,然后使用它的值。
  // 在这个例子中,当前的 theme 值为 “dark”。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

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

API

React.createContext

创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

只有当组件所处的树中没有匹配到 Provider 时,其 defaultValue 参数才会生效。这有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意:将 undefined 传递给 Provider 时,消费组件的 defaultValue 不会生效。

const MyContext = React.createContext(defaultValue);

Context.Provider

每个 Context 对象都会返回一个 Provider React 组件,它允许消费组件订阅 context 的变化。

Provider 接收一个 value 属性,传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用,里层的会覆盖外层的数据。

当 Provider 的 value 值发生变化时,它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数,因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

通过新旧值检测来确定变化,使用了与 Object.is 相同的算法。

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

Context.Consumer

这需要函数作为子元素(function as a child)这种做法。这个函数接收当前的 context 值,返回一个 React 节点。传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider,value 参数等同于传递给 createContext() 的 defaultValue。

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>
海计划公众号
(0)
上一篇 2020/03/30 07:13
下一篇 2020/03/30 07:13

您可能感兴趣的内容

  • iview-admin多环境配置打包基础知识入门_iview零基础入门

    前言由于目前我在公司已经搭建了Jenkins来进行一键系统发布,同时存在测试和生产两套环境。但是目前iview-admin是不支持的,只好自己进行改造了。PS:iview-admin版本为2.1.0改造方案iview-admin 2.1.0比起iview-admin 2.0.0,移除了config目录且将vue-cli升级到3.0。所以可以使用vue-cli

    2020/03/31
  • 百度传课指南攻略网络课程 前端 网络教育

    百度传课基础入门 官方网址:https://chuanke.baidu.com/course/_%E5%89%8D%E7%AB%AF_____.html 简介描述:网络课程 前端 …

    2020/03/05
  • 程序员请注意:领导有这四个表现请做好离职准备教程视频_离职菜鸟攻略

    互联网公司最容易发生“死海效应”,技术好人员的都离开公司,剩下技术一般人员最后成为领导层,很多程序员开始抱怨领导不懂技术,如果领导有一下这四个表现请各位程序员做好离职准备,有能力有技术不怕找不到工作。第一个问题,如果平时你和上级领导沟通比较少,也许是你觉得安排工作直接完成就可以了,和领导讨论技术方面领导有不懂技术,但是你又不汇报开发过程,觉得领导一般都是看结

    2020/03/24
  • 如何写出优雅耐看的JavaScript代码?攻略教程_代码基础教程

    前言在我们平时的工作开发中,大多数都是大人协同开发的公共项目;在我们平时开发中代码codeing的时候我们考虑代码的可读性、复用性和扩展性。干净的代码,既在质量上较为可靠,也为后期维护、升级奠定了良好基础。我们从以下几个方面进行探讨:变量1、变量命名一般我们在定义变量是要使用有意义的词汇命令,要做到见面知义//bad code
    const yyyymmdst

    2020/03/24
  • ES6 Promise实战练习题目基础入门_Promise小白知识

    俗话说得好,一动不动是王八,上一篇文章学习了那么久Promise,是时候大显身手了!基础题题一const promise = new Promise((resolve, reject) => {console.log(1)resolve()console.log(2)
    })
    promise.then(() => {console.log(3)
    })
    cons

    2020/03/23
  • 为你的 React 应用创建路由攻略教程_路由小白攻略

    常规路由通常,当用户在浏览器中键入 URL 时,会向服务器发送 HTTP 请求,然后服务器检索 HTML 页面。对于每个新URL,用户会被重定向到新的 HTML 页面。你可以通过参考下图来更好地理解路由的工作原理。为什么需要 React 路由?将单页应用限制为单一视图并不适用于 Facebook、Instagram 等流行的社交媒体网站,这些网站现在使用 R

    2020/03/30
  • 理解Vue.mixin,利用Vue.mixin正确的偷懒菜鸟教程网_mixin入门基础教程

    关于Vue.mixin在vue官方文档中是这么解释的:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。我们的理解:Vue.mixin给我们提供了一种混入Vue实例的方法,创建了混入对象之后,我们自定义的方法或者变量可

    2020/03/24
  • 原生JS实现一个瀑布流插件菜鸟教程网_瀑布流小白指南

    瀑布流布局中的图片有一个核心特点 —— 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。基础功能实现首先我们定义好一个有 20 张图片的容器,#waterfall {position: relative;}.waterfall-box {floa

    2020/03/21
  • JS常用函数原理的实现基础知识入门_函数小白指南

    本文针对目前常见的面试题,实现了相应方法的核心原理,部分边界细节未处理。后续也会持续更新,希望对你有所帮助。1、实现一个call函数 // 思路:将要改变this指向的方法挂到目标this上执行并返回Function.prototype.mycall = function (context) { if (typeof this !== ‘function‘

    2020/03/29
  • Curler入门基础知识_在线网站状态监测工具

    Curler入门基础知识 官方网址:https://curler.amixr.io/ 简介描述:在线网站状态监测工具 Curler是一款在线免费的超简单网站监测工具,,号称在30秒…

    2020/03/10
  • switchery使用帮助_iOS 7 风格的复选框开关

    switchery使用帮助 官方网址:http://abpetkov.github.io/switchery/ GitHub:https://github.com/abpetkov…

    2020/03/06
  • this指针小白入门_this小白攻略

    this指针小白入门 this指针 javascript中this指针是动态的,主要是根据当前函数执行上下文及函数调用方式决定的. 以函数方法调用时this指针全局或严格模式中为u…

    2020/03/20
  • 拼图.pintuer菜鸟知识跨屏响应式布局前端开发CSS框架

    拼图.pintuer基础入门 官方网址:http://www.pintuer.com/ 简介描述:跨屏响应式布局前端开发CSS框架 拼图是优秀的响应式前端CSS开源框架,国内前端框…

    2020/03/05
  • 为什么不应该使用Markdown来写文档小白指南_Markdown入门基础知识

    Markdown是互联网上最普遍使用的轻量级标记语言。对于写博客和评论这类的任务,用Markdown很棒。不过最近技术社区的人员开始用它来写文档。下面我列出一些反对使用Markdown的观点,希望能帮助你决定是否适合使用Markdown。如果你在考虑使用Markdown,我希望你也可以关注下Asciidoctor 和Sphinx,我发现用它们写文档更好。人们

    2020/04/03
  • anyupload小白常识_一个极度纯净的上传插件

    anyupload小白常识 GitHub:https://github.com/dianbaer/anyupload 简介描述:一个极度纯净的上传插件 anyupload是一个极度…

    2020/03/11
  • html DOM简介基础入门_dom小白基础

    今天我们将了解WEB编程中一个重要的概念DOM(Document Object Model)文档对象模型,它帮助我们使用JavaScript(或其他编程语言)操纵文档。一   DOM是什么DOM是HTML和XML文档的编程接口。它不同于把html源码在浏览器窗口当做页面或使用文本编辑器当做纯文本展示,它是对文档的另一种结构化的表述。DOM把文档的所有节点都解

    2020/03/26