资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/React context

React context

melody_lql / 3101人阅读

摘要：介绍是的一个重要属性，但是到目前为止，这个属性在正式的文档里面还没有对它进行正式介绍，在将会正式发布这个属性。指定的传递给子组件的属性需要先通过来指定，不然会产生错误。这样可以减少组件之间的直接依赖关系。

介绍

Contexts 是React的一个重要属性，但是到目前为止，这个属性在正式的文档里面还没有对它进行正式介绍，在 reactv0.1.4将会正式发布这个属性。下面先来介绍一下它的使用方式。

React.withContext

React.withContext 会执行一个指定的上下文信息的回调函数,任何在这个回调函数里面渲染的组件都有这个context的访问权限。

</>复制代码 
  1. var A = React.createClass({
  2.     contextTypes: {
  3.         name: React.PropTypes.string.isRequired,
  4.     },
  5.     render: function() {
  6.         return 
    My name is: {this.context.name}
    ;
  7.     }
  8. });
  9. React.withContext({"name": "Jonas"}, function () {
  10.     // Outputs: "My name is: Jonas"
  11.     React.render(, document.body);
  12. });

任何想访问context里面的属性的组件都必须显式的指定一个contextTypes 的属性。如果没有指定改属性，那么组件通过 this.context 访问属性将会出错。

如果你为一个组件指定了context，那么这个组件的子组件只要定义了contextTypes 属性，就可以访问到父组件指定的context了。

</>复制代码 
  1. var A = React.createClass({
  2.     render: function() {
  3.          return ;
  4.     }
  5. });
  6. var B = React.createClass({
  7.     contextTypes: {
  8.         name: React.PropTypes.string
  9.     },
  10.     render: function() {
  11.         return 
    My name is: {this.context.name}
    ;
  12.     }
  13. });
  14. React.withContext({"name": "Jonas"}, function () {
  15.    React.render(, document.body);
  16. });

为了减少文件的引用，你可以为contextTypes 放到一个minx 中，这样 用到的组件引用这个 minx 就行了。

</>复制代码 
  1. var ContextMixin = {
  2.     contextTypes: {
  3.         name: React.PropTypes.string.isRequired
  4.     },
  5.     getName: function() {
  6.         return this.context.name;
  7.     }
  8. };
  9. var A = React.createClass({
  10.     mixins: [ContextMixin],
  11.     render: function() {
  12.          return 
    My name is {this.getName()}
    ;
  13.     }
  14. });
  15. React.withContext({"name": "Jonas"}, function () {
  16.     // Outputs: "My name is: Jonas"
  17.     React.render(, document.body);
  18. });
getChildContext

和访问context 的属性是需要通过 contextTypes 指定可访问的 元素一样。getChildContext 指定的传递给子组件的属性需要先通过 childContextTypes 来指定，不然会产生错误。

</>复制代码 
  1. // This code *does NOT work* becasue of a missing property from childContextTypes
  2. var A = React.createClass({
  3.     childContextTypes: {
  4.          // fruit is not specified, and so it will not be sent to the children of A
  5.          name: React.PropTypes.string.isRequired
  6.     },
  7.     getChildContext: function() {
  8.          return {
  9.              name: "Jonas",
  10.              fruit: "Banana"
  11.          };
  12.     },
  13.     render: function() {
  14.          return ;
  15.     }
  16. });
  17. var B = React.createClass({
  18.     contextTypes: {
  19.         fruit: React.PropTypes.string.isRequired
  20.     },
  21.     render: function() {
  22.         return 
    My favorite fruit is: {this.context.fruit}
    ;
  23.     }
  24. });
  25. // Errors: Invariant Violation: A.getChildContext(): key "fruit" is not defined in childContextTypes.
  26. React.render(, document.body);

假设你的应用程序有多层的context。通过withContext 和 getChildContext 指定的context元素都可以被子组件引用。但是子组件是需要通过 contextTypes 来指定所需要的context 元素的。

</>复制代码 
  1. var A = React.createClass({
  2.     childContextTypes: {
  3.          fruit: React.PropTypes.string.isRequired
  4.     },
  5.     getChildContext: function() {
  6.          return { fruit: "Banana" };
  7.     },
  8.     render: function() {
  9.          return ;
  10.     }
  11. });
  12. var B = React.createClass({
  13.     contextTypes: {
  14.         name: React.PropTypes.string.isRequired,
  15.         fruit: React.PropTypes.string.isRequired
  16.     },
  17.     render: function() {
  18.         return 
    My name is: {this.context.name} and my favorite fruit is: {this.context.fruit}
    ;
  19.     }
  20. });
  21. React.withContext({"name": "Jonas"}, function () {
  22.     // Outputs: "My name is: Jonas and my favorite fruit is: Banana"
  23.     React.render(, document.body);
  24. });

context 是就近引用的，如果你通过withContext 指定了context元素，然后又通过 getChildContext 指定了该元素，该元素的值将会被覆盖。

</>复制代码 
  1. var A = React.createClass({
  2.     childContextTypes: {
  3.          name: React.PropTypes.string.isRequired
  4.     },
  5.     getChildContext: function() {
  6.          return { name: "Sally" };
  7.     },
  8.     render: function() {
  9.          return ;
  10.     }
  11. });
  12. var B = React.createClass({
  13.     contextTypes: {
  14.         name: React.PropTypes.string.isRequired
  15.     },
  16.     render: function() {
  17.         return 
    My name is: {this.context.name}
    ;
  18.     }
  19. });
  20. React.withContext({"name": "Jonas"}, function () {
  21.     // Outputs: "My name is: Sally"
  22.     React.render(, document.body);
  23. });
总结

通过context传递属性的方式可以大量减少 通过显式的通过 props 逐层传递属性的方式。这样可以减少组件之间的直接依赖关系。

GPU云服务器 云服务器 contexts Context 获取context stacking-context

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85711.html

相关文章

  • React context 丢失问题

    摘要：丢失问题文本是为了说清目前的机制是而不是我们以为的机制，并说明这两者的区别。虽然明白了原理，但是问题并没有解决。上下文注意这里是，需要执行接受回调函数，回调函数中的内容为实测可以成功拿到。 React context 丢失问题 文本是为了说清react context目前的机制是owner context 而不是我们以为的parent context 机制，并说明这两者的区别。...

    Seay 评论0 收藏0

  • 聊一聊我对 React Context 的理解以及应用

    摘要：假如以的作用域链作为类比，组件提供的对象其实就好比一个提供给子组件访问的作用域，而对象的属性可以看成作用域上的活动对象。所以，我借鉴了作用域链的思路，把当成是组件的作用域来使用。 前言 Context被翻译为上下文，在编程领域，这是一个经常会接触到的概念，React中也有。 在React的官方文档中，Context被归类为高级部分(Advanced)，属于React的高级API，但官方...

    chengjianhua 评论0 收藏0

  • React源码解析之React.createContext()

    摘要：我们只希望最多有两个并发渲染器主要和次要主要和次要。辅助渲染器将自己的的存储在单独的字段中。 showImg(https://segmentfault.com/img/remote/1460000019911593); 前言：由于childContext在React17中会被废弃，所以不去分析它了，主要是新 API— —createContext()的讲解 一、React.create...

    booster 评论0 收藏0

  • [ 一起学React系列 -- 4 ] 透传的Context

    摘要：官方对的介绍是意思就是提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递。这也是基于重要物证哈哈实例使用学习技术最终是要有产出的。依然被视作一个组件，不过不同的是它的子组件必须是一个方法并且该方法接收当前对象并最终返回一个节点。 抛转引玉 通过上一篇的科普我们知道如果父节点需要向子节点传递数据，那么就得通过Props来实现；那么摆在我们眼前的就有一个问题了：现有N个节点并且它...

    firim 评论0 收藏0

  • 重拾React: Context

    前言 　　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励，希望大家多多关注呀！好久已经没写React，发现连Context都发生了变化，忽然有一种村里刚通上的网的感觉，可能文章所提及的知识点已经算是过时了，仅仅算作是自己的学习体验吧， Context 　　对于React开发者而言，Context应该是一个不陌生的概念，...

    曹金海 评论0 收藏0

发表评论

登陆后可评论

0条评论

melody_lql

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
UCloud （优刻得科技股份有限公司）

UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

Copyright © 2012-2025 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜
<