html,js,react三种方法编写helloworld理解virtual dom

学习任何一个新语言，好像都从helloworld开始。：）。

html helloworld

静态hello world

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

js helloworld

需要等待10s的动态hello world

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <script>
        // JavaScript代码开始
        console.log('开始等待10秒...');

        setTimeout(function() {
          console.log('10秒过去了!');
          document.write("Hello World");
        }, 10000);

        // JavaScript代码结束
    </script>
</body>
</html>

react helloworld

需要等待10s的动态hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Hello World</title>
    <!-- 引入React和ReactDOM库 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
    <!-- React组件的容器 -->
    <div id="root"></div>

    <script>
        // 使用React.createElement创建React元素
        const element = React.createElement(
            'h1',
            null,
            'Hello World'
        );

        // 将React元素渲染到页面上
        setTimeout(function(){
          ReactDOM.render(element, document.getElementById('root'));
          console.log('10秒过去了!');
        }, 10000);
    </script>
</body>
</html>

从helloworld到helloworld!

html需要更改定义的标签内容。

<p>Hello World!</p>

js需要更改dom

document.write("Hello World!");

reactjs需要更改element

                                            
const element = React.createElement(
    'h1',
     null,
     'Hello World!'
);

vitural dom

我们从以上react的程序里看到，react创建了element然后渲染。

这里的element不是真正的dom。document.getElement获取的是真实的dom和react创建的不是一个。真正的ui界面功能很富足，如果每次所有元素都重新加载真实的dom性能很低，而有些程序仅仅变动的是界面的某些数值，完全重新加载dom就显得很笨重。

vitural dom是javascript提出的概念，而不是react特有，react很好的利用该概念。

vitural dom是在本地的内存虚拟个dom，当js/react组件或者属性发生变化时，js/react重建dom, 然后diff新旧dom的区别，将差异应用到真实的dom，实现ui的更新。

从helloworld到helloworld!，react只更新了一个element，如果真实界面上很多element，真实的dom其他的element就不会受影响，ui仅更新该element的属性，效率很高。