前端常见的面试题来看一下吧!

(1)前端的九大框架有哪些?

答案:

1. React

React 是一个用于构建用户界面的 JavaScript 库。React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

2. Vue

Vue  是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与 现代化工具链 以及各种 支持类库 结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

3. Angular

AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVVM、模块化,自动化双向绑定、语义化标签、依赖注入等等。

4. Svelte

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作,而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

5. Alpine

Alpine.js 通过很低的成本提供了与 Vue 或 React 这类大型框架相近的响应式和声明式特性。你可以继续操作 DOM,并在需要的时候使用 Alpine.js。可以理解为 JavaScript 版本的 Tailwind。

6. Preact

React 的 3kb 轻量化方案,拥有同样的 ES6 API。具有体积小、高性能、轻量 & 可嵌入、生态系统兼容等特点。

7. LitElement

LitElement 是一个简单的框架,用于构建快速、轻量级的 Web 组件。它提供反应状态、作用域样式和一个小巧、快速且富有表现力的声明性模板系统。

8. Stimulus

Stimulus 是一个轻量级前端框架。这个框架通过 data-contoller data-target data-action 等属性,把 HTML 元素和 JavaScript 行为绑定,Stimulus 本身不处理 HTML 渲染,而是为已渲染的 HTML 添加行为。

9. Ember

Ember.js 是一个开源的免费 JavaScript 客户端框架,用于开发 Web 应用程序。使用模型-视图-控制器(MVC)模式。该框架提供通用数据绑定,基于网址驱动的方法用于构建不同应用,重点放在可扩展性上。

(2)在 React中元素( element)和组件( component)有什么区别?

答案:
简单地说,在 React中元素(虛拟DOM)描述了你在屏幕上看到的DOM元素。
换个说法就是,在 React中元素是页面中DOM元素的对象表示方式。在 React中组件是一个函数或一个类,它可以接受输入并返回一个元素。
注意:工作中,为了提高开发效率,通常使用JSX语法表示 React元素(虚拟DOM)。在编译的时候,把它转化成一个 React. createElement调用方法。
在这里我们编写针对题目一的答案。

(3)什么是 React的refs?为什么它们很重要?

refs允许你直接访问DOM元素或组件实例。为了使用它们,可以向组件添加个ref属性。

如果该属性的值是一个回调函数,它将接受底层的DOM元素或组件的已挂载实例作为其第一个参数。可以在组件中存储它。
export class App extends Component  {
showResult ( ) {
console. log(this. input. value)
}
render ( ) {
return (
<div>
<input  type="text" ref={input => this .input =input } />
< button onClick={this. showResult.bind(this)}>展示结果</ button>
</div>
);
}
}
注:如果该属性值是一个字符串, React将会在组件实例化对象的refs属性中,存储一个同名属性,该属性是对这个DOM元素的引用。可以通过原生的 DOM API操作它。
export class App extends Component {showResult( )console .log ( this.refs.username.value)rende

当调用 setState的时候,发生了什么操作?

答案:

当调用 setState时, React做的第一件事是将传递给setState的对象合并到组件的当前状态,这将启动一个称为和解( reconciliation)的过程。

和解的最终目标是,根据这个新的状态以最有效的方式更新DOM。

为此, React将构建一个新的 React虚拟DOM树(可以将其视为页面DOM元素的对象表示方式)。

一旦有了这个DOM树,为了弄清DOM是如何响应新的状态而改变的, React会将这个新树与上一个虚拟DOM树比较。

这样做, React会知道发生的确切变化,并且通过了解发生的变化后,在绝对必要的情况下进行更新DOM,即可将因操作DOM而占用的空间最小化。


全部评论
有几道题之前面试遇到过,可惜答的不如楼主,学习了
点赞 回复 分享
发布于 2022-08-29 11:05 江苏

相关推荐

不愿透露姓名的神秘牛友
昨天 13:39
点赞 评论 收藏
分享
06-02 15:53
阳光学院 Java
点赞 评论 收藏
分享
点赞 评论 收藏
分享
评论
7
9
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务