React Context API一览

Cruise_Chan 发布于2019-08-22 18:07 / 1846人阅读

摘要：若后者存在于前者的子组件中，那么无论后者处于前者子组件的哪个位置，前者可以向后者直接提供数据。每一个商品都有一个用于显示购物车中该件商品的数量，同时还有一个按钮用来执行存在于中的回调函数。这就意味着会随着的改变而改变，也会随之收到一个新的。

文章翻译自Seth Corker的A look at the React Context API，并且不是百分之百原文翻译，一些译者认为并不重要的部分被省略了，同时也加入一些原文内未出现的解释性文字。如果想要阅读原文，请转至https://medium.com/front-end-...

React 16带来了许多非常棒的新功能（虽然异步渲染还是不见踪影），新的Context API便是其中之一。

什么是Context API

Context API包含两个组件，和。若后者（Consumer）存在于前者(Provider)的子组件（children）中，那么无论后者处于前者子组件的哪个位置，前者可以向后者直接提供数据。

应该如何使用Context API

我（作者）制作了一个购物车样例来展示Context API是如何工作的，源码在https://github.com/Darth-Knop...。

上图显示了商品是如何加入购物车或从购物车中移除的。每一个商品都有一个Consumer用于显示购物车中该件商品的数量，同时还有一个按钮用来执行存在于Provider中的onAddToCart回调函数。

的Provider处于上层组件中，同时商品信息列表也存于的state里。这就意味着Provider会随着state的改变而改变，Consumer也会随之收到一个新的value。

我们在多带带的文件里创建，并且赋予其默认值。这样我们就可以在任何组件中引用它的Provider和Consumer。

import React from "react";

export const CartContext = 
React.createContext({
  items: []
});

现在我们可以如下图一样，在Consumer中使用value内的值：

获得完整样例源代码，请参阅。

是否该使用Context API

使用新的Context API可以为在多层嵌套的多个组件中使用共有数据带来极大的便利。React官方文档中也推荐使用Context API储存全局变量，例如当前登入用户，主题样式或是首选语言。使用Context API，可以减少多层prop-drilling的使用或是简化redux state结构。

是否使用Context API取决于程序的复杂程度，在大多数情况下，我（作者）还是推荐使用Redux。毕竟Redux是一个具有成熟生态圈的第三方库，其众多的中间件可以为我们解决许多开发中遇到的困难。在复杂度较小的程序中，Context API可以带来极大的便利。

关于Context API更多更详细的介绍，请参阅React官方文档。

云服务器 GPU云服务器 Context 获取context stacking-context Android全局Context

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

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

比原链Bytom错误码一览

摘要：错误编号内容注释非比原标准错误请求超时非法的请求体为网络错误编号内容注释区块链网络类型不匹配是签名相关的错误编号内容注释需要签名的个数超过实际需求签名的个数签名格式错误缺少主公钥主公钥重复为交易相关的错误构建交易错误编号内容注释资产余额不 0XX API错误编号内容注释 BTM000 Bytom API Error 非比原标准错误 BTM001 Request t...

Nosee 2019-06-27 18:49 评论0 收藏0
Redux专题：实用

摘要：在英文中的意思是有效载荷。有一个动作被发射了顾名思义，替换，这主要是方便开发者调试用的。相同的输入必须返回相同的输出，而且不能对外产生副作用。怎么办呢开发者得手动维护一个订阅器，才能监听到状态变化，从而触发页面重新渲染。本文是『horseshoe·Redux专题』系列文章之一，后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的个人博客获得无与伦比的阅读体...

Big_fat_cat 2019-08-23 12:04 评论0 收藏0
一览js模块化：从CommonJS到ES6

摘要：模块化规范有的模块系统。规范是服务器端模块的规范，由推广使用。对于依赖的模块，是提前执行，是延迟执行。浏览器厂商和都宣布要原生支持该规范。它将逐渐取代和规范，成为浏览器和服务器通用的模块解决方案。本文由云+社区发表模块化是指把一个复杂的系统分解到一个一个的模块。模块化开发的优点： (1)代码复用，让我们更方便地进行代码管理、同时也便于后面代码的修改和维护。 (2)一个单独的文件就...

antz 2019-08-23 14:15 评论0 收藏0
为什么你应该放弃老的React Context API改用新的Context API

摘要：发布了新的，并且已经确认了将在下一个版本废弃老的。所以大家更新到新的是无可厚非的事情。 React16.3发布了新的Context API，并且已经确认了将在下一个版本废弃老的Context API。所以大家更新到新的Context API是无可厚非的事情。而这篇文章会从原理的角度为大家分析为什么要用新的API--不仅仅是因为React官方要更新，毕竟更新了你也可以用16版本的Reac...

william 2019-08-23 12:08 评论0 收藏0
React 新 Context API 在前端状态管理的实践

摘要：本文转载至今日头条技术博客众所周知，的单向数据流模式导致状态只能一级一级的由父组件传递到子组件，在大中型应用中较为繁琐不好管理，通常我们需要使用来帮助我们进行管理，然而随着的发布，新成为了新的选择。本文转载至：今日头条技术博客showImg(https://segmentfault.com/img/bVbiNJO?w=900&h=383);众所周知，React的单向数据流模式导致状态...

wing324 2019-08-02 11:51 评论0 收藏0