基于babel实现react核心功能（初始化，fiber，hook）
为什么我会基于babel来实现react，因为jsx浏览器是无法识别的，所以我通过babel编译jsx为js，在手撕源码实现就ok了，废话不多说上才艺，我哩giao。
前方高能，请做好准备
项目结构
首先把相关的插件都装好
package.json
{
"name": "source",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --sourcemap --inline --progress --config build/webpack.dev.config.js",
"build": "cross-env NODE_ENV=production webpack --progress --config build/webpack.prod.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"css-loader": "^4.3.0",
"html-webpack-plugin": "^4.4.1",
"less-loader": "^7.0.1",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
安装html-webpack-plugin是为了让webpack找到html文件并输出到浏览器，babel-loader加上babel插件将jsx和一些语法进行转换和polyfill
// webpack.dev.config.js
const {resolve, posix:{join}} = require('path');
const HTMLPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app: "./src/index"
},
// 出口
output: {
path : resolve(__dirname,"../dist"),
filename: join("static", "js/[name].[hash].js") ,
chunkFilename: join("static", "js/[name].[chunkhash].js"),
publicPath: "/" // 打包后的资源的访问路径前缀
},
module: { // 所有第三方模块的匹配规则， webpack默认只能处理.js后缀名的文件，需要安装第三方loader
rules: [
{
test: /\.m?js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ["@babel/plugin-proposal-class-properties"]
}
},
exclude: /(node_modules|bower_components)/, // 千万别忘记添加exclude选项,不然运行可能会报错
},
{
test: /\.less$/,
use: [
// {
// loader:MiniCssExtractPlugin.loader,
// options:{
// hmr: utils.isDev(), // 开发环境热更新 ，然而不起作用
// reloadAll:true,
// }
// },
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader'
},
{
loader: 'less-loader', // 编译 Less -> CSS
},
],
}
]
},
plugins: [
new HTMLPlugin(
{
filename: resolve(__dirname, './../dist/index.html'), // html模板的生成路径
template: './public/index.html',//html模板
inject: true, // true：默认值，script标签位于html文件的 body 底部
}
)
],
resolve: {
extensions: ['.js', 'json'],
alias: {
'@': join(__dirname, '..', 'src')
}
},
devtool: "#eval-source-map",
devServer: {
historyApiFallback: true, // 当找不到路径的时候，默认加载index.html文件
hot: true,
contentBase: false, // 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要
compress: true, // 一切服务都启用gzip 压缩：
port: "3005", // 指定段靠谱
publicPath: "/", // 访问资源加前缀
}
}
.babelrc
{ "presets":["@babel/react","@babel/env"]}
webpack的入口文件
./src/index.js
import Component from './react/component';
import React from './react';
import ReactDom from './react/react-dom';
class ClassComponent extends Component {
render () {
return (<div><button>666</button></div>)
}
}
const jsx = (<div>
<ClassComponent />
</div>)
ReactDom.render(jsx, document.getElementById('root'))
接下来是实现react源码的代码，我也不爱废话，上代码
jsx会根据每一个节点，转译成React.createElement,比如上面我写的标签其实最后会变成下面的样子
// 下面的null的位置是属性，我上面一个属性都没有所以是null
React.createElement('div', null, React.createElement(ClassComponent, null))
看到这里你会想知道这个React.createElement是怎么实现的呀，感觉有点意思了,那就继续看吧
./src/react/const.js
export const TEXT = 'TEXT';
export const PLACEMENT = "PLACEMENT";
export const UPDATE = "UPDATE";
export const DELETION = "DELETION";
./src/react/component.js
export default class {
static isReactComponent = {}
constructor (props) {
this.props = props;
}
}
./src/react/index.js
``` javascript
import {TEXT} from './const';
function createElement (type, config, ...children) {
const props = {
...(config || {}),
// 这里判断是否为文本，不是文本就是虚拟节点
children: children.map(child => typeof child === 'object' ? child:{
type: TEXT,
props: {
children: [],
nodeValue: child
}
})
}
return {type, props}
}
export default {createElement}
上面的代码执行完应该就会生成虚拟dom树了
接下来我们来实现fiber架构的diff，把虚拟节点变真实节点，也就是把js所描述的对象变成真正的dom插入到页面中
虚拟dom转换成真实dom靠的就是一手新旧节点的比较，而react把它优化的非常nice，通过调用requestIdleCallback让页面更加丝滑，，具体我不想讲了，不懂看看别的博客
./src/react/react-dom.js
import {TEXT, PLACEMENT, UPDATE, DELETION} from "./const";
// 下一个单元任务
let nextUnitOfWork = null;
// work in progress fiber root
let wipRoot = null;
// 现在的根节点
let currentRoot = null;
let deletions = null;
function render(createVnode, container) {
let vnode;
if (createVnode.isReactComponent) {
vnode = new createVnode().render();
} else if (typeof createVnode === 'function') {
vnode = createVnode();
} else {
vnode = createVnode;
}
wipRoot = {
node: container,
props: {
children: [vnode]
},
base: currentRoot
};
nextUnitOfWork = wipRoot;
deletions = [];
}
// vnode->node
// 生成成node节点
function createNode(vnode) {
const {type, props} = vnode;
let node = null;
if (type === TEXT) {
node = document.createTextNode("");
} else if (typeof type === "string") {
node = document.createElement(type);
}
updateNode(node, {}, props);
return node;
}
function reconcileChildren(workInProgressFiber, children) {
// 构建fiber结构
// 更新 删除 新增
let prevSibling = null;
let oldFiber = workInProgressFiber.base && workInProgressFiber.base.child;
for (let i = 0; i < children.length; i++) {
let child = children[i];
let newFiber = null;
const sameType = child && oldFiber && child.type === oldFiber.type;
if (sameType) {
// 类型相同 复用
newFiber = {
type: oldFiber.type,
props: child.props,
node: oldFiber.node,
base: oldFiber,
return: workInProgressFiber,
effectTag: UPDATE
};
}
if (!sameType && child) {
// 类型不同 child存在 新增插入
newFiber = {
type: child.type,
props: child.props,
node: null,
base: null,
return: workInProgressFiber,
effectTag: PLACEMENT
};
}
if (!sameType && oldFiber) {
// 删除
oldFiber.effectTag = DELETION;
deletions.push(oldFiber);
}
if (oldFiber) {
oldFiber = oldFiber.sibling;
}
// 形成链表结构
if (i === 0) {
workInProgressFiber.child = newFiber;
} else {
// i>0
prevSibling.sibling = newFiber;
}
prevSibling = newFiber;
}
}
function updateNode(node, preVal, nextVal) {
Object.keys(preVal)
.filter(k => k !== "children")
.forEach(k => {
if (k.slice(0, 2) === "on") {
// 简单处理 on开头当做事件
let eventName = k.slice(2).toLowerCase();
node.removeEventListener(eventName, preVal[k]);
} else {
if (!(k in nextVal)) {
node[k] = "";
}
}
});
Object.keys(nextVal)
.filter(k => k !== "children")
.forEach(k => {
if (k.slice(0, 2) === "on") {
// 简单处理 on开头当做事件
let eventName = k.slice(2).toLowerCase();
node.addEventListener(eventName, nextVal[k]);
} else {
node[k] = nextVal[k];
}
});
}
function updateFunctionComponent(fiber) {
wipFiber = fiber;
wipFiber.hooks = [];
hookIndex = 0;
const {type, props} = fiber;
const children = [type(props)];
reconcileChildren(fiber, children);
}
function updateClassComponent(fiber) {
wipFiber = fiber;
wipFiber.hooks = [];
hookIndex = 0;
const {type, props} = fiber;
const children = [new type(props).render()];
reconcileChildren(fiber, children);
}
function performUnitOfWork(fiber) {
// 1. 执行当前任务
// 执行当前任务
const {type} = fiber;
if (typeof type === "function") {
type.isReactComponent
? updateClassComponent(fiber)
: updateFunctionComponent(fiber);
} else {
// 原生标签
updateHostComponent(fiber);
}
// 2、 返回下一个任务
// 原则就是：先找子元素
if (fiber.child) {
return fiber.child;
}
// 如果没有子元素 寻找兄弟元素
let nextFiber = fiber;
while (nextFiber) {
if (nextFiber.sibling) {
return nextFiber.sibling;
}
nextFiber = nextFiber.return;
}
}
function updateHostComponent(fiber) {
if (!fiber.node) {
fiber.node = createNode(fiber);
}
// todo reconcileChildren
const {children} = fiber.props;
reconcileChildren(fiber, children);
}
function workLoop(deadline) {
// 有下一个任务，并且当前帧还没有结束
while (nextUnitOfWork && deadline.timeRemaining() > 1) {
nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
}
if (!nextUnitOfWork && wipRoot) {
commitRoot();
}
requestIdleCallback(workLoop);
}
requestIdleCallback(workLoop);
// ! commit阶段
function commitRoot() {
deletions.forEach(commitWorker);
commitWorker(wipRoot.child);
currentRoot = wipRoot;
wipRoot = null;
}
function commitWorker(fiber) {
if (!fiber) {
return;
}
// 向上查找
let parentNodeFiber = fiber.return;
while (!parentNodeFiber.node) {
parentNodeFiber = parentNodeFiber.return;
}
const parentNode = parentNodeFiber.node;
if (fiber.effectTag === PLACEMENT && fiber.node !== null) {
parentNode.appendChild(fiber.node);
} else if (fiber.effectTag === UPDATE && fiber.node !== null) {
updateNode(fiber.node, fiber.base.props, fiber.props);
} else if (fiber.effectTag === DELETION && fiber.node !== null) {
commitDeletions(fiber, parentNode);
}
commitWorker(fiber.child);
commitWorker(fiber.sibling);
}
function commitDeletions(fiber, parentNode) {
if (fiber.node) {
parentNode.removeChild(fiber.node);
} else {
commitDeletions(fiber.child, parentNode);
}
}
// !hook 实现
// 当前正在工作的fiber
let wipFiber = null;
let hookIndex = null;
export function useState(init) {
const oldHook = wipFiber.base && wipFiber.base.hooks[hookIndex];
const hook = {state: oldHook ? oldHook.state : init, queue: []};
const actions = oldHook ? oldHook.queue : [];
actions.forEach(action => (hook.state = action));
const setState = action => {
hook.queue.push(action);
wipRoot = {
node: currentRoot.node,
props: currentRoot.props,
base: currentRoot
};
nextUnitOfWork = wipRoot;
deletions = [];
};
wipFiber.hooks.push(hook);
hookIndex++;
return [hook.state, setState];
}
export default {render};
