前端面试题整理—React篇

1、说一下React

  React是Facebook 开发的前端JavaScript库

  V层:react并不是完整的MVC框架,而是MVC中的C层

  虚拟DOM:react引入虚拟DOM,每当数据变化通过reactdiff运算,将上一次的虚拟DOM与本次渲染的DOM进行对比,仅仅只渲染更新的,有效减少了DOM操作

  JSX语法:js+xml,是js的语法扩展,编译后转换成普通的js对象

  组件化思想:将具有独立功能的UI模块封装为一个组件,而小的组件又可以通过不同的组合嵌套组成大的组件,最终完成整个项目的构建

  单向数据流:指数据的流向只能由父级组件通过props讲数据传递给子组件,不能由子组件向父组件传递数据

  要想实现数据的双向绑定只能由子组件接收父组件props传过来的方法去改变父组件数据,而不是直接将子组件数据传给父组件

  生命周期:简单说一下生命周期:Mounting(挂载)、Updateing(更新)、Unmounting(卸载)

2、什么是JSX?为什么浏览器无法读取JSX

  JSX 是JavaScript XML 的简写,是 React 使用的一种文件

  它利用 JavaScript 的表现力和类似 HTML 的模板语法

  使得 HTML 文件非常容易理解。此文件能使应用非常可靠,并能够提高其性能

  浏览器只能处理 JavaScript 对象,而不能读取常规 JavaScript 对象中的 JSX

  所以为了使浏览器能够读取 JSX,首先,需要用Babel转换器将 JSX 文件转换为 JavaScript 对象,然后再将其传给浏览器

3、React与Angular有何不同?

  react是Facebook出品,angular是Google

  react只有MVC中的C,angular是MVC

  react使用虚拟DOM,angular使用真实DOM

  react是单项数据绑定,angular是双向数据绑定

4、react生命周期函数

  (1)Mounting挂载阶段

  constructor()

  componentWillMount()组件挂载到页面之前

  render()创建虚拟DOM,进行diff运算,更新DOM树。不可进行setState()

  componentDidMount()组件挂载到页面之后,可以在此请求数据

  (2)Updateing更新阶段

  componentWillReceiveProps()父级数据发生变化

  shouldComponentUpdate()

  性能优化:这个函数只返回true或false,表示接下来的组件是否需要更新(重新渲染)

  返回true就是紧接着以下的生命周期函数,返回false表示组件不需要重新渲染,不再执行任何生命周期函数(包括render)

  componentWillUpdate() 组件更新之前,不可进行setState() 会导致函数调用shouldComponentUpdate从而进入死循环

  render()

  componentDidUpdate()组件更新之后

  (3)Unmounting卸载阶段

  componentWillUnmount 组件卸载和销毁之前立刻停用

  可以在此销毁定时器,取消网络请求,消除创建的相关DOM节点等

5、shouldComponentUpdate是做什么的,(react性能优化是哪个周期函数?)

  shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新绘制dom

  因为DOM的描绘非常消耗性能,如果我们能在shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能

6、为什么虚拟 DOM 会提高性能?

  虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能

  

原文地址:https://www.cnblogs.com/theblogs/p/10686971.html

时间: 2024-11-10 22:13:17

前端面试题整理—React篇的相关文章

web前端面试题整理后篇(程序篇)

需要web前端课程工具和电子书,可以加: 33群105601600;  22群120342833 1. var obj = {a : 1}; (function (obj) { obj = {a : 2}; })(obj);       //问obj的值会改变吗? var obj = {a : 1}; (function (obj) {     obj = {a : 2}; })(obj); //问obj的值会改变吗? 外部的obj不变. 因为匿名函数中obj传入参数等于是创建了一个局部变量ob

前端面试题整理—HTTP篇

1.常见的HTTP方法有哪些? GET: 用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器 POST:用于传输信息给服务器,主要功能与GET方法类似,但一般推荐使用POST方式. PUT: 传输文件,报文主体中包含文件内容,保存到对应URI位置. HEAD: 获得报文首部,与GET方法类似,只是不返回报文主体,一般用于验证URI是否有效. DELETE:删除文件,与PUT方法相反,删除对应URI位置的文件. OPTIONS:查询相应URI支持的HTTP方法 2.H

前端面试题整理—Vue篇

 1.对vue的理解,他有什么特点,vue为什么不能兼容IE8及以下浏览器 vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统 vue是一款MVVM框架,基于双向绑定数据,当数据发生变化时候,vue自身会进行一些运算 特点:简洁轻量.数据驱动.组件化.模块友好 vue.js使用了IE8无法模拟的 ECMAScript 5 特性,没有替代方案 2.简述Vue双向数据绑定的原理 主要是通过Object对象的defineProperty属性,重写data的set和get函数来实现的

web前端面试题整理(HTML篇)

web前端面试题整理(HTML篇)需要web前端课程工具和电子书,可以加: 33群105601600;  22群1203428331. h5的改进:新元素画布canvas: HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成音频audio视频video语义性: article,  nav ,  footer, section, aside, hgroup等.时间time 新属性拖放: draggable   <img draggable=&q

前端面试题(JS篇)

原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/ 好吧,最近打算换工作,所以关注比较多的是面试题,这套还不错,留下~~ 1.JS相关问题: 解释下事件代理(基础题) 解释下 JavaScript 中 this 是如何工作的(始终指向调用当前函数的对象) 解释下原型继承的原理. AMD vs. CommonJS? 什么是哈希表? 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):f

web前端面试题整理(程序篇)

1. var obj = {a : 1}; (function (obj) { obj = {a : 2}; })(obj);       //问obj的值会改变吗? var obj = {a : 1}; (function (obj) { obj = {a : 2}; })(obj); //问obj的值会改变吗? 外部的obj不变. 因为匿名函数中obj传入参数等于是创建了一个局部变量obj, 里面的obj指向了一个新的对象 . 如果改成(function () { obj = {a : 2}

【web前端面试题整理08】说说最近几次面试(水)

为什么换工作 换工作简单来讲一般会归纳为钱不够或者人不对,我们团队氛围很不错,所以基本就定位到钱不够了,而我更多是考虑到以后的职业发展,简单说来就是对以后几年的工作有想法,而这种想法实现不一定能在现在的团队获得,在短期内也看不到希望,加之公司职级晋升不合理等考虑,也就自然而然想到了离职. 其实在鞋厂这两年,真的收获了很多东西,也负责了很重要的业务,这些财富可能是其它大公司不一定能给予的,虽然一直级别低点也就没太多在意,直到最近职级福利缩水...... 最初我面试的职级为X,HR给了一套智力题做,

【web前端面试题整理02】前端面试题第二弹袭来,接招!(转)

前言 今天本来准备先了解下node.js的,但是, 看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端 面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 JavaScript编程题1.实现输出document对象中所有成员的名称和类型:2.如何获得一个DOM元素的绝对位置?(获得元素位置,不依赖框架)3.如何利用JS生成一个table?4.实现预加载一张图片,加载完成后显示在网页中并设定其高度为50px,宽度为50px:5.假设有一个4行td的tabl

2016年BAT公司常见的Web前端面试题整理

1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined 引用数据类型:Object(Array,Date,RegExp,Function,Null) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方法,故有时会失效 方法二.obj instanceof Array