2020年Web前端面试题之React相关（最全，最详细）

2020年Web前端面试题之React相关（最全，最详细）React相关第一部分

1.React中keys的作用是什么？

2.调用setstate之后发生了什么？当调用setstate时，React会做的第一件事情是将传递给setstate的对象合并到组件的当前状态这将旨动一个称为和解（reconciliation）的过程和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI为此，React将构建一个新的React元素树（您可以将其视为UI的对象表示）-旦有了这个树，为了弄清UI如何响应新的状态而改变?React会将这个新树与上一个元素树相比较（diff）通过这样做,React将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化UI的占用空间

3.react生命周期函数初始化阶段:getDefaultProps==constructor==componentWillMount==render==componentDidMount运彳亍中状态:componentW川ReceiveProps=〉shouldComponentUpdate=二componentWillUpdate二二〉render==componentDidUpdate销毁阶段componentWillUnmount生命周期的顺序defaultProps==constructor==componentW川Mount==render==componentDidMount==componentWillUnmount

4.shouldComponentUpdate是做什么的，（react性能优化是哪个周期函数？）shouldComponentllpdate询问组件是否需要更新的一个钩子函数，判断数据是否需要重新渲染，返回一个布尔值默认的返回值是true，需要重新render若如果返回值是false则不触发渲染，利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能这个方法用来判断是否需要调用render方法重新描绘dom因为dom的描绘非常消耗性能?如果我们能在shouldComponentllpdate方法中能够写出更优化的dom diff算法?可以极大的提高性能react的父级组件的render函数重新渲染会引起子组件的render方法的重新渲染但是?有的时候子组件的接受父组件的数据没有变动子组件render的执行会影响性能?这时就可以使用shouldComponentllpdate来解决这个问题shouldComponentllpdate这是一个需要返回布尔值的生命周期可以理解为疑问句”组件本身需要被重新渲染吗”例如shouldComponentllpdate（）{if（子组件原数据二二子组件现在接收的数据）{return false;}else{retue ntrue;））从而达到没必要重新渲染的子组件?阻塞掉父子render变化引起的子组件render的变动，提升性能！

5.为什么虚拟dom会提高性能？（必考）this.setState prevState,props={return{streak:prevState streak+props count}答案state没有什么问题这种方式很少被使用，咱们可以将一个函数传递给setState，该函数接收上一个的值和当前的props，并返回一个新的状态，如果咱们需要根据以前的状态重新设置状态，推荐使用这种方式问题26:什么是React ContextContext通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递props属性问题27:什么是React FiberFiber是React16中新的协调引擎或重新实现核心算法它的主要目标是支持虚拟DOM的增量渲染React Fiber的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语React Fiber的目标是增强其在动画、布局和手势等领域的适用性它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中问题28:如何在ReactJS的Props上应用验证当应用程序在开发模式下运行时，React将自动检查咱们在组件上设置的所有props?以确保它们具有正确的数据类型对于不正确的类型，开发模式下会在控制台中生成警告消息，而在生产模式中由于性能影响而禁用它强制的props用isRequired定义的下面是一组预定义的prop类型?React.PropTypes.string?React.PropTypes.number?React.PropTypes.func?React.PropTypes.node.React.PropTypes.bool例如，咱们为用户组件定义了如下的propTypes importPropTypes fromprop-types;class Userextends React Component{render{returnh1Welcome,{this.props name/h1h2Age,{this propsage；}User.propTypes={name:PropTypes stringisRequired,age:PropTypes numberisRequired；问题29:在React中使用构造函数和getlnitialState有什么区别构造函数和getlnitialState之间的区别就是ES6和ES5本身的区别在使用ES6类时，应该在构造函数中初始化state，并在使用React.createClass时定义getlnitialState方法°class MyComponent extends React Component{constructor propssuperprops;this.state={/*initial state7};等价于var MyComponent=React.createClass{getlnitialState{return{/*initial state7};}，}；问题30:如何有条件地向React组件添加属性？对于某些属性,React非常聪明，如果传递给它的值是虚值，可以省略该属性例如var InputComponent=React.createClassf render:functionu；var required=true:var disabled=false:returninput type=text disabled={disabled required={required}/；}；渲染结果input type=Htext required另一种可能的方法是var condition=true;var component=div value=foo M{...conditiondisabled true}}/；问题31:Hooks会取代render props和高阶组件吗？通常，render props和高阶组件仅渲染一个子组件React团队认为?Hooks是服务此用例的更简单方法这两种模式仍然有一席之地例如,一个虚拟的scroller组件可能有一个renderitem prop，或者一个可视化的容器组件可能有它自己的DOM结构但在大多数情况下，Hooks就足够了，可以帮助减少树中的嵌套问题32:如何避免组件的重新渲染？React中最常见的问题之一是组件不必要地重新渲染React提供了两个方法?在这些情况下*常有用?React.memo这可以防止不必要地重新渲染函数组件?PureComponent:这可以防止不必要地重新渲染类组件这两种方法都依赖于对传递给组件的props的浅比较?如果props没有改变?那么组件将不会重新渲染虽然这两种工具都非常有用，但是浅比较会带来额外的性能损失?因此如果使用不当?这两种方法都会对性能产生负面影响通过使用React Profiler可以在使用这些方法前后对性能进行测量，从而确保通过进行给定的更改来实际改进性能问题33:什么是纯函数？纯函数是不依赖并且不会在其作用域之外修改变量状态的函数本质上，纯函数始终在给定相同参数的情况下返回相同结果问题34:当调用setState时，React render是如何工作的？咱们可以将“render”分为两个步骤

1.虚拟DOM渲染:当render方法被调用时,它返回一个新的组件的虚拟DOM结构当调用setState时,render会被再次调用,因为默认情况下shouldComponentUpdate总是返回true,所以默认情况下React是没有优化的

2.原生DOM渲染:React只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少――这是很棒的React特性?它优化了真实DOM的变化，使React变得更快问题35:如何避免在React重新绑定实例？有几种常用方法可以避免在React中绑定方法

1.将事件处理程序定义为内联箭头函数class SubmitButtonextends ReactComponent{constructor propssuperprops;this state={isFormSubmitted:false；render{returnbutton onClick={={this.setState isFormSubmitted:true};}}Submit/button}

2.使用箭头函数来定义方法class SubmitButtonextends ReactComponent state={isFormSubmitted:falsehandleSubmit=={this.setStatef isFormSubm itted:true}；render{returnbutton onClick={this handleSubmit}Submit/button

3.使用带有Hooks的函数组件const SubmitButton=={const isFormSubmitted,setlsFormSubmitted i=useStatefalse;returnbutton onClick={={setlsFormSubmitted true;}}Submit/button虚拟dom相当于在js和真实dom中间加了一个缓存?利用dom diff算法避免了没有必要的dom操作，从而提高性能用JavaScript对象结构表示DOM树的结构;然后用这个树构建一个真正的DOM树，插到文档当中当状态变更的时候，重新构造一棵新的对象树然后用新的树和旧的树进行比较?记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的DOM树上?视图就更新7采用虚拟DOM的话，当数据变化的时候?只需要局部刷新变化的位置就好了虚拟DOM具有批处理和高效的Diff算法，最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染，优化性能.

6.react diff原理常考，大厂必考1把树形结构按照层级分解?只比较同级元素2列表结构的每个单元添加唯一的key属性，方便也较⑶React只会匹配相同class的component这里面的class指的是组件的名字⑷合并操作，调用component的setState方法的时候，React将其标记为dirty.到每一个事件循环结束，React检查所有标记dirty的component重新名会制5选择性子树渲染开发人员可以重写shouldComponentUpdate提高diff的性能

7.React中refs的作用是什么？

8.如果你创建了类似于下面的Twitter元素，那么它相关的类定义是啥样子的？

9.展示组件Presentational component和容器组件Container component之间有何不同

10.容器组件则更关心组件是如何运作的

11.类组件Class component和函数式组件Functional component之间有何不同

12.组件的状态state和属性props之间有何不同

13.何为受控组件controlled component

14.何为高阶组件higher ordercomponent

15.为什么建议传递给setState的参数是一个callback而不是一个对象

16.除了在构造函数中绑定this■还有其它方式吗

17.应该在React组件的何处发起Ajax请求

18.描述事件在React中的处理方式

19.createElement fficloneElement有什么区别？

20.React中有三种构建组件的方式

21.React.createClass sES6class和无状态函数°

22.react组件的划分业务组件技术组件？

23.简述flux思想

24.Flux的最大特点，就是数据的“单向流动“

25.React项目用过什么脚手架本题是开放性题目

26.了解redux么?说一下redux的作用和运用流程，redux有什么缺点第二部分第三部分问题1什么是虚拟DOM虚拟DOM VDOM是真实DOM在内存中的表示UI的表示形式保存在内存中，并与实际的DOM同步这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和问题2类组件和函数组件之间的区别是啥？?类组件可以使用其他特性，如状态state和生命周期钩子?当组件只是接收props渲染到页面时?就是无状态组件，就属于函数组件，也被称为哑组件或展示组件函数组件和类组件当然是有区别的?而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化?而函数组件直接执行函数取返回结果即可为了提高性能，尽量使用函数组件函数组件类组件是否有this是否有生命周期是否有状态state问题3:React中refs干嘛用的？Refs提供了一种访问在render方法中创建的DOM节点或者React元素的方法在典型的数据流中，props是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用Refs0咱们可以在组件添加一个ref属性来使用?该属性的值是一个回调函数，接收作为其第一个参数的底层DOM元素或组件的挂载实例class UnControlledFormextends Component{handleSubmit=={console.logflnput Value:,this.input.value form onSubmit={this handleSubmit}input type=,text ref={input=this.input=input/button type=submit Submit/button请注意?input元素有一个⑹属性，它的值是一个函数该函数接收输入的实际DOM元素，然后将其放在实例上?这样就可以在handleSubmit函数内部访问它经常被误解的只有在类组件中才能使用refs,但是refs也可以通过利用JS中的闭包与函数组件一起使用function CustomFormhandleSubmit}{let inputElementreturnform onSubmit={=handleSubmit inputElementvalue}input type=text ref={input=inputElement=input/button type=submit Submit/button/form问题4:在React中如何处理事件为了解决跨浏览器的兼容性问题?SyntheticEvent实例将被传递给你的事件处理函数，SyntheticEvent是React跨浏览器的浏览器原生事件包装器?它还拥有和浏览器原生事件相同的接口?包括stopPropagation preventDefault0比较有趣的是，React实际上并不将事件附加到子节点本身React使用单个事件侦听器侦听顶层的所有事件这对性能有好处，也意味着React在更新DOM时不需要跟踪事件监听器问题5:state和props区别是啥？props和state是普通的JS对象虽然它们都包含影响渲染输出的信息,但是它们在组件方面的功能是不同的即?state是组件自己管理数据，控制自己的状态?可变；?nroos是外部传入的数据参数’不可变；,没有state的叫做无状态组件,有state的叫做有状态组件；?多用props，少用state，也就是多写无状态组件问题6:如何创建refs Refs是使用React.createRef创建的，并通过ref属性附加到React元素在构造组件时，通常将Refs分配给实例属性，以便可以在整个组件中引用它们class MyComponent extends ReactComponent{constructor propssuperprops|;this myRef=React.createRef;}render{return divref={this myRef/;或者这样用class UserFormextends Component{handleSubmit=={console.Ioglnput Valueis:,this.input valuerender{returnformonSubmit={this.handleSubmit}input type=text ref={input=this.input=input}///Access DOMinput inhandle submitbutton type=submit Submit/button/form问题7什么是高阶组件？高阶组件HOC是接受一个组件并返回一个新组件的函数基本上?这是一个模式，是从React的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为const EnhancedComponent=higherOrderComponent iWrappedComponent HOC可以用于以下许多用例?代码重用、逻辑和引导抽象?渲染劫持?state抽象和操作?props处理问题8:在构造函数调用super并将props作为参数传人的作用是啥？在调用super方法之前，子类构造函数无法使用this引用,ES6子类也是如此将props参数传递给super调用的主要原因是在子构造函数中能够通过this.props来获取传入的props°传递props class MyComponentextends ReactComponent{constructor props{superprops;console.logfthis.propsl;//f name:sudheerage:30}没传递props classMyComponentextends ReactComponent{constructor propssuper;console.logthis.props;//undefined〃但是Props参数仍然可用console.log props}；//Prints{name:sudheer^age:30}}render{〃构造函数外部不受影响console.Iogthis.props//{name:sudheerage:30}}}上面示例揭示了一点props的行为只有在构造函数中是不同的?在构造函数之外也是一样的问题9:什么是控制组件？在HTML中,表单元素如inputtextarea和〈select〉通常维护自己的状态?并根据用户输入进行更新当用户提交表单时?来自上述元素的值将随表单一起发送而React的工作方式则不同包含表单的组件将跟踪其状态中的输入值并在每次回调函数例如onChange触发时重新渲染组件，因为状态被更新以这种方式由React控制其值的输入表单元素称为受控组件问题10:如何React.createElement问题const element=h1className=greetingHello,world1/h1上述代码如何使用React.createElement来实现:const element=React.createElement ChV,className:greeting},Hello,world!；问题11讲讲什么是JSX当Facebook第一次发布React时，他们还引入了一种新的JS方I JSX，将原始HTML模板嵌入到JS代码中JSX代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS很多开发人员就能无意识使用JSX?因为它已经与React结合在一直了classMyComponentextendsReactComponent{render{let props=this.props;returndiv className=my-componenta href=props urlprops name/a/div；问题12根据下面定义的代码，可以找出存在的两个问题吗？请看下面的代码□里宰?1在构造函数没有将props传递给super，它应该包括以下行constructor props{supenprops;//...

2.事件监听器通过addEventListener分配时的作用域不正确?因为ES6不提供自动绑定因此,开发人员可以在构造函数中重新分配clickHandler来包含正确的绑定constructor props{supenprops;this.clickHandler=this clickHandlerbindthis;问题13:为什么不直接更新state呢？如果试图直接更新state，则不会重新渲染组件//错误This statemessage=Hello world;需要使用setState方法来更新state它调度对组件state对象的更新当state改变时，组件通过重新渲染来响应//正确做法This.setState message:?Hello World*;问题14:React组件生命周期有哪些不同阶段？在组件生命周期中有四个不同的阶段

1.Initialization:在这个阶段?组件准备设置初始化状态和默认属性

2.Mounting:react组件已经准备好挂载到浏览器DOM中这个阶段包括componentWillMount componentDidMount生命周期方法

3.Updating:在这个阶段，组件以两种方式更新，发送新的props和state状态此阶段包括shouldComponentUpdatecomponentWillUpdate和componentDidUpdate生命周期方法°

4.Unmounting:在这个阶段?组件已经不再被需要了?它从浏览器DOM中卸载下来这个阶段包含componentWillUnmount生命周期方法除以上四个常用生命周期外，还有一个错误处理的阶段Error Handling:在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用这个阶段包含了componentDidCatch生命周期方法问题15:React的生命周期方法有哪些？?componentWillMount:在渲染之前执行?用于根组件中的App级配置?componentDidMount在第一次渲染之后执行?可以在这里做AJAX请求，DOM的操作或状态更新以及设置事件监听器?componentWillReceiveProps:在初始化render的时候不会执行，它会在组件接受到新的状态Props州寸被触发,一般用于父组件状态更新时子组件的重新渲染?shouldComponentUpdate:确定是否更新组件默认情况下,它返回true°如果确定在state或props更新后组件不需要在重新渲染,则可以返回false?这是一个提高性能的方法,componentWillUpdate:在shouldComponentUpdate返回|rue确定要更新组件之前件之前执行?componentDidUpdate:它主要用于更新DOM以响应props或state更改°?componentWillUnmount它用于取消任何的网络请求?或删除与组件哭联的所有事件监听器问题16:这三个点…在React干嘛用的？...在React使用JSX代码中做什么？它叫什么？Modal{...this.props title=Modal headinganimation={false}/这个叫扩展操作符号或者展开操作符，例如，如果this.props包含a:1和b:2，则Modal{...this.props title=Modal headinganimation={false}等价于下面内容Modal a={this propsa b={this.props btitle=Modal headinganimation={false}扩展符号不仅适用于该用例，而且对于创建具有现有对象的大多数或全部属性的新对象非常方便，在更新state咱们就经常这么做this.setStateprevState={return foo:{...prevState foo.a:updated}};}；问题17:使用React Hooks好处是啥？首先，Hooks通常支持提取和重用跨多个组件通用的有状态逻辑，而无需承担高阶组件或渲染props的负担Hooks可以轻松地操作函数组件的状态，而不需要将它们转换为类组件Hooks在类中不起作用?通过使用它们，咱们可以完全避免使用生命周期方法，例如componentDidMountcomponentDidUpdatecomponentWillUnmount相反，使用像useEffect这样的内置钩子问题18:什么是React HooksHooks是React

16.8中的新添加内容它们允许在不编写类的情况下使用state和其他React特性使用Hooks，可以从组件中提取有状态逻辑，这样就可以独立地测试和重用它Hooks允许咱们在不改变组件层次结构的情况下重用有状态逻辑，这样在许多组件之间或与社区共享Hooks变得很容易问题19:React中的useState是什么？下面说明useStateO的用途const count,setCounter=useStateO;const moreStuff,setMoreStuff=useState...;const setCount=={setCounter count+1;setMoreStuff...;；useState是一个内置的React Hook°useStateO返回一个元组?其中第一个参数count是计数器的当前状态?setCounter提供更新计数器状态的方法咱们可以在任何地方使用setCounter方法更新计数状态-在这种情况下,咱们在setCount函数内部使用它可以做更多的事情，使用Hooks,能够使咱们的代码保持更多功能，还可以避免过多使用基于类的组件问题20:React中的StrictMode严格模式是什么？？React的StrictMode是一种辅助组件?可以帮助咱们编写更好的react组件?可以使用〈StrictMode/〉包装一组组件?并且可以帮咱们以下检查?验证内部组件是否遵循某些推荐做法?如果没有,会在控制台给出警告?验证是否使用的已经废弃的方法，如果有，会在控制台给出警告?通过识别潜在的风险预防一些副作用问题21为什么类方法需要绑定到类实例？在JS中，this值会根据当前上下文变化在React类组件方法中?开发人员通常希望this引用组件的当前实例，因此有必要将这些方法绑定到实例通常这是在构造函数中完成的class SubmitButtonextendsReactComponent{constructor props{superprops;this.state={isFormSubmitted:false；this handleSubmit=this handleSubmit.bindthis handleSubmit{this.setState{isFormSubmitted:true render{returnbutton onClick={this.handleSubmit}Submit/button问题22:什么是prop drilling-如何避免？在构建React应用程序时，在多层嵌套组件来使用另一个嵌套组件提供的数据最简单的方法是将一个prop从每个组件一层层的传递下去，从源组件传递到深层嵌套组件?这叫做prop drillingprop drilling的主要缺点是原本不需要数据的组件变得不必要地复杂，并且难以维护为了避免prop drilling，一种常用的方法是使用React Context通过定义提供数据的Provider组件，并允许嵌套的组件通过Consumer组件或useContext Hook使用上下文数据问题23:描述Flux与MVC传统的MVC模式在分离数据Model、UIView和逻辑Controller方面工作得很好，但是MVC架构经常遇到两个主要问题:数据流不够清晰:跨视图发生的级联更新常常会导致混乱的事件帆络，难于调试缺乏数据完整性:模型数据可以在任何地方发生突变,从而在整个UI中产生不可预测的结果使用Flux模式的复杂用户界面不再遭受级联更新，任何给定的React组件都能够根据制store提供的数据重建其状态Flux模式还通过限对共享数据的直接访问来加强数据完整性问题24:受控组件和非受控组件区别是啥？?受控组件是React控制中的组件，并且是表单数据真实的唯一来源?非受控组件是由DOM处理表单数据的地方，而不是在React组件中尽管非受控组件通常更易于实现?因为只需使用refs即可从DOM中获取值，但通常建议优先选择受控制的组件,而不是非受控制的组件这样做的主要原因是受控组件支持即时字段验证，允许有条件地禁用/启用按钮，强制输入格式问题25这段代码有什么问题吗？这段代码有什么问题:。