对于jsx的理解

<div class='box' id='content'>
  <div class='title'>Hello</div>
  <button>Click</button>
</div>

reactdom可以帮助我们将react的组件渲染到页面上

在react中想要转化变量为dom节点时需要处理html为javascript，上段代码转化为js代码时可以转化为javascript的对象结构

{
  tag: 'div',
  attrs: { className: 'box', id: 'content'},
  children: [
    {
      tag: 'div',
      arrts: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: null,
      children: ['Click']
    }
  ]
}

图片来源Lesson 6 使用 JSX 描述 UI 信息 - 《React.js 小书》 - 书栈网 · BookStack

第一个原因是，当我们拿到一个表示 UI 的结构和信息的对象以后，不一定会把元素渲染到浏览器的普通页面上，我们有可能把这个结构渲染到 canvas 上，或者是手机 App 上。所以这也是为什么会要把 react-dom 单独抽离出来的原因，可以想象有一个叫 react-canvas 可以帮我们把 UI 渲染到 canvas 上，或者是有一个叫 react-app 可以帮我们把它转换成原生的 App（实际上这玩意叫 ReactNative）。

第二个原因是，当数据变化时需要更新组件时，操作js对象比操作dom更能减少浏览器重排，极大优化性能