当你想要快速掌握React开发技能却又感到困惑时，七天学会mini-react将成为你的最佳选择！这款全新的学习工具不仅简洁易懂，还能帮助你在短短七天内掌握React的精髓。无需繁琐的教程，无需枯燥的学习过程，只需七天，你就能成为React开发的高手！赶快加入我们，一起探索无限可能吧！#学习React #快速掌握技能 #七天挑战 #mini-react
1、七天搞定mini-react
第一天: 实现最简 mini-react
实现最简 mini-react
首先我们试着实现一下render函数,在这之前我们可以先看看是它是如何渲染到页面上的，如果要是我们会怎么做？
我们先来创建两个文件
html
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="./main.js" type="module"></script>
</html>
js
// main.js
const dom = document.createElement("div")
dom.id = "app"
document.querySelector("#root").append(dom)
const textNode = document.createTextNode("")
textNode.nodeValue = "app"
dom.appendChild(textNode)我们创建了一个id为root的div，我们需要在root里面创建一个id为app的div，我们通过原生方法去创建，并且我们还创建了一个textNode节点，并赋值为app，最后把文本节点放在了新创建的div中，这样就简单的完成了app的挂载
接下来我们对代码进行优化，我们使用对象来模拟节点，相当于虚拟DOM的方式，文本类型就是TEXT_ELEMENT
js
const textEl = {
type: "TEXT_ELEMENT",
props: {
nodeValue: "app",
children: [],
},
}
const el = {
type: "div",
props: {
id: "app",
children: [textEl],
},
}
const dom = document.createElement(el.type)
dom.id = el.props.id
document.querySelector("#root").append(dom)
const textNode = document.createTextNode("")
textNode.nodeValue = textEl.props.nodeValue
dom.appendChild(textNod接下来我们继续对代码进行优化，发现很多代码都是在创建元素，接下来我们来实现具体方法,我们创建两个方法，专门用来创建普通元素，以及文本元素
js
function createElement(type, props, ...children) {
return {
type,
props: {
...props,
children: children.map(child => {
return typeof child === "string" ? createTextNode(child) : child
}),
},
}
}
function createTextNode(text, ...children) {
return {
type: "TEXT_ELEMENT",
props: {
nodeValue: text,
children,
},
}
}
const textEl = createTextNode("app")
const App = createElement("div", { id: "app" }, textEl)
const dom = document.createElement(App.type)
dom.id = App.props.id
document.querySelector("#root").append(dom)
const textNode = document.createTextNode("")
textNode.nodeValue = textEl.props.nodeValue
dom.appendChild(textNode)通过运行，发现在处理普通元素的时候，需要对children进行处理,如果内容为文本元素，需要使用createTextNode方法，修改完之后，页面正确显示app
接下来我们就可以来实现render方法啦！
这里在处理el.props和el.children时，需要分开处理，使用递归的方式，就可以实现render啦
js
function render(el, container) {
const dom = el.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(el.type)
// 设置id和class
Object.keys(el.props).forEach(key => {
if (key !== "children") {
// 给DOM创建props
dom[key] = el.props[key]
}
})
const children = el.props.children
children.forEach(child => {
render(child, dom)
})
container.append(dom)
}
const textEl = createTextNode("app")
// const App = createElement("div", { id: "app" }, textEl)
const App = createElement("div", { id: "app" }, "hi-", "mini-react")
render(App, document.querySelector("#root"))我们可以修改children的内容，发现运行十分成功，非常完美!
我们打印下app的内容，发现跟我们的虚拟dom一模一样
接下来我们来实现这个吧
js
const ReactDOM = {
createRoot(container) {
return {
render(el) {
render(el, container)
},
}
},
}
ReactDOM.createRoot(document.querySelector("#root")).render(App)通过运行，我们发现没有问题，这样我们就已经实现了
接下来我们对代码进行抽离
将代码进行抽离
js
// React.js
function createElement(type, props, ...children) {
return {
type,
props: {
...props,
children: children.map(child => {
return typeof child === "string" ? createTextNode(child) : child
}),
},
}
}
function createTextNode(text, ...children) {
return {
type: "TEXT_ELEMENT",
props: {
nodeValue: text,
children,
},
}
}
function render(el, container) {
const dom = el.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(el.type)
// 设置id和class
Object.keys(el.props).forEach(key => {
if (key !== "children") {
// 给DOM创建props
dom[key] = el.props[key]
}
})
const children = el.props.children
children.forEach(child => {
render(child, dom)
})
container.append(dom)
}
const React = {
render,
createElement,
}
export default React
js
// ReactDom.js
import React from "./React.js"
const ReactDOM = {
createRoot(container) {
return {
render(el) {
React.render(el, container)
},
}
},
}
export default ReactDOM
js
// App.js
import React from "./core/React.js"
const App = React.createElement("div", { id: "app" }, "hi-", "mini-react")
export default App
js
// index.js
import ReactDOM from "./core/ReactDom.js"
import App from "./App.js"
ReactDOM.createRoot(document.querySelector("#root")).render(App)这样我们就已经完成了简单的mini-react,但是，我们毕竟是用js来实现的，但是一般我们是使用jsx啊，那怎么办呢？后面我们就来实现jsx的版本,请等待下一章更新