Расскажите о JSX и виртуальном DOM.

опрос
Расскажите о JSX и виртуальном DOM.

Склад с открытым исходным кодом Xinbee Mall:github.com/newbee-ltd(Открытый исходный код торгового центра H5, содержащий Vue 2.x и Vue 3.x)

Адрес Vue 3.x + Vant 3.x с высокой имитацией учетной записи WeChat с открытым исходным кодом:GitHub.com/Nick930826/…

написать впереди

Эта статья я долго думала об этом, я хочу объяснить с расслабленной формой.JSXа такжеVDOMочки знаний. Я прочитал много связанного контента, большинство статей основаны на исходниках, и о содержании нельзя сказать плохо, но, по крайней мере, я думаю, что для фронтенд-студентов, которые только начинают, содержание сложное. Эта статья начинается сReactВ качестве точки входа, анализировать и пониматьJSXи виртуальныйDOM ,КонечноVueЕго также могут посмотреть студенты стека технологий, ведь эти два фреймворка учатся друг у друга и учатся друг у друга, и их знания интероперабельны.

Опять же, я понимаю эту статью, она более дружелюбна к новичкам, и если босс достаточно уверен, пусть идет. Если студенты, прочитавшие ее, сочтут ее полезной, они могут поднять большой палец вверх, чтобы дать мне мотивацию продолжать писать. В области комментариев к предыдущим статьям есть несколько студентов, которые хотят знать другие знания, я помню их всех и закодирую их, когда вернусь в свой родной город во время китайского Нового года.

Я изучаю очко знаний, и я привык искать ответы с вопросами, поэтому эта статья не исключение.Статью читаем со следующими вопросами:

  • JSXчто это такое?
  • использовать или нетJSXКаково влияние на развитие?
  • виртуальныйDOMКак это выглядит, как сделать это реальнымDOM?
  • виртуальныйDOMВ чем смысл существования?

Чтобы понять, в чем проблема — это настоящая сила, не думайте о том, чтобы целый день висеть интервьюера, что интервьюер сделал не так. (побег)

Что такое JSX

этоJSСинтаксическое расширение . Официальное определение его таково:

JSX является синтаксическим расширением JavaScript, но обладает полной функциональностью JavaScript.

существуетReactВ проекте пишем такJSX ,следующим образом:

const App = <div>
  test
</div>

не говоряReactчерез виртуальныйDOMотрисовать страницу? На данный момент кажется, что виртуальныйDOMвыглядит как. не волнуйся, сначалаbabelбудет для насJSXСинтаксис превращается вReact.createElement()в виде , который может быть заданофициальный сайт бабельПосмотрите, как это выглядит после компиляции:

image.png

Давайте проверим это и напишем прямо как скомпилированноеReact.createElementфункция, будет ли страница отображаться нормально, мы передаемcreate-react-appпостроитьReactбазовый проект, модифицированныйindex.js следующим образом:

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return React.createElement(
    "div",
    {
      className: "app"
    },
    "father",
    React.createElement(
      "div",
      null,
      "child"
    )
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

В браузере отображается следующее:

image.png

Мы могли бы такжеindex.jsраспечатать его вApp а такжеApp(), чтобы увидеть разницу, следующим образом:

console.log('App：', App)
console.log('App()：', App())

Результат печати следующий:

image.png

Здесь вы можете увидеть, что без выполненияApp, это обычная функция, поэтому мы должны назвать ее функциональным компонентом —Componnet, а возвращаемый результат после выполнения — именно тот виртуальный, который нам нуженDOM, здесь мы можем назвать этоReactэлемент —ReactElement.

этоReactElementэкземпляр объекта, который по существуJavaScriptпара, которая существует в виде объектаDOMОписание , который является виртуальным DOM.

Виртуал на картинке вышеDOMМы можем вывести правдуDOMЭто выглядит так:

<!--最外层的div-->
<div>
  <!--第一个子节点-->
	father
  <!--第二个子节点是被 div 包裹的，内容是child-->
  <div>child</div>
</div>

Так что на данный момент мы можем с уверенностью сказать, что нет необходимостиJSXВозможны и девелоперские проекты. Пока вы уже непобедимы, используйте все этоReact.createElementДля написания тегов и их методов, стилей, пользовательских свойств и так далее. В любом случае, я точно не такой непобедимый, поэтому большой дурак такой "ган".

Как преобразовать виртуальный DOM в реальный DOM

Мы продолжаем использовать вышеперечисленное.create-react-appпостроенdemoпроект, изменитьindex.js следующим образом:

import React from 'react'

// JSX 编写 React 组件
const App = () => <div>
  <div>十三哥：你是什么星座的？</div>
  <div>尼克陈：我是为你量身定座。</div>
</div>

// 自定义虚拟 DOM 转真实 DOM 函数 MyRender。
// vnode：虚拟DOM节点；root：插入的父节点（注意，这里不一定就是 index.html 里的 app 节点）。
const MyRender = (vnode, root) => {
  // 如果没有没有传入 root 节点，则不执行。
  if (!root) {
    return
  }
  let element // 声明一个空变量，用于下面存放节点信息。
  if (vnode.constructor !== Object) {
    // 如果 vnode 的类型为非 Object，则是没有标签包裹的普通字符，直接赋值 element。
    element = document.createTextNode(vnode);
  } else {
    // 否则，则是有标签包裹的类型，通过 createElement 事件创建新的标签，标签名就是 type 属性值。
    element = document.createElement(vnode.type);
  }
  // 塞进父节点 root。
  root.appendChild(element)
  
  // 如果 vnode 有 children 属性，则要进行递归操作。
  if (vnode.props && vnode.props.children) {
    const childrenVNode = vnode.props.children
    // 判断是不是数组，如果是，则进入 forEach 循环执行 MyRender
    if (Array.isArray(childrenVNode)) {
      childrenVNode.forEach((child) => {
        MyRender(child, element)
      })
    } else {
      // 否则直接执行 MyRender
      MyRender(childrenVNode, element)
    }
  }
}

// 初始化执行 MyRender 函数，注意第一个参数需要传入 ReactElement，也就是虚拟 DOM。
MyRender(App(), document.getElementById('root'))

Анализ кода написан с точки зрения приведенного выше кода, и каждая строка имеет пояснение, после внимательного прочтения которого нетрудно понять. Одна из операций, по сути, состоит в том, чтобы найти способы сделать виртуальныеDOM,пройти черезJSметод, визуализируйте как реальныйDOM, а затем вставьте в корневой узел. мы проходимnpm run startЗапустите проект и посмотрите, отображает ли браузер реальнуюDOM:

image.png

Ох! ~ ~ (застенчиво). Вы даже можете указать «зеленым» на «Брат Тринадцать» и щелкнуть «Ник Чен», чтобы указать на метод. Код выглядит следующим образом:

const App = () => <div>
  <div className='shisan' style={{ color: 'green' }}>十三哥：你是什么星座的？</div>
  <div onClick={() => console.log('别闹啊')}>尼克陈：我是为你量身定座。</div>
</div>

...
let element
if (vnode.constructor !== Object) {
  element = document.createTextNode(vnode)
} else {
  element = document.createElement(vnode.type)
  // 添加点击事件
  if (vnode.props.onClick) {
    element.addEventListener('click', () => {
      vnode.props.onClick()
    })
  }
  // 添加样式
  if (vnode.props.style) {
    Object.keys(vnode.props.style).forEach(key => {
      element.style[key] = vnode.props.style[key]
    })
  }
  // 添加类名
  if (vnode.props.className) {
    element.className = vnode.props.className
  }
}
...

В браузере отображается следующее:

Kapture 2021-01-31 at 12.36.56.gif

Здесь указано,ReactDOM.renderСодержание не такое простое, как то, что я написал выше, и задействованный исходный код довольно большой.Вот только мой простой виртуальныйDOMпревратить в реальностьDOMНебольшой пример использования . включатьReactМеханизм событий также реализован сам по себе, что не так просто, как описано выше.

Значение виртуального DOM

Это из моего личного точка понимания, то следующие очки.

Манипуляции с DOM более удобны?

Прямое управлениеDOM, а косвенная операцияJSуправлять виртуальнымDOM, на мой взгляд, у каждого есть свои достоинства.

🤔 Задумайтесь, хотя часты прямые манипуляцииDOMБраузер, перерисовывающий страницу, приводит к снижению производительности. Однако, когда проект достигает определенного уровня сложности, виртуальныеDOM изdiffАлгоритмы также будут вызывать накладные расходы на производительность браузера.У меня здесь нет данных в качестве основы, я полагаюсь исключительно на личный бред. (побег)

разработка это круто

Но с точки зрения опыта разработки вы должны восхищаться этой новой моделью разработки. Пока вы пишете функциональный метод, вы можете отображать его на странице, что очень полезно для модуляции и разделения проекта на компоненты.

Кроссплатформенность

Я думаю, это виртуальныйDOMКаждый должен был слышать о месте, где его играют до крайности.uni-app,taroи другие сторонние решения, вы можете запускать набор кода на нескольких концах, будь то удаленный или виртуальныйDOMкредит. В приведенном выше коде я просто пишу вручнуюMyRenderфункция, виртуальныйDOMпревратиться в реальностьDOM, не просто чтобы все знали об этой способности, а отображали ее с помощью этого метода.На самом деле, вы также можете использовать другие сложные операции для преобразования виртуальныхDOMПреобразованы в небольшие программы (основные платформы), приложения и другие формы кода.

Суммировать

Эта статья, тоVueС точки зрения это тоже работает, поэтому я думаю, что нет никаких рамок для технических вещей. То, что фреймворк делает для нас, по сути одно и то же. Я говорю еще одну вещьне стыдноЕсли да, то передовые знания таковы: ключ в том, сможете ли вы использовать эти знания для создания более ценных вещей, таких как Ю Юйси и Дэн.

Категории