专栏首页脑洞前端从零开始开发一个 React - 实现Context API

从零开始开发一个 React - 实现Context API

这个是从零开始开发一个 React 系列的第七篇。想要访问之前的内容可以点击下方的链接进行访问:

  1. 最简单的实现,包括 vdom 结构,createElement,ReactDOM.render
  2. 增加 Class 的支持
  3. 增加 JSX 的支持
  4. 增加 state 支持
  5. 增加声明周期
  6. 增加 dom-diff(调和算法)

先行知识

学习这个课程之前呢,需要各位了解 React 的 api,以及做了什么事情。

如果完全不了解的话,不建议您继续往下看。

如果你已经具备了相关 React 的知识,那么就让我们开始吧。

本章要实现的效果

本章主要实现 react 的 Context API。

Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。

在一个典型的 React 应用中,数据是通过 props 属性自上而下(由父及子)进行传递的,但这种做法对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI 主题),这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递 props。

开始实现

我们继续拿官网的一个关于Context基础API的例子来做。

我们需要将theme从顶层的APP组件传递到最下层的Button,从而Button能够根据主题的不同显示不同的样式,不使用Context的话是这样的:

使用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} />;
  }
}

通过代码发现这里一共需要实现的API有React.createContext, 还有一个contextType.其中React.createContext是会返回一个对象。这个对象有一个key为Provider的组件。这个组件接受一个value的prop并将其作为context的值。contextType是一个静态属性,也就说所有的组件实例都公用一个,没必要都产生一个。我们的组件从Context里读取最新的数据即可。

接下来我们分别实现React.createContextcontextType

导出 React.createContext API

我们首先要做的第一件事情就是导出createContextAPI, 尽管这个API我们还没写,我们先占个位置。

const React = {
  createElement,
  Component: require("./component"),
+  createContext: require("./context").createContext
};

实现数据的存储

我们新建一个文件context.js 我们先放一个空壳子进去,接下来我们就要实现这个,其实代码很简单。

+ import React from './mini-react';
+ import Component from './component';


+ export function createContext(defaultValue) {
+	return {
+		Provider: class Provider extends Component {
+			render() {
+				return <div></div>
+			}	
+		}
+	}
+}

接下来我们填充具体的逻辑,逻辑很简单,直接上代码。

import React from './mini-react';
import Component from './component';


export function createContext(defaultValue) {
	return {
		Provider: class Provider extends Component {
			render() {
+				const currentValue = this.props.value;
+				Provider.currentValue = currentValue || defaultValue;
				return <div></div>
			}	
		}
	}
}

实现数据的读取

两行代码搞定了context数据的更新逻辑,如何让所有组件都能接受到里面的值呢?接下来我们需要修改下Component的实现。

简单增加一行代码:

class Component {
  constructor(props) {
    this.props = props;
+    this.context = this.constructor.contextType && this.constructor.contextType.Provider.currentValue;
    ...
  }
  ...
}

总结

本节实现了React的Context API相关的功能, 下一节我们引入Ref(文章未更新)

本文分享自微信公众号 - 脑洞前端(fe_lucifer)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTTP 缓存

    先判断 Etag, 再判断 last-modified. 但是结果会由服务器决策.

    lucifer210
  • 如何搭建一个完美的组件库?

    如何做一个组件库?本篇文章不会讲一个小的组件如何设计,而是会整体讲一个“逼近完美”的组件库是怎么设计的。

    lucifer210
  • 11. 盛最多水的容器

    符合直觉的解法是,我们可以对两两进行求解,计算可以承载的水量。然后不断更新最大值,最后返回最大值即可。这种解法,需要两层循环,时间复杂度是O(n^2)

    lucifer210
  • React风格的企业前端技术

    大家好,首先祝大家国庆节快乐! 很高兴可以在国庆前夕,可以为大家分享一下React风格的企业前端技术。 谈到前端,可能以前大家的第一感觉就是,前端嘛,无非就是做...

    yuanyi928
  • 快速学习ReactJS-简介

    官方一句很简单的话,道出了什么是ReactJS,就是,一个用于构建用户界面的JavaScript框架,是Facebook开发的一款的JS框架。

    cwl_java
  • 我为什么不再用 Vue,而改用 React?

    当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化...

    逆锋起笔
  • TiDB测试小结

    首先对我来说,我觉得能够开发数据库,而且能够有很深的技术情结,真是一件很cool的事情,我比较欣赏极客精神,同时满足了业务,也在技术上的价值得以体现,这种模式值...

    jeanron100
  • JavaScript构造函数的继承

    使用 call 或 apply 方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:

    Leophen
  • react技术问题十问十答

    最近在开源中国搞了个问答活动,收到了不少网友关于React的提问,本文挑选出一些比较典型的问题总结一下,对问答感兴趣的同学可以移步这里

    前端迷

扫码关注云+社区

领取腾讯云代金券