mini-react 第一天:自己实现react api

90 阅读1分钟

学习课程 阿崔带你实现 mini-react

目标:自己实现react api

ReactDom.createRoot(document.querySelector("#root").render(App)

路径:

  1. 直接调用document.createElement创建div和文本节点
  2. 使用写死的object 代表vdom
  3. 使用createElement function 来根据参数创建vdom
  4. 写render function 来实现vdom在document上的创建
  5. 整理成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开发技能却又感到困惑时,七天 - 掘金

网址:juejin.cn/post/735023…