The React documentation has been warning us for a long time now that context shouldn't be used and that the API is unstable. Well, with the release of React 16.3, we're finally getting a stable context API and what's even better is that it has received a makeover and the dev experience is fantastic! In this lesson, we'll look at an example app that passes props down several levels deep into the component tree and replace all that prop drilling with the new context API. We'll see how to create a Provider and a Consumer, how to use them in the code and we'll take a look at how the default properties that get passed into createContext come into play.

A condition that we need 'context' API is to avoid pass Props all the way down to the component tree.

For example:

So porps are passed all the way down from

  PageWrapper

-- ProfileWrapper

      -- ProfileDetails

New context API looks like this:

1. Create an Context service:

import { createContext } from "react";

const ProfileContext = createContext({
firstName: "Sally",
lastName: "Anderson"
}); export const ProfileProvider = ProfileContext.Provider; export const ProfileConsumer = ProfileContext.Consumer;

'createContext' takes an default value.

2. Wrap the top level component into Provider:

import { ProfileProvider } from "./ProfileContext";

  render() {
return (
<ProfileProvider value={this.state.profile}>
<PageWrapper />
</ProfileProvider>
);
}

If you want to just use default value, don't provide the Provider... this approach is a little bit strange.

  render() {
return (
<PageWrapper /> // may change in release
);
}

3. Remove all the props passed down.

4. In the component which do need context, use Consumer, Cunsumer takes a function as child.

import React from "react";
import { ProfileConsumer } from "./ProfileContext"; export const ProfileDetails = props => (
<ProfileConsumer>
{context => (
<div>
<div>
<strong>First name:</strong> {context.firstName}
</div>
<div>
<strong>Last name:</strong> {context.lastName}
</div>
</div>
)}
</ProfileConsumer>
);

[React] Use the new React Context API的更多相关文章

  1. React 16.3来了:带着全新的Context API

    文章概览 React在版本16.3-alpha里引入了新的Context API,社区一片期待之声.我们先通过简单的例子,看下新的Context API长啥样,然后再简单探讨下新的API的意义. 文中 ...

  2. [译]迁移到新的 React Context Api

    随着 React 16.3.0 的发布,context api 也有了很大的更新.我已经从旧版的 api 更新到了新版.这里就分享一下我(作者)的心得体会. 回顾 下面是一个展示如何使用旧版 api ...

  3. React 新 Context API 在前端状态管理的实践

    本文转载至:今日头条技术博客 众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较为繁琐不好管理,通常我们需要使用Redux来帮助我们进行管理,然而随着Re ...

  4. 简单整理React的Context API

    之前做项目时经常会遇到某个组件需要传递方法或者数据到其内部的某个子组件,中间跨越了甚至三四层组件,必须层层传递,一不小心哪层组件忘记传递下去了就不行.然而我们的项目其实并没有那么复杂,所以也没有使用r ...

  5. React Context API

    使用React 开发程序的时候,组件中的数据共享是通过数据提升,变成父组件中的属性,然后再把属性向下传递给子组件来实现的.但当程序越来越复杂,需要共享的数据也越来越多,最后可能就把共享数据直接提升到最 ...

  6. 10分钟学会React Context API

    Create-react-app来学习这个功能: 注意下面代码红色的即可,非常简单. 在小项目里Context API完全可以替换掉react-redux. 修改app.js import React ...

  7. React 全新的 Context API

    Context API 可以说是 React 中最有趣的一个特性了.一方面很多流行的框架(例如react-redux.mobx-react.react-router等)都在使用它:另一方面官方文档中却 ...

  8. 手写一个React-Redux,玩转React的Context API

    上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库 ...

  9. React Hooks & Context API

    React Hooks & Context API responsive website https://reactjs.org/docs/hooks-reference.html https ...

随机推荐

  1. 一个简单的推断抢购时间是否到达的js函数

    原型函数,功能非常easy,找到时钟的id,计算数值.到达抢购时间时运行任务. function nwt() {var str=$('#deal_expiry_timer_e3cdcd2a').tex ...

  2. MySQL官方文档

    http://dev.mysql.com/doc/refman/5.7/en/index.html 没有比这更好的MySQL文档了,省的去买书了

  3. 构建基于Javascript的移动CMS——生成博客(二).路由

    在有了上部分的基础之后.我们就能够生成一个博客的内容--BlogPosts Detail.这样就完毕了我们这个移动CMS的差点儿基本的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情 ...

  4. MYSQL Training: MySQL I

    让以admin身份登录.源代码: 非常easy的注入 在username输入 admin' OR '1'='1 OK.

  5. 0x08 总结与练习

    1:前面已经搞好了. 2:poj2965 这种开关问题一个点要么点一次要么不点,枚举所有点的方案实行即可 #include<cstdio> #include<iostream> ...

  6. python spark kmeans demo

    官方的demo from numpy import array from math import sqrt from pyspark import SparkContext from pyspark. ...

  7. Oracle数据库中闪回恢复的详细分析

    Oracle9i开始提供闪回查询,以便能在需要的时候查到过去某个时刻的一致性数据,这是通过Undo实现的.这个功能有很大的限制,就是相关事务的undo不能被覆盖,否则就无力回天了.oracle10g大 ...

  8. java.security.AccessControlException: access denied ("java.lang.RuntimePermission" "getClassLoader")

    转自:https://blog.csdn.net/bluecard2008/article/details/80921682?utm_source=blogxgwz0 摘要: 今天在使用jetty做容 ...

  9. webstorm配置Monokai-Sublime.jar主题

    https://github.com/OtaK/jetbrains-monokai-sublime 导入下载的Monokai-Sublime.jar jar包即可使用.

  10. [转]Linux常用命令学习

    转自 https://www.cnblogs.com/gaojun/p/3359355.html 1.ls命令 就是list的缩写,通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文 ...