react面试题及答案Word文档格式.docx
《react面试题及答案Word文档格式.docx》由会员分享，可在线阅读，更多相关《react面试题及答案Word文档格式.docx（9页珍藏版）》请在冰点文库上搜索。
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（
<
div>
hl>
HelloWorldfromEdureka!
!
/hl>
/div>
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'
;
2、export与exports
〃ES5
module.exports=Component;
//ES6
exportdefaultComponent;
3、component和function
//ES5
varMyComponent=React.createClass（{render:
function（）{
return
h3>
HelloEdureka!
/h3>
}
I）；
classMyComponentextendsReact.Component{render（）（return
4、props
varApp=React.createClass（（
propTypes:
{name:
React.PropTypes.string},render:
function（）{return
Hello,{this.props.name}!
}）；
classAppextendsReact.Component（render（）{return
5、state
varApp=React.createClass（{getlnitialStaCe:
function（）（return（name:
'
world'
};
},
//ES5
render:
funcCion（）（return
Hello,{this.state.name}!
}
H；
classAppextendsReact.Component（constructor（）（super（）;
this.state=（name:
render（）{
return<
）
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元素，则必须将它们组合在一个封闭标记内，例如<
form〉、<
group>
、<
等。
此函数必须保持纯净，即必须每次调用时都返回相同的结果。
2.3如何将两个或多个组件嵌入到一个组件中
可以通过以下方式将组件嵌入到一个组件中：
classMyComponentextendsReact.Component（render（）（
Hello<
〈Header/〉
）；
I
classHeaderextendsReact.Component（render（）（
HeaderComponent<
»
；
ReactDOM.render（
MyComponent/>
document.getElementByld（'
content'
）
2.4什么是Props
Props是React中属性的简写。
它们是只读组件，必须保持纯，即不可变。
它们总是在整个应用中从父组件传递到子组件。
子组件永远不能将prop送回父组件。
这有助于维护单向数据流，通常用于呈现动态生成的数据。
2.5React中的状态是什么？
它是如何使用的？
状态是React组件的核心，是数据的来源，必须尽可能简单。
基本上状态是确定组件呈现和行为的对象。
与props不同，它们是可变的，并创建动态和交互式组件。
可以通过this.state（）访问它们。
16.区分状态和props
StateProps
从父组件中接收初始值是是父组件可以改变值否是在组件中设置默认值是是在组件的内部变化是否设置子组件的初始值是是
在子组件的内部更改否是
2.7如何更新组件的状态
可以用this.Setstate（）更新组件的状态。
classMyComponentextendsReact.Component{constructor（）（super（）;
this.state={
name:
Maxx'
id:
101'
}render（）
setTimeout（（）=>
{this•setstate（（name:
'
Jaeha'
•222*）））,2000）return（
Hello{this.state.name}<
h2>
YourIdis{this.state.id}<
/h2>
<
content*）；
）
2.7React中的箭头函数是什么？
如何使用？
箭头函数（=>
）是用于编写函数表达式的简短语法。
这些函数允许正确绑定
组件的上下文，因为在ES6中默认下不能使用自动绑定。
使用高阶函数时，箭头函数非常有用。
//Generalwayrender（）{
MyInputonChange={this.handleChange.bind（this）}/>
//WithArrowFunctionrender（）（
MyInputonChange={（e）=>
this.handleOnChange（e）}/>
2.9区分有状态和无状态组件
有状态组件 无状态组件
1.在内存中存储有关组件状态变化的信息1.计算组件的内部的状态
2.有权改变状态 2.无权改变状态
3,包含过去、现在和未来可能的状态变化情3.不包含过去，现在和未来可能况 发生的状态变化情况
4,接受无状态组件状态变化要求的通知，然4.从有状态组件接收props并将后将props发送给他们。
其视为回调函数。
2.10React组件生命周期的阶段
React组件的生命周期有三个不同的阶段：
1.初始渲染阶段:
这是组件即将开始其生命之旅并进入DOM的阶段。
2.更新阶段:
一旦组件被添加到DOM,它只有在prop或状态发生变化时才可能更新和重新渲染。
这些只发生在这个阶段。
3.卸载阶段:
这是组件生命周期的最后阶段，组件被销毁并从DOM中删除。
2.11详细解释React组件的生命周期推
升级会员 