建立你自己的react(三)----render函数

前言

今天是我们建立自己的react的第三天,昨天我们讲了createElement函数来生成虚拟dom,那么操作完dom以后,我们还要组成真实的dom,渲染到页面上,今天我们就讲渲染成真实dom,渲染到页面上。

render函数

接下来,我们要写我们的ReactDOM.render版本。

js 复制代码
ReactDOM.render(element, container)

现在,我们仅仅关心添加东西到dom里面,稍后我们将进行处理更新和删除

js 复制代码
function render(element, container) {
 // TODO create dom nodes
}
const Didact = {
  render,
}

Didact.render(element, container)

我们开始使用element类型创造DOM节点,然后把新的节点append到container中

js 复制代码
function render(element, container) {
    const dom = document.createElement(element.type)
    container.appendChild(dom)
}

我们递归子元素做同样的事情

js 复制代码
function render(element, container) {
    const dom = document.createElement(element.type)
    element.props.children.forEach(child =>
        render(child, dom)
    )
    container.appendChild(dom)
}

我们也需要处理一下文本元素,如果这个节点类型是TEXT_ELEMENT,那么我们创建一个文本节点而不是普通节点

js 复制代码
const dom =
element.type == "TEXT_ELEMENT"
? document.createTextNode("")
: document.createElement(element.type)

这里需要做的最后一件事儿是,把element的props分配给节点。

js 复制代码
const isProperty = key => key !== "children"
Object.keys(element.props)
.filter(isProperty)
.forEach(name => {
    dom[name] = element.props[name]
})

做到这里,现在我们有一个库可以render JSX到dom里面

js 复制代码
function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === "object"
          ? child
          : createTextElement(child)
      ),
    },
  }
}

function createTextElement(text) {
  return {
    type: "TEXT_ELEMENT",
    props: {
      nodeValue: text,
      children: [],
    },
  }
}

function render(element, container) {
  const dom =
    element.type == "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(element.type)

  const isProperty = key => key !== "children"
  Object.keys(element.props)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = element.props[name]
    })

  element.props.children.forEach(child =>
    render(child, dom)
  )
  container.appendChild(dom)
}

const Didact = {
  createElement,
  render,
}

/** @jsx Didact.createElement */
const element = (
  <div id= "foo" >
     <a>bar < /a>
     < b />
  </div>
  )
const container = document.getElementById("root")
Didact.render(element, container)

参考

相关推荐
新中地GIS开发老师26 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang33 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_38 分钟前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含42 分钟前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端43 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm
颜酱2 小时前
用搬家公司的例子来入门webpack
前端·javascript·webpack