react面试题及答案.docx
《react面试题及答案.docx》由会员分享,可在线阅读,更多相关《react面试题及答案.docx(9页珍藏版)》请在冰点文库上搜索。
React面试整理
前端面试的范围非常广泛,如果你面试的公司需要 react框架方面的知识,以下内容是你必须掌握的,小编根 据自己的工作以及平常面试经验整理了以下react面试必备技能,希望能够帮助你通过面试,你只需要请我喝杯咖啡的钱就可以拿走所有经验!
为了方便学习,小编按照以下四个方面进行分类讲解:
1、基本知识
1.1区分RealDOM和VirtualDOM
RealDOM
VirtualDOM
1.更新缓慢
2.可以直接更新HTML
3.如果元素更新,则创建新DOM
4.DOM操作代价很髙
5.消耗的内存较多
1.更新更快
2.无法直接更新HTML
3.如果元素更新,则更新JSX
4.DOM操作非常简单
5.很少的内存消耗
1.2什么是React
1、React是Facebook在2011年开发的前端JavaScript库。
2、它遵循基于组件的方法,有助于构建可重用的UI组件。
3、它用于开发复杂和交互式的Web和移动UL
4、尽管它仅在2015年开源,但有一个很大的支持社区。
1.3React有什么特点?
React的主要功能如下:
1、它使用**虚拟DOM**而不是真正的DOMo
2、它可以用服务器端渲染。
3、它遵循单向数据流或数据绑定。
1.4列出React的一些主要优点。
React的一些主要优点是:
1.它提高了应用的性能
2.可以方便地在客户端和服务器端使用
3.由于JSX,代码的可读性很好
4.React很容易与Meteor,Angular等其他框架集成
5.使用React,编写UI测试用例变得非常容易
1.5React有哪些限制?
React的限制如下:
1.React只是一个库,而不是一个完整的框架
2.它的库非常庞大,需要时间来理解
3.新手程序员可能很难理解
4.编码变得复杂,因为它使用内联模板和JSX
1.6什么是JSX?
JSX是JavaScriptXML的简写。
是React使用的一种文件,它利用JavaScript的表现力和类似HTML的模板语法。
这使得HTML文件非常容易理解。
此文件能使应用非常可靠,并能够提高其性能。
下面是JSX的一个例子:
render()(
return(
1.7你了解VirtualDOM吗?
解释一下它的工作原理。
VirtualDOM是一个轻量级的JavaScript对象,它最初只是realDOM的副本。
它是一个节点树,它将元素、它们的属性和内容作为对象及其属性。
React的渲染函数从React组件中创建一个节点树。
然后它响应数据模型中的变化来更新该树,该变化是由用户或系统完成的各种动作引起的。
VirtualDOM工作过程有三个简单的步骤:
1、每当底层数据发生改变时,整个UI都将在VirtualDOM描述中重新渲染。
2、然后计算之前DOM表示与新表示的之间的差异。
3、完成计算后,将只用实际更改的内容更新realDOM«
RealDOM(updated)
1.8为什么浏览器无法读取JSX?
浏览器只能处理JavaScript对象,而不能读取常规JavaScript对象中的JSXo所以为了使浏览器能够读取JSX,首先,需要用像Babel这样的JSX转换器将JSX文件转换为JavaScript对象,然后再将其传给浏览器。
1.9与ES5相比,React的ES6语法有何不同?
以下语法是ES5与ES6中的区别:
1、require与import
〃ES5
varReact=require('react');
〃ES6
importReactfrom'react';2、export与exports
〃ES5
module.exports=Component;
//ES6
exportdefaultComponent;3、component和function
//ES5
varMyComponent=React.createClass({render:
function(){
return
HelloEdureka!
;
}
I);
//ES6
classMyComponentextendsReact.Component{render()(return
HelloEdureka!
;
}
4、props
//ES5
varApp=React.createClass((
propTypes:
{name:
React.PropTypes.string},render:
function(){return
Hello,{this.props.name}!
;
}
});
//ES6
classAppextendsReact.Component(render(){return
Hello,{this.props.name}!
;
}
5、state
varApp=React.createClass({getlnitialStaCe:
function()(return(name:
'world'};
},
//ES5
render:
funcCion()(return
Hello,{this.state.name}!
;}
H;
//ES6
classAppextendsReact.Component(constructor()(super();
this.state=(name:
'world');
}
render(){
return
Hello,{this.state.name}!
;)
1.10React与Angular有何不同?
1.体系结构
2.渲染
3.DOM
4.数据绑定
5.调试
React
只有MVC中的View可以在服务器端渲染使用virtualDOM单向数据绑定
编译时调试
Angular
完整的MVC
客户端渲染
使用realDOM
双向数据绑定运行时调试
6.作者
Facebook
Google
2、组件
2.1理解“在React中,一切都是组件”
组件是React应用UI的构建块。
这些组件将整个UI分成小的独立并可重用的部分。
每个组件彼此独立,而不会影响UI的其余部分。
2.2解释React中render()的目的
每个React组件强制要求必须有一个render()o它返回一个React元素,是原生DOM组件的表示。
如果需要渲染多个HTML元素,则必须将它们组合在一个封闭标记内,例如