一、准备
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言等。Context 其实使用的是Provider和Customer模式，和react-redux的模式非常像。在顶层的Provider中传入value，在子孙级的Consumer中获取该值，并且能够传递函数，用来修改context。
类组件中想要获取Component.provider的value属性的值有两种方式：
- 给类组件添加属性
static contextType = Component
this.context // 就是vlaue的值
- 可以使用Component.Consumer组件获取到value值。Consumer组件的子组件是一个函数，函数的参数就是value值
二、实现思路
1. 实现React.createContext
打印源码的createContext 返回值：
_context 是一个循环引用的变量，即：
返回值.Consumer._context = 返回值
返回值.Provider._context = 返回值
因此我们在react.js中，创建并暴露createContext方法，返回值是一个对象，内部包含$$typeof、Consumer、Provider、_currentValue属性。并且把Consumer、Provider的_context属性指向这个返回值。
2. 挂载Provider组件
使用Provider组件时，我们会把共享的数据传入value属性中，之后渲染的其实是Provider的子组件。
在createDOM中加上类型判断如果类型为Symbol("react.provider")，就挂载Provider组件。
那么我们创建mountProviderComponent方法，内部做两件事：
- 把使用Provider组件时的vlaue值，赋给
_currentValue属性 - 获取Provider组件包裹的子组件children并渲染
3. 实现挂载Consumer组件
Consumer组件渲染的其实时一个函数，参数为Provider提供的value属性的值。
在createDOM中加上类型判断如果类型为Symbol("react.context")，就挂载Provider组件。
那么我们创建mountContextComponent方法，拿到_currentValue后渲染子组件
4. 完善类组件
当我们使用Context时，value的变化也会引起组件的重新渲染。因此在forceUpdate中，要获取到最新的value值进行更新：判断如果有contextType属性，就把实例的context属性的值赋值为contextType的_currentValue值
三、实现
1. src/index.js
import React from "./react";
import ReactDOM from "./react-dom";
let ThemeContext = React.createContext(null);
console.log(ThemeContext);
class Header extends React.Component {
render() {
return (
<ThemeContext.Consumer>
{(value) => (
<div style={{ border: `3px solid ${value.color}`, padding: "8px" }}>
header
<Title />
</div>
)}
</ThemeContext.Consumer>
);
}
}
class Title extends React.Component {
render() {
return (
<ThemeContext.Consumer>
{(value) => (
<div style={{ border: `3px solid ${value.color}` }}>title</div>
)}
</ThemeContext.Consumer>
);
}
}
class Main extends React.Component {
render() {
return (
<ThemeContext.Consumer>
{(value) => (
<div
style={{
border: `3px solid ${value.color}`,
margin: "5px",
padding: "8px",
}}
>
main
<Content />
</div>
)}
</ThemeContext.Consumer>
);
}
}
class Content extends React.Component {
render() {
return (
<ThemeContext.Consumer>
{(value) => (
<div style={{ border: `3px solid ${value.color}`, padding: "8px" }}>
Content
<button
onClick={() => value.changeColor("red")}
style={{ color: "red" }}
>
红色
</button>
<button
onClick={() => value.changeColor("green")}
style={{ color: "green" }}
>
绿色
</button>
</div>
)}
</ThemeContext.Consumer>
);
}
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = { color: "red" };
}
changeColor = (color) => {
this.setState({ color });
};
render() {
let contextVal = { changeColor: this.changeColor, color: this.state.color };
return (
<ThemeContext.Provider value={contextVal}>
<div
style={{
margin: "10px",
border: `3px solid ${this.state.color}`,
padding: "8px",
width: 220,
}}
>
page
<Header />
<Main />
</div>
</ThemeContext.Provider>
);
}
}
ReactDOM.render(<Page />, document.querySelector("#root"));
2. src/constants.js
//React元素：h1 span div
export const REACT_ELEMENT = Symbol("react.element");
//文本：字符串或数字
export const REACT_TEXT = Symbol("react.text");
// 函数组件转发的ref
export const REACT_FORWARD_REF = Symbol("react.forward_ref");
> > > // context.Consumer
> > > export const REACT_CONTEXT = Symbol("react.context");
> > >
> > > // context.Provider
> > > export const REACT_PROVIDER = Symbol("react.Provider");
// 插入节点
export const PLACEMENT = Symbol("PLACEMENT");
// 移动节点
export const MOVE = Symbol("MOVE");
3. src/react.js
import { wrapToVdom } from "./utils";
import { Component } from "./component";
import {
REACT_FORWARD_REF,
REACT_ELEMENT,
REACT_PROVIDER,
REACT_CONTEXT,
} from "./constants";
function createElement(type, config, children) {
//children永远都是数组
let ref, key;
if (config) {
delete config.__source; // source：bable编译时产生的属性
delete config.__self;
ref = config.ref; // ref可以用来引用这个真实DOM元素
key = config.key; // 用来进行DOM-DIFF优化的，是用来唯一标识某个子元素的
delete config.ref;
delete config.key;
}
let props = { ...config };
if (arguments.length > 3) {
// 如果入参多余3个，说明有多个子元素，截取后，以数组形式保存
props.children = Array.prototype.slice.call(arguments, 2).map(wrapToVdom);
} else if (arguments.length === 3) {
props.children = wrapToVdom(children); // 可能是React元素对象，也可能是string/number/null/und
}
return {
$$typeof: REACT_ELEMENT,
type,
ref,
key,
props,
};
}
function createRef() {
// current属性的值：是等ref属性所在的原生dom元素变成真实dom后，把真实dom的地址赋给了current
return { current: null };
}
/**
* 接收转发ref的函数组件
* @param {*} render 函数组件
*/
function forwardRef(render) {
return {
$$typeof: REACT_FORWARD_REF,
render,
};
}
> > > function createContext() {
> > > let context = { $$typeof: REACT_CONTEXT };
> > > context.Provider = {
> > > $$typeof: REACT_PROVIDER,
> > > _context: context,
> > > };
> > > context.Consumer = {
> > > $$typeof: REACT_CONTEXT,
> > > _context: context,
> > > };
> > > return context;
> > > }
const React = {
createElement,
Component,
createRef,
forwardRef,
> > > createContext,
};
export default React;
4. src/reacr-dom.js
import {
REACT_TEXT,
REACT_FORWARD_REF,
MOVE,
PLACEMENT,
> > > REACT_PROVIDER,
> > > REACT_CONTEXT,
} from "./constants";
import { addEvent } from "./event";
/**
*把虚拟DOM变成真实DOM插入容器
* @param {*} vdom 虚拟DOM/React元素
* @param {*} container 真实DOM容器
*/
function render(vdom, container) {
mount(vdom, container);
}
/** 页面挂载真实DOM */
function mount(vdom, parentDOM) {
//把虚拟DOM变成真实DOM
let newDOM = createDOM(vdom);
//把真实DOM追加到容器上
parentDOM.appendChild(newDOM);
if (newDOM.componentDidMount) newDOM.componentDidMount();
}
/**
* 把虚拟DOM变成真实DOM
* @param {*} vdom 虚拟DOM
* @return 真实DOM
*/
function createDOM(vdom) {
if (!vdom) return null; // null/und也是合法的dom
let { type, props, ref } = vdom;
let dom; //真实DOM
> > > if (type && type.$$typeof === REACT_PROVIDER) {
> > > return mountProviderComponent(vdom);
> > > } else if (type && type.$$typeof === REACT_CONTEXT) {
> > > return mountContextComponent(vdom);
> > > } else if (type && type.$$typeof === REACT_FORWARD_REF) {
> > > return mountForwardComponent(vdom);
> > > } else if (type === REACT_TEXT) {
// 如果元素为文本，创建文本节点
dom = document.createTextNode(props.content);
} else if (typeof type === "function") {
if (type.isReactComponent) {
// 说明这是一个类组件
return mountClassComponent(vdom);
} else {
// 函数组件
return mountFunctionComponent(vdom);
}
} else if (typeof type === "string") {
//创建DOM节点 span div p
dom = document.createElement(type);
}
// 处理属性
if (props) {
//更新DOM的属性 后面我们会实现组件和页面的更新。
updateProps(dom, {}, props);
let children = props.children;
//如果说children是一个React元素，也就是说也是个虚拟DOM
if (typeof children === "object" && children.type) {
//把这个儿子这个虚拟DOM挂载到父节点DOM上
mount(children, dom);
props.children.mountIndex = 0;
} else if (Array.isArray(children)) {
reconcileChildren(children, dom);
}
}
vdom.dom = dom; // 给虚拟dom添加dom属性指向这个虚拟DOM对应的真实DOM
if (ref) ref.current = dom;
return dom;
}
> > > /** 挂载Provider组件 */
> > > function mountProviderComponent(vdom) {
> > > let { type, props } = vdom; // type = { $$typeof: REACT_PROVIDER, _context: context }
> > > let context = type._context; // { $$typeof: REACT_CONTEXT, _currentValue: undefined }
> > > // 1. 赋值为Provider使用时的value值
> > > context._currentValue = props.value;
> > > // 2. 渲染的是Provider包裹的子组件
> > > let renderVdom = props.children;
> > > // 为后面更新做准备
> > > vdom.oldRenderVdom = renderVdom;
> > > return createDOM(renderVdom);
> > > }
> > >
> > > /** 挂载Context组件-Consumer */
> > > function mountContextComponent(vdom) {
> > > let { type, props } = vdom;
> > > let context = type._context; // type = { $$typeof: REACT_CONTEXT, _context: context }
> > > let renderVdom = props.children(context._currentValue);
> > > vdom.oldRenderVdom = renderVdom;
> > > return createDOM(renderVdom);
> > > }
/** 挂载类组件 */
function mountClassComponent(vdom) {
let { type: ClassComponent, props, ref } = vdom;
// 把类组件的属性传递给类组件的构造函数，
// 创建类组件的实例，返回组件实例对象，以便在组件卸载时可以直接执行实例的方法
let classInstance = new ClassComponent(props);
> if (classInstance.contextType) {
> // 把value值赋给实例的context属性
> classInstance.context = ClassComponent.contextType._currentValue;
> }
// 在虚拟DOM上挂载classInstance，指向类的实例
vdom.classInstance = classInstance;
// 如果有ref，就把实例赋值给current属性
if (ref) ref.current = classInstance;
if (classInstance.componentWillMount) {
classInstance.componentWillMount();
}
//可能是原生组件的虚拟DOM，也可能是类组件的的虚拟DOM，也可能是函数组件的虚拟DOM
let renderVdom = classInstance.render();
//在第一次挂载类组件的时候让类实例上添加一个oldRenderVdom=renderVdom
// 类组件的虚拟dom的oldRenderVdom属性，指向renderVdom
vdom.oldRenderVdom = classInstance.oldRenderVdom = renderVdom;
let dom = createDOM(renderVdom);
if (classInstance.componentDidMount) {
dom.componentDidMount = classInstance.componentDidMount.bind(classInstance);
}
return dom;
}
/** 挂载函数组件 */
function mountFunctionComponent(vdom) {
let { type: functionComponent, props } = vdom;
//获取组件将要渲染的虚拟DOM
let renderVdom = functionComponent(props);
// 函数组件的oldRenderVdom属性，指向渲染的虚拟DOM--renderVdom
vdom.oldRenderVdom = renderVdom;
return createDOM(renderVdom);
}
/** 挂载经过转发的ref的函数组件 */
function mountForwardComponent(vdom) {
let { type, props, ref } = vdom;
let renderVdom = type.render(props, ref);
return createDOM(renderVdom);
}
/** 如果子元素为数组，遍历挂载到容器 */
function reconcileChildren(children, parentDOM) {
// 给每个虚拟DOM挂载mountIndex属性记录其索引
children.forEach((childVdom, index) => {
childVdom.mountIndex = index;
mount(childVdom, parentDOM);
});
}
/**
* 把新的属性更新到真实DOM上
* @param {*} dom 真实DOM
* @param {*} oldProps 旧的属性对象
* @param {*} newProps 新的属性对象
*/
function updateProps(dom, oldProps, newProps) {
for (let key in newProps) {
if (key === "children") {
// 子节点另外处理
continue;
} else if (key === "style") {
let styleObj = newProps[key];
for (let attr in styleObj) {
dom.style[attr] = styleObj[attr];
}
} else if (/^on[A-Z].*/.test(key)) {
// 绑定事件 ==> dom.onclick = 事件函数
// dom[key.toLowerCase()] = newProps[key];
// 之后不再把事件函数绑定在对应的DOM上，而是事件委托到文档对象
addEvent(dom, key.toLowerCase(), newProps[key]);
} else {
dom[key] = newProps[key];
}
}
for (let key in oldProps) {
//如果说一个属性老的属性对象里有，新的属性没有，就需要删除
if (!newProps.hasOwnProperty(key)) {
dom[key] = null;
}
}
}
/**
* DOM-DIFF：递归比较老的虚拟DOM和新的虚拟DOM，找出两者的差异，把这些差异最小化的同步到真实DOM上
* @param {*} parentDOM 父真实DOM
* @param {*} oldVdom 老的虚拟DOM
* @param {*} newVdom 新的虚拟DOM
* @param {*} nextDOM 新的虚拟DOM
*
*/
export function compareToVdom(parentDOM, oldVdom, newVdom, nextDOM) {
/**
// 之前写得：
// 拿到老的真实DOM，创建新的真实DOM，新的替换掉老的
// 性能很差，应完善，去做深度的dom-diff
// 获取oldRenderVdom对应的真实DOM
let oldDOM = findDOM(oldVdom);
// 根据新的虚拟DOM得到新的真实DOM
let newDOM = createDOM(newVdom);
// 把老的真实DOM替换为新的真实DOM
parentDOM.replaceChild(newDOM, oldDOM);
*/
// 1.老-无 新-无：啥也不干
if (!oldVdom && !newVdom) return;
// 2.老-有 新-无：直接删除老节点
if (oldVdom && !newVdom) {
unMountVdom(oldVdom);
}
// 3.老-无 新-有：插入节点
if (!oldVdom && newVdom) {
mountVdom(parentDOM, newVdom, nextDOM);
}
// 4-1.老-有 新-有：判断类型不一样，删除老的，添加新的
if (oldVdom && newVdom && oldVdom.type !== newVdom.type) {
unMountVdom(oldVdom);
mountVdom(parentDOM, newVdom, nextDOM);
}
// 4-2.老-有 新-有：判断类型一样，进行DOM-DIFF，并且节点可复用
if (oldVdom && newVdom && oldVdom.type === newVdom.type) {
updateElement(oldVdom, newVdom);
}
}
/**
* 新老DOM类型一样的更新----DOM-DIFF精髓之处
* 如果新老DOM的类型一样，那么节点就可以复用
*/
function updateElement(oldVdom, newVdom) {
// Consumer组件
if (oldVdom.type.$$typeof === REACT_PROVIDER) {
updateProviderComponent(oldVdom, newVdom);
// Provider组件
} else if (oldVdom.type.$$typeof === REACT_CONTEXT) {
updateContextComponent(oldVdom, newVdom);
// 新老节点都是文本节点：复用老的节点，替换内容
} else if (oldVdom.type === REACT_TEXT) {
// 老的真实DOM给新的DOM的dom属性，把内容改掉
let currentDOM = (newVdom.dom = findDOM(oldVdom));
currentDOM.textContent = newVdom.props.content;
// 原生节点
} else if (typeof oldVdom.type === "string") {
let currentDOM = (newVdom.dom = findDOM(oldVdom));
// 更新属性
updateProps(currentDOM, oldVdom.props, newVdom.props);
// 递归比较儿子
updateChildren(currentDOM, oldVdom.props.children, newVdom.props.children);
// 类组件或函数组件
} else if (typeof oldVdom.type === "function") {
// 类组件
if (oldVdom.type.isReactComponent) {
// 先同步实例
newVdom.classInstance = oldVdom.classInstance;
updateClassComponent(oldVdom, newVdom);
// 函数组件
} else {
updateFunctionComponent(oldVdom, newVdom);
}
}
}
/** 更新Proveder组件 */
function updateProviderComponent(oldVdom, newVdom) {
// 获取老的真实DOM
let oldDOM = findDOM(oldVdom);
// 获取真实父节点
let parentDOM = oldDOM.parentNode;
let { type, props } = newVdom;
let context = type._context;
// 新的属性赋值给_currentValue
context._currentValue = props.value;
let renderVdom = props.children;
compareToVdom(parentDOM, oldVdom.oldRenderVdom, renderVdom);
newVdom.oldRenderVdom = renderVdom;
}
/** 更新context组件 */
function updateContextComponent(oldVdom, newVdom) {
// 获取老的真实DOM
let oldDOM = findDOM(oldVdom);
// 获取真实父节点
let parentDOM = oldDOM.parentNode;
let { type, props } = newVdom;
let context = type._context;
// 从 取值
let renderVdom = props.children(context._currentValue);
compareToVdom(parentDOM, oldVdom.oldRenderVdom, renderVdom);
newVdom.oldRenderVdom = renderVdom;
}
/**
* 更新类组件
* @param {*} oldVdom
* @param {*} newVdom
*/
function updateClassComponent(oldVdom, newVdom) {
// 复用老的类组件实例
let classInstance = (newVdom.classInstance = oldVdom.classInstance);
if (classInstance.componentWillReceiveProps) {
classInstance.componentWillReceiveProps(newVdom.props);
}
classInstance.updater.emitUpdate(newVdom.props);
}
/**
* 更新函数组件
* @param {*} oldVdom
* @param {*} newVdom
*/
function updateFunctionComponent(oldVdom, newVdom) {
// 获取老的真实DOM的父节点
let parentDOM = findDOM(oldVdom).parentNode;
let { type, props } = newVdom;
let newRenderVdom = type(props);
// 函数组件更新每次都要重新执行函数，拿到新的虚拟DOM
compareToVdom(parentDOM, oldVdom.oldRenderVdom, newRenderVdom);
newVdom.newRenderVdom = newRenderVdom;
}
/**
* 递归比较子节点
* @param {*} parentDOM
* @param {*} oldVChildren
* @param {*} newVChildren
*/
function updateChildren(parentDOM, oldVChildren, newVChildren) {
// 为方便后续进行DOM-DIFF，以数组形式保存
oldVChildren = Array.isArray(oldVChildren) ? oldVChildren : [oldVChildren];
newVChildren = Array.isArray(newVChildren) ? newVChildren : [newVChildren];
// DOM-DIFF 1.构建老map {虚拟DOM的key: 虚拟DOM}
let keyedOldMap = {};
oldVChildren.forEach((oldVChild, index) => {
let oldKey = oldVChild.key ? oldVChild.key : index;
keyedOldMap[oldKey] = oldVChild;
});
// 补丁包：存放要进行的操作
let patch = [];
// 上一个放置好的、不需要移动的索引
let lastPlaceIndex = 0;
// DOM-DIFF 2.遍历新数组查找老虚拟DOM
newVChildren.forEach((newVChild, index) => {
newVChild.mountIndex = index;
let newKey = newVChild.key ? newVChild.key : index;
// 查找老的虚拟DOM中是否存在这个key的节点
let oldVChild = keyedOldMap[newKey];
// 如果找到，复用老节点
if (oldVChild) {
// 先更新
updateElement(oldVChild, newVChild);
// 判断是否移动 把oldVChild移动到mountIndex当前索引处
if (oldVChild.mountIndex < lastPlaceIndex) {
patch.push({
type: MOVE,
oldVChild,
newVChild,
mountIndex: index,
});
}
// 删除已经被复用的节点
delete keyedOldMap[newKey];
lastPlaceIndex = Math.max(oldVChild.mountIndex, lastPlaceIndex);
} else {
// 如果没找到，插入新节点
patch.push({
type: PLACEMENT,
newVChild,
mountIndex: index,
});
}
});
// DOM-DIFF 3.获取需要移动的元素
let moveChildren = patch
.filter((action) => action.type === MOVE)
.map((action) => action.oldVChild);
// 遍历map留下的元素（其实就是没有被复用的）
Object.values(keyedOldMap)
.concat(moveChildren)
.forEach((oldVChild) => {
// 获取老DOM
let currentDOM = findDOM(oldVChild);
parentDOM.removeChild(currentDOM);
});
// DOM-DIFF 4.插入或移动节点
patch.forEach((action) => {
let { type, oldVChild, newVChild, mountIndex } = action;
// 真实DOM节点集合
let childNodes = parentDOM.childNodes;
if (type === PLACEMENT) {
// 根据新的虚拟DOM创建新真实DOM
let newDOM = createDOM(newVChild);
// 获取老DOM中对应的索引处的真实DOM
let childNode = childNodes[mountIndex];
if (childNode) {
parentDOM.insertBefore(newDOM, childNode);
} else {
parentDOM.appendChild(newDOM);
}
} else if (type === MOVE) {
let oldDOM = findDOM(oldVChild);
let childNode = childNodes[mountIndex];
if (childNode) {
parentDOM.insertBefore(oldDOM, childNode);
} else {
parentDOM.appendChild(oldDOM);
}
}
});
// // 最大长度
// let maxLength = Math.max(oldVChildren.length, newVChildren.length);
// // 每一个都进行深度对比
// for (let i = 0; i < maxLength; i++) {
// // 在老的虚拟DOM查找，有老节点并且老节点真的对应一个真实DOM节点，并且这个索引要比我大（目的是找到本身的下一个节点）
// let nextVdom = oldVChildren.find(
// (item, index) => index > i && item && findDOM(item)
// );
// compareToVdom(
// parentDOM,
// oldVChildren[i],
// newVChildren[i],
// nextVdom && findDOM(nextVdom)
// );
// }
}
/**
* 插入新的真实DOM
* @param {}} parentDOM
* @param {*} vdom
* @param {*} nextDOM
*/
function mountVdom(parentDOM, newVdom, nextDOM) {
let newDOM = createDOM(newVdom);
if (nextDOM) {
parentDOM.insertBefore(newDOM, nextDOM);
} else {
parentDOM.appendChild(newDOM);
}
if (newDOM.componentDidMount) {
newDOM.componentDidMount();
}
}
/**
* 删除老的真实DOM
* @param {*} vdom 老的虚拟DOM
*/
function unMountVdom(vdom) {
let { props, ref } = vdom;
// 获取老的真实DOM
let currentDOM = findDOM(vdom);
// 如果这个子节点是类组件，还要执行它的卸载的生命周期函数
if (vdom.classInstance && vdom.classInstance.componentWillUnmount) {
vdom.classInstance.componentWillUnmount();
}
// 如果有ref，删除ref对应的真实DOM
if (ref) ref.current = null;
// 取消监听函数
Object.keys(props).forEach((propName) => {
if (propName.slice(0, 2) === "on") {
// 事件在真实dom就这样做
// const eventName = propName.slice(2).toLowerCase()
// currentDOM.removeEventListener(eventName, props[propName])
//但是我们先处理了合成事件，事件注册再store上
delete currentDOM.store;
}
});
// 如果有子节点，递归删除所有子节点
if (props.children) {
let children = Array.isArray(props.children)
? props.children
: [props.children];
children.forEach(unMountVdom);
}
// 从父节点中把自己删除
if (currentDOM) currentDOM.parentNode.removeChild(currentDOM);
}
/** 虚拟DOM返回的真实DOM */
export function findDOM(vdom) {
if (!vdom) return null;
// 如果有dom属性，说明这个vdom是原生组件的虚拟DOM，会有dom属性指向真实dom
if (vdom.dom) {
return vdom.dom;
} else {
return findDOM(vdom.oldRenderVdom);
}
}
const ReactDOM = {
render,
};
export default ReactDOM;
