虚拟DOM与React18新的渲染写法

1、对虚拟DOM的理解

在学习React18之前，还是要对虚拟DOM进行深入了解。

**为什么**要使用虚拟DOM？

Vue和React框架都会自动控制DOM的更新，而直接操作真实DOM是非常耗性能的，所以才有了虚拟DOM的概念。

下面是一个多次触发DOM更新的例子和只触发一次DOM的一个对比。

①多次触发DOM操作，耗时：1000ms左右

<ul></ul>
<script>
	// 多次触发DOM操作，非常耗时：1000ms左右
    console.time(1)
    let ul = document.querySelector('ul');

    for(let i=0;i<1000;i++){
        ul.innerHTML += `<li>${i}</li>`;
    }
    console.timeEnd(1)
  </script>

②只触发一次DOM操作，耗时1ms左右

<ul></ul>
<script>
	// 只触发一次DOM操作，节约时间：1ms左右
   	console.time(1)
    let ul = document.querySelector('ul');
    let str = '';
    for(let i=0;i<1000;i++){
      str += `<li>${i}</li>`;
    }
    ul.innerHTML = str;
    console.timeEnd(1)
</script>

所以在React18中，我们并不直接操作真实DOM，而是操作虚拟DOM，再一次性的更新真实DOM。

2、React18的渲染写法

在React18中，需要使用两个文件来初始化框架：

  • react.development.js 或 react模块 -> 生成虚拟DOM

  • react-dom.development.js 或 react-dom/client模块 -> Diff算法 + 处理真实DOM

官网地址：https://legacy.reactjs.org/docs/add-react-to-a-website.html

  <!-- ... other HTML ... -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="like_button.js"></script>

</body>

可以把这两个文件下载到本地后再引用。

下面就是初始化React程序的代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../react.development.js"></script>
  <script src="../react-dom.development.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    // React对象 -> react.development.js
    // ReactDOM对象 -> react-dom.development.js
    let app = document.querySelector('#app');
    // root根对象，react渲染的
    let root = ReactDOM.createRoot(app); 
    // React.createElement() -> 创建虚拟DOM 
    let element = React.createElement('h2', {title: 'hi'}, 'hello world');
    root.render(element);
  </script>
</body>
</html>

这样在页面中就可以渲染一个h2标签，并显示hello world字样。

虚拟DOM渲染到页面