0
点赞
收藏
分享

微信扫一扫

HTML·第三章课后练习题

那小那小 2024-09-27 阅读 29

学习任何一个新语言,好像都从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的属性,效率很高。

举报

相关推荐

0 条评论