type
status
date
slug
summary
tags
category
icon
password
上一个博客主要介绍了构建Web应用需要的事项以及React和Nextjs的关联。本章承接Nextjs入坑指南(一)并开始介绍编程相关。
⛩️一、UI渲染
浏览器对UI的渲染
用户所接触到的Web应用程序中的用户界面(UI)实际上就是浏览器对HTML的画面渲染。浏览器将接收到的HTML语言转换为文档对象模型(DOM, Document Object Model)。DOM架起代码和UI的中间桥梁，它具有父级和子级关系的树状结构。
🤖二、使用JavaScript更新UI
上节我们已经知道浏览器实质上是构筑了DOM树，那么，我们可以在JavaScript中使用DOM方法操作DOM树，继而操纵UI组件。我们开始一个小项目，以帮助我们理解。
首先，创建一个index.html文件，写入如下内容：
如果不出意外，你的浏览器渲染出来的HTML应该是(在浏览器中按F12调出开发者工具查看)：
可以看到，JavaScript和DOM是我们具有了动态操做UI的能力。
但是，我们写了很长的代码只是为了添加一个元素，这明显是不划算的。使用这种方法，开发人员花费大量时间编写指令来告诉计算机应该如何做事情。那么，是否可以描述想要显示的内容并让计算机计算出如何更新DOM呢？
🍱三、命令式和声明式编程
命令式编程(imperative)：详细的告诉机器每一步该如何做，以达成目标。第二节的例子就是一个命令式。
声明式编程(declarative)：告诉机器一个宏观的目标，让机器自己摸索如何去做。React就是一个声明式编写UI的库。作为一名开发人员，你可以告诉React你想要在用户界面上发生什么，React会找出如何代表你更新DOM的步骤。
🤠总结
- 浏览器通过构建DOM显示UI。
- JavaScript通过DOM方法以操作UI。
- React是一个流行的声明式库，可以用它来构建用户界面。。
有关React和Next.js安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
- Author:YUZE
- URL:https://zzyuze.eu.org/ef4500a2c27a402cb1c2e66418e4eb0d
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!