持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

Virtual DOM

在上篇文章的留言板的栗子中，可以看到React采取声明式编程使逻辑更加清晰易懂，除此之外也可以看到一部分React的工作方式：建立state,根据state生成视图，修改state,生成新的state,根据新的state生成视图。
代码：

import React, { useState} from 'react';
export default function Message(){
  let [messageData,setData]=useState([
    {
      id:1,
      message:'留言1'
    },
    {
      id:2,
      message:'留言2'
    }
  ])
  return <div>
    <button id='btn' onClick={()=>{
      messageData.push({
        id:Date.now(),
        message:'新留言'
      });
      setData([...messageData])
    }}>
     添加留言
    </button>
    <ul id='list'>
      {
        messageData.map(item=>{
          return(
            <li key={item.id}>{item.message}</li>
          )
        })
      }
    </ul>
  </div>
}

效果：
只要对state进行修改，React就会重新渲染视图，那大量的DOM操作会对页面性能造成影响吗？这就涉及到React中的一项核心技术-虚拟DOM（Virtual DOM）。
在React中，每一个组件都会生成一个虚拟DOM树。这个DOM树会以纯对象的方式对视图（真实DOM）进行描述。
React会根据组件生成的虚拟DOM来生成真实的DOM。组件中的数据变化后，组件又会生成一个新的虚拟DOM，React会对新旧虚拟DOM进行对比，找出发生变化的节点，然后只针对发生变化的节点进行重新渲染，这样就极大提升了重新渲染的性能。
React的基本特性：专注于视图、组件化开发、声明式编程以及基于虚拟DOM的视图更新。这些特性可以给开发带来极大的便利，也使代码性能有了大幅度提升，这就是React会受到用户追捧的核心原因。

React引入方式

项目中有两种引入React的方式，一种是通过模块化的方式引入，但这种方式，需要配置一些开发环境。另外一种是直接在页面上通过script引入，如下：

<script src='js/react.js'></script>  
<script src='js/react-dom.js'></script>

react.js是React的核心文件，如组件、Hooks、虚拟DOM等，都在这个文件中。react-dom.js则是对真实DOM的相关操作，如将虚拟DOM渲染到真实DOM里，或者从真实DOM中获取节点。

ReactDOM

ReactDOM对象是react-dom.js提供的一个用于进行DOM操作的对象，在该对象下有一些列API用于操作DOM。在React中需要和真实的DOM打交道时都需要通过ReactDOM的API进行。也可以使用一些原生DOM的API，但不推荐这么做。
使用ReactDOM要注意react-dom.js依赖于react.js,在引用的时候一定要先引入react.js。

render

ReactDOM.render(element,container[,callback])

render方式是ReactDOM在开发时唯一常用的API。render方法用于将React生成的虚拟生成到真实的DOM中去。
element是React生成的虚拟DOM，也叫做ReactElement或ReactNode。除此以外也可以用字符串去实现。
container要放置在element容器中，它必须是一个已经存在的真实DOM节点。
callback是将ReactNode渲染到container之后的回调函数。

React之虚拟DOM、ReactDOM

Virtual DOM

React引入方式

ReactDOM

render