1. 使用最简单的 js 创建一个元素并渲染到页面上
const dom = document.createElement('div')
dom.id = 'dom'
document.querySelector('#root').append(dom)
const text = document.createTextNode('')
text.nodeValue = 'app'
dom.append(text)
2. 实现基础的 vdom 渲染
上面的div 和 text 如果看做 Object 会有 type props children 属性
// type -> div/textNode
// props -> {id: 'dom}
const textEl = {
type: 'TEXT_ELEMENT',
props: {
nodeValue: 'app',
children: []
},
}
const el = {
type: 'div',
props: {
id: 'dom',
children: [
textEl
]
},
}
const dom = document.createElement(el.type)
dom.id = el.props.id
document.querySelector('#root').append(dom)
const text = document.createTextNode('')
text.nodeValue = textEl.props.nodeValue
dom.append(text)
3. 动态创建 vdom
const createTextNode = (text) => {
return {
type: 'TEXT_ELEMENT',
props: {
nodeValue: text,
children: []
},
}
}
const createElement = (type, props, ...children) => {
return {
type,
props,
children
}
}
const textEl = createTextNode('app')
const App = createElement('div', {id: 'div'}, textEl）
const dom = document.createElement(App.type)
dom.id = App.props.id
document.querySelector('#root').append(dom)
const text = document.createTextNode('')
text.nodeValue = textEl.props.nodeValue
dom.append(text)
4. 动态创建dom节点
分析上面的代码
- 创建一个节点
- 设置 props
- 当前节点的父级添加当前节点
const createTextNode = (text) => {
return {
type: 'TEXT_ELEMENT',
props: {
nodeValue: text,
},
children: []
}
}
const createElement = (type, props, ...children) => {
return {
type,
props,
children
}
}
const render = (el, container) => {
// 1. 创建节点
const dom = el.type === 'TEXT_ELEMENT' ? document.createTextNode('') : document.createElement(el.type)
// 2. 设置 props
Object.keys(el.props).forEach(attr => {
if (attr !== 'children') {
dom[attr] = el.props[attr]
}
})
// 对孩子节点进行同样的处理
if (el.children && el.children.length) {
el.children.forEach((child) => render(child, dom))
}
// 3. 父级容器添加当前节点
container.append(dom)
}
const textEl = createTextNode('app')
const App = createElement('div', {id: 'div'}, textEl)
render(App, document.querySelector('#root'))
- 优化：
我们想直接调用 createElement 的时候 children 传字符串，不想再去调用 createTextNode 后传入
const App = createElement('div', {id: 'div'}, 'app')
- 实现：
只需要在遍历 children 的时候判断传入的类型是否是字符串，如果是字符串直接调用 createTextNode
const createElement = (type, props, ...children) => {
return {
type,
props,
+ children: children.map((child) => {
return typeof child === 'string' ? createTextNode(child) : child
})
}
}
5. 改写成 react 的 api
// ReactDom.createRoot(document.getElementById('#root').render(<App />))
const ReactDOM = {
createRoot(container) {
return {
render(app) {
return render(app, container)
}
}
}
}
const App = createElement('div', {id: 'div'}, 'app')
ReactDOM.createRoot(document.querySelector('#root')).render(App)
5.1. 重构
- core/ReactDom.js
import React from './React.js'
const ReactDOM = {
createRoot(container) {
return {
render(app) {
React.render(app, container)
}
}
}
}
export default ReactDOM
- core/React.js
const createTextNode = (text) => {
return {
type: 'TEXT_ELEMENT',
props: {
nodeValue: text,
},
children: []
}
}
const createElement = (type, props, ...children) => {
return {
type,
props,
children
}
}
const render = (el, container) => {
const dom = el.type === 'TEXT_ELEMENT' ? document.createTextNode('') : document.createElement(el.type)
Object.keys(el.props).forEach(attr => {
if (attr !== 'children') {
dom[attr] = el.props[attr]
}
})
if (el.children && el.children.length) {
el.children.forEach((child) => render(child, dom))
}
container.append(dom)
}
const React = {
render,
createElement,
}
export default React
- App.js
import React from './core/React.js'
const App = React.createElement('div', {id: 'div'}, 'app')
export default App
- main.js
import ReactDom from './core/ReactDom.js'
import App from './App.js'
ReactDom.createRoot(document.querySelector('#root')).render(App)
6. 使用 jsx
对于我们上面的代码我们直接将我们的 App.js 改成 App.jsx 会报错
- 原因：
浏览器不认识 jsx 只认识 js
解决方法：将 jsx 转成 js
6.1. 使用 vite将 jsx 转成 js
- 创建 vite 项目
pnpm create vite
- 将我们的代码复制到生成的 vite 项目里
- 改写我们的jsx用法
// 之前的写法
// const App = React.createElement('div', {id: 'div'}, 'app')
// 新的写法
const App = <div>app</div>
如果我们打印我们的App就会看到控制台得到的就是我们之前生成的 vdom 节点
{
type: 'div',
props: {
children: [
{
type: 'TEXT_ELEMENT',
props: {
nodeValue: 'app',
children: []
}
}
]
}
}
我们可以通过一个函数返回一个dom节点然后打印这个函数来看它到底做了什么
const AppOne = () => {
return <div id='dom'>app</div>
}
console.log(AppOne)
我们会得到
() => {
return /* @__PURE__ */ React.createElement("div", { id: "dom" }, "app");
}
所以之所以我们可以直接通过 const App = <div id="dom">app</div>来创建元素，就是因为它本身调用了我们写的那个React.createElement 帮我们处理了
6.1.1.自定义 react 的名字
- 需求：
我们上面打印的AppOne 里是调用的 React.createElement，如果我们想让它叫一个其他的名字比如lifaReact我们该如何 - 实现：
我们只需要在每个 jsx 文件顶部加一行注释
/**@jsx lifaReact.createElement */
这样每次使用jsx的时候都会使用我们自定义的名字而不是默认的 React.createElement，但是需要注意的是每个jsx 文件头部都要写这一段
