从零开始开发一个 React

这个是从零开始开发一个 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.createContext和contextType。

导出 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(文章未更新)