这个故事要从几年前,React
和 react-dom
离婚说起,先插一嘴,第三者不是张三(纯博人眼球)。
React
刚流行起来时,并没有 react-dom
,突然有一天,React
发达了,想学时间管理,然后阅人无数,就这样 React
成了王,而 react-dom
与之分开沦为了妾,React
可谓妻妾成群,我们随便举几个例子: React-Native
、Remax
等。为啥 React
如此无情?我摊牌了,编不下去了,就说好好写文章他不香吗?
正儿八经的,我们开始!
相信大家对于跨端这个概念不陌生,什么是跨端?就是让你感觉写一套代码可以做几个人的事,比如,我用 React
可以写Web 、可以写小程序 、可以写原生应用,这样能极大降低成本,但其实,你的工作交给 React
去做了,我们可以对应一下:
•web:react-dom•小程序:remax•ios、android:react-native
这样一捋是不是清晰了?我们再看一张图
到这里,你是否明白了当初 React
和 react-dom
分包的用意了?React
这个包本身代码量很少,他只做了规范和api定义,平台相关内容放在了与宿主相关的包,不同环境有对应的包面对,最终展现给用户的是单单用 React
就把很多事儿做了。
那按这样说,我们是不是也可以定义自己的React渲染器?当然可以,不然跟着这篇文章走,学完就会,会了还想学。
首先使用React脚手架创建一个demo项目
安装脚手架
npm i -g create-react-app
创建项目
create-react-app react-custom-renderer
运行项目
yarn start
现在我们可以在vs code中进行编码了
修改 App.js
文件源码
import React from "react";
import "./App.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
handleClick = () => {
this.setState(({ count }) => ({ count: count + 1 }));
};
render() {
const { handleClick } = this;
const { count } = this.state;
return (
<div className="App">
<header className="App-header" onClick={handleClick}>
<span>{count}</span>
</header>
</div>
);
}
}
export default App;
打开浏览器,可以看到页面,我们点击页面试试,数字会逐渐增加。
到这里,简单的React
项目创建成功,接下来我们准备自定义渲染器。
打开src/index.js
,不出意外,一应该看到了这行代码:
import ReactDOM from 'react-dom';
还有这行
ReactDOM.render(
<App />,
document.getElementById('root')
);
现在我们要使用自己的代码替换掉 react-dom
,创建 MyRenderer.js
,然后修改 index.js
中的内容
import MyRenderer from './MyRenderer'
MyRenderer.render(
<App />,
document.getElementById('root')
)
然后打开浏览器,会看到报错信息,我们按照报错信息提示,完善 MyRenderer.js
的内容。首先文件中最基本的结构如下
import ReactReconciler from "react-reconciler";
const rootHostContext = {};
const childHostContext = {};
const hostConfig = {
getRootHostContext: () => {
return rootHostContext;
},
getChildHostContext: () => {
return childHostContext;
},
};
const ReactReconcilerInst = ReactReconciler(hostConfig);
export default {
render: (reactElement, domElement, callback) => {
if (!domElement._rootContainer) {
domElement._rootContainer = ReactReconcilerInst.createContainer(
domElement,
false
);
}
return ReactReconcilerInst.updateContainer(
reactElement,
domElement._rootContainer,
null,
callback
);
},
};
react-reconciler
源码我们曾讲解过,我们可以把它当做一个调度器,负责创建与更新,而后在 scheduler
中进行调度,我们导出一个对象,其中有一个方法 render
,参数与 react-dom
的render方法一致,这里需要判断一下,如果传入的dom元素是根容器,则为创建操作,否则是更新的操作,创建操作调用 react-reconciler
实例的 createContainer
方法,更新操作调用 react-reconciler
实例的 updateContainer
方法。我们再来看到更为重要的概念——hostConfig。
Host——东家、宿主,见名知意,HostConfig是对于宿主相关的配置,这里所说的宿主就是运行环境,是web、小程序、还是原生APP。有了这个配置,react-reconciler
在进行调度后,便能根据宿主环境,促成UI界面更新。
我们继续来到浏览器,跟随报错信息,完善我们hostConfig的内容,我将其中核心的方法列举如下,供大家参考学习。
•getRootHostContext•getChildHostContext•shouldSetTextContent•prepareForCommit•resetAfterCommit•createTextInstance•createInstance•appendInitialChild•appendChild•finalizeInitialChildren•appendChildToContainer•prepareUpdate•commitUpdate•commitTextUpdate•removeChild
看到这些方法不禁联想到DOM
相关操作方法,都是语义化命名,这里不赘述各个方法的实际含义,一下我们修改相关方法,重新让项目跑起来,以助于大家理解渲染器的工作原理。
以上方法中,我们重点理解一下 createInstance
和 commitUpdate
, 其他方法我在最后通过代码片段展示出来,供大家参考。(注:相关实现可能与实际使用有较大的差别,仅供借鉴学习)
方法参数
•type•newProps•rootContainerInstance•_currentHostContext•workInProgress
返回值
根据传入type,创建dom元素,并处理props等,最终返回这个dom元素。本例我们只考虑一下几个props
•children•onClick•className•style•其他
代码实现
const hostConfig = {
createInstance: (
type,
newProps,
rootContainerInstance,
_currentHostContext,
workInProgress
) => {
const domElement = document.createElement(type);
Object.keys(newProps).forEach((propName) => {
const propValue = newProps[propName];
if (propName === "children") {
if (typeof propValue === "string" || typeof propValue === "number") {
domElement.textContent = propValue;
}
} else if (propName === "onClick") {
domElement.addEventListener("click", propValue);
} else if (propName === "className") {
domElement.setAttribute("class", propValue);
} else if (propName === "style") {
const propValue = newProps[propName];
const propValueKeys = Object.keys(propValue)
const propValueStr = propValueKeys.map(k => `${k}: ${propValue[k]}`).join(';')
domElement.setAttribute(propName, propValueStr);
} else {
const propValue = newProps[propName];
domElement.setAttribute(propName, propValue);
}
});
return domElement;
},
}
是不是很眼熟?谁说原生JavaScript不重要,我们可以看到在框架的内部,还是需要使用原生JavaScript去操作DOM,相关操作我们就不深入了。
更新来自于哪里?很容易想到 setState
,当然还有 forceUpdate
,比如老生常谈的问题:兄嘚,setState
是同步还是异步啊?啥时候同步啊?这就涉及到 fiber
的内容了,其实调度是通过计算的 expirationTime
来确定的,将一定间隔内收到的更新请求入队并贴上相同时间,想想,如果其他条件都一样的情况下,那这几次更新都会等到同一个时间被执行,看似异步,实则将优先权让给了更需要的任务。
小小拓展了一下,我们回来,更新来自于 setState
、forceUpdate
,更新在经过系列调度之后,最终会提交更新,这个操作就是在 commitUpdate方法完成。
方法参数
•domElement•updatePayload•type•oldProps•newProps
这里的操作其实与上面介绍的createInstance有类似之处,不同点在于,上面的方法需要创建实例,而此处更新操作是将已经创建好的实例进行更新,比如内容的更新,属性的更新等。
代码实现
const hostConfig = {
commitUpdate(domElement, updatePayload, type, oldProps, newProps) {
Object.keys(newProps).forEach((propName) => {
const propValue = newProps[propName];
if (propName === "children") {
if (typeof propValue === "string" || typeof propValue === "number") {
domElement.textContent = propValue;
}
// TODO 还要考虑数组的情况
} else if (propName === "style") {
const propValue = newProps[propName];
const propValueKeys = Object.keys(propValue)
const propValueStr = propValueKeys.map(k => `${k}: ${propValue[k]}`).join(';')
domElement.setAttribute(propName, propValueStr);
} else {
const propValue = newProps[propName];
domElement.setAttribute(propName, propValue);
}
});
},
}
两个主要的方法介绍完了,你现在隐隐约约感受到了 react
跨平台的魅力了吗?我们可以想象一下,假设 MyRenderer.render
方法传入的第二个参数不是DOM
对象,而是其他平台的 GUI
对象,那是不是在 createInstance 和 commitUpdate 方法中使用对应的GUI创建与更新api就可以了呢?没错!
const hostConfig = {
getRootHostContext: () => {
return rootHostContext;
},
getChildHostContext: () => {
return childHostContext;
},
shouldSetTextContent: (type, props) => {
return (
typeof props.children === "string" || typeof props.children === "number"
);
},
prepareForCommit: () => {},
resetAfterCommit: () => {},
createTextInstance: (text) => {
return document.createTextNode(text);
},
createInstance: (
type,
newProps,
rootContainerInstance,
_currentHostContext,
workInProgress
) => {
const domElement = document.createElement(type);
Object.keys(newProps).forEach((propName) => {
const propValue = newProps[propName];
if (propName === "children") {
if (typeof propValue === "string" || typeof propValue === "number") {
domElement.textContent = propValue;
}
} else if (propName === "onClick") {
domElement.addEventListener("click", propValue);
} else if (propName === "className") {
domElement.setAttribute("class", propValue);
} else if (propName === "style") {
const propValue = newProps[propName];
const propValueKeys = Object.keys(propValue)
const propValueStr = propValueKeys.map(k => `${k}: ${propValue[k]}`).join(';')
domElement.setAttribute(propName, propValueStr);
} else {
const propValue = newProps[propName];
domElement.setAttribute(propName, propValue);
}
});
return domElement;
},
appendInitialChild: (parent, child) => {
parent.appendChild(child);
},
appendChild(parent, child) {
parent.appendChild(child);
},
finalizeInitialChildren: (domElement, type, props) => {},
supportsMutation: true,
appendChildToContainer: (parent, child) => {
parent.appendChild(child);
},
prepareUpdate(domElement, oldProps, newProps) {
return true;
},
commitUpdate(domElement, updatePayload, type, oldProps, newProps) {
Object.keys(newProps).forEach((propName) => {
const propValue = newProps[propName];
if (propName === "children") {
if (typeof propValue === "string" || typeof propValue === "number") {
domElement.textContent = propValue;
}
// TODO 还要考虑数组的情况
} else if (propName === "style") {
const propValue = newProps[propName];
const propValueKeys = Object.keys(propValue)
const propValueStr = propValueKeys.map(k => `${k}: ${propValue[k]}`).join(';')
domElement.setAttribute(propName, propValueStr);
} else {
const propValue = newProps[propName];
domElement.setAttribute(propName, propValue);
}
});
},
commitTextUpdate(textInstance, oldText, newText) {
textInstance.text = newText;
},
removeChild(parentInstance, child) {
parentInstance.removeChild(child);
},
};
来到浏览器,正常工作了,点击页面,计数增加。
以上就是本节的所有内容了,看罢你都明白了吗?如果想看其他框架原理,欢迎留言评论
•微信公众号 《JavaScript全栈》•掘金 《合一大师》•Bilibili 《合一大师》•微信:zxhy-heart
我是合一,英雄再会。
本文分享自 JavaScript全栈 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!