【面试题】面试小技巧:如果有人问你 xxx 技术是什么?_面试问你对什么技术特别了解

本文回顾了React在JavaScript框架发展中的位置,阐述了React出现的背景,特别是针对jQuery和AngularJS的问题。文章重点介绍了React的核心思想(声明式编程、组件化、虚拟DOM),并讨论了其用途、优点和潜在的缺点。

在说背景,任何技术的出现都是在一定的背景下,在讲讲 React 出现的背景。我记得我在我最早写前端的时候,还是使用的 jQuery、AngularJS。

最早浏览器兼容是最大的问题,出现了jQuery, jQuery 封装了 DOM 操作、样式选择器、链式调用、Ajax等基础的函数。jQuery 把Html、Css、Js 搅拌在一起就成了一个网页。但是并没有一个模式有序的来组织这些原料。随着页面的功能越来越多、越来越酷炫,前端的工程越来越大,jQuery 组织代码,解决代码复用率成为一个待解决的问题。如果在现在来看,jQuery 本质是一个工具函数。

2009年,AngularJS 借鉴了Java MVC 的思想,还强行灌入了 controller、$scope、service 等一系列概念。如同 Spring Boot,AngularJS 提供了一揽子全家桶解决方案,从底层开始深度封装,向上提供了路由、双向绑定、指令、组件等框架特性。但也正是因为它庞大复杂的概念,你在使用 AngularJS 进行开发的时候,需要先学习各种概率,需要编写大量的面条代码。

但是这些框架都还有两个问题待解决:

  • 组件复用性薄弱
  • 前端工程越来越大,前面几种方案不能很好的支持单元测试。

在这样的背景下,React 诞生了。React 带来了新的思维模式,UI = fn(props),React 中一个组件就是一个函数或者一个类,一个函数或者一个类就是一个基础单位,然后把这些基础单位组合在一起,这就是『组合』的魅力,在设计模式中有一句话『组合大于继承』。React通过组件的方式来解决复用性的问题。所以 React 本质是一个组件化框架。React 也解决了组件复用性薄弱的问题,也很好的支持了单元测试。

3. React 的用途

然后说 React 的用途,由于 React 虚拟 DOM 的关系,在用途上非常的丰富。

  • 无论是 PC 还是移动端,都是支持的。
  • React Native 即可开发 iOS 也可开发安卓。
  • React 360 可开发 VR。
  • 冷门的 ink,也可以使用 React 开发命令行。

4. React 的核心思想,他的优点是什么?

说完用途,在讲讲核心思想,也就是 React 的有点,很多人在面试时,经常在把自己知道的源码乱说一气,来证明自己对 React 很了解。其实个人感觉说源码还不如说说它核心思想是什么。它的优点是什么。

1. 声明式

声明式的优势就是直观,可以一目了然,也便于组合。

2. 组件化

组件化的好处是低耦合,高内聚,以组件为基础单位,进行组合。对前端工程化是极大的优化。React 没有差用模板语法,而是使用了声明 jsx这样的书写方式。

3. 通用性

React 的通用性源于虚拟 DOM,React 将 DOM 抽象为虚拟 DOM,开发者不在直接操作 DOM,正式由于这一层的封装,React 的不在局限于 Web 开发,还可以开发 iOS、安卓、VR、命令行脚本。只要能兼容虚拟 DOM,都能使用 React 开发。

5. 反过来想想它的缺点

最后还是要客观的想想来看待,辩证的回来想想 React 有什么缺点,所有的东西肯定有缺点,没有完美的东西。React 也一样。React 的优点就是React 的核心思路,声明式,组件化,通用性。缺点了,个人觉得对于一个开发者来说,当我使用完 Vue 之后再来使用 React,你会发现 React 并不是一个完全体,当你在开发一个应用时,很多东西你都需要去社区寻求并找到解决方案,这对于研发者来说,需要投入学成本。但是这其实在某些角度来看,这也并不算缺点,这间接的让 React 社区蓬勃发展。

总结

文章回答了最开始的问题 ”React 是什么?“。通过以 React 为例,可以延伸到这一类问题,如:

  • React 是什么?解释 React 是什么?你了解 React 吗?谈一谈你对 React 的理解?
  • 说说什么是 Vue?你了解 Vue 吗?
  • xx 技术是什么?你对 xx 技术了解吗?

这一类问题其实大致都可以套用下面这个图的思路来回答,从本质、背景,到用途、核心、优缺点。

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道

HTML

  • HTML5有哪些新特性?

  • Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?

  • 如何实现浏览器内多个标签页之间的通信?

  • ⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?

  • 简述⼀下src与href的区别?

  • cookies,sessionStorage,localStorage 的区别?

  • HTML5 的离线储存的使用和原理?

  • 怎样处理 移动端 1px 被 渲染成 2px 问题?

  • iframe 的优缺点?

  • Canvas 和 SVG 图形的区别是什么?

JavaScript

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 问:0.1 + 0.2 === 0.3 嘛?为什么?

  • JS 数据类型

  • 写代码:实现函数能够深度克隆基本类型

  • 事件流

  • 事件是如何实现的?

  • new 一个函数发生了什么

  • 什么是作用域?

  • JS 隐式转换,显示转换

  • 了解 this 嘛,bind,call,apply 具体指什么

  • 手写 bind、apply、call

  • setTimeout(fn, 0)多久才执行,Event Loop

  • 手写题:Promise 原理

  • 说一下原型链和原型链的继承吧

  • 数组能够调用的函数有那些?

  • PWA使用过吗?serviceWorker的使用原理是啥?

  • ES6 之前使用 prototype 实现继承

  • 箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?

  • 事件循环机制 (Event Loop)

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值