学习课程 阿崔带你实现 mini-react
目标:自己实现react api
ReactDom.createRoot(document.querySelector("#root").render(App)
路径:
- 直接调用document.createElement创建div和文本节点
- 使用写死的object 代表vdom
- 使用createElement function 来根据参数创建vdom
- 写render function 来实现vdom在document上的创建
- 整理成React API 的形式:main.js App.js React.js ReactDom.js
- main.js: 调用ReactDom.createRoot.render
- App.js: 调用React.createElement 创建vdom(通过直接调用或者vite调用jsx解析器)
- React.createElement: 根据参数创建vdom object
- render: 递归vdom 将元素append 到dom上
- ReactDom: 包裹着createRoot这个高阶函数,高阶函数中包含对render 函数的调用
番外
- 使用vitest 添加测试 React.createElement
标题:七天快速学完mini-react ,再也不担心不会原理了(第一天)当你想要快速掌握React开发技能却又感到困惑时,七天 - 掘金