React面试题及答案..docx
《React面试题及答案..docx》由会员分享，可在线阅读，更多相关《React面试题及答案..docx（11页珍藏版）》请在冰点文库上搜索。
1.当你调用setState的时候，发生了什么事？
将传递给setState的对象合并到组件的当前状态，这将启动一个和解的过程，
构建一个新的react元素树，与上一个元素树进行对比（diff），从而进行最小化的重渲染。
2.React项目用过什么脚手架（本题是开放性题目）
creat-react-appYeoman等
3.什么时候在功能组件（ClassComponent）上使用类组件（FunctionalComponent）？
如果您的组件具有状态（state）或生命周期方法，请使用Class组件。
否则，使用功能组件
4.React中keys的作用是什么？
Keys是React用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
render（）{return（
{ this.state.todoItems.map（（{item,key}）=>{return{item}
}）}
）
}
在开发过程中，我们需要保证某个元素的key在其同级元素中具有唯一性。
在
ReactDiff算法中React会借助元素的Key值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。
此外，React还需要借助
Key值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中
Key的重要性。
5.React优势
1、React速度很快：
它并不直接对DOM进行操作，引入了一个叫做虚拟DOM
的概念，安插在javascript逻辑和实际的DOM之间，性能好。
2、跨浏览器兼容：
虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3、一切都是component：
代码更加模块化，重用代码更容易，可维护性高。
4、单向数据流：
Flux是一个用于在JavaScript 应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
5、同构、纯粹的javascript：
因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6、兼容性好：
比如使用RequireJS来加载和打包，而Browserify 和Webpack
适用于构建大型应用。
它们使得那些艰难的任务不再让人望而生畏。
6.React很多个setState为什么是执行完再render7.reactdiff原理（常考，大厂必考）
把树形结构按照层级分解，只比较同级元素。
给列表结构的每个单元添加唯一的key属性，方便比较。
React只会匹配相同class的component（这里面的class指的是组件的名字）合并操作，调用component的setState方法的时候,React将其标记为
dirty.到每一个事件循环结束,React检查所有标记dirty的component重新绘制.
选择性子树渲染。
开发人员可以重写shouldComponentUpdate 提高diff的性能。
8.react生命周期函数
初始化阶段：
ogetDefaultProps:
获取实例的默认属性
ogetInitialState:
获取每个实例的初始化状态
ocomponentWillMount：
组件即将被装载、渲染到页面上
orender:
组件在这里生成虚拟的DOM节点
ocomponentDidMount:
组件真正在被装载之后运行中状态：
ocomponentWillReceiveProps:
组件将要接收到属性的时候调用
oshouldComponentUpdate:
组件接受到新属性或者新状态的时候
（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了）
ocomponentWillUpdate:
组件即将更新不能修改属性和状态
orender:
组件重新描绘
ocomponentDidUpdate:
组件已经更新销毁阶段：
ocomponentWillUnmount:
组件即将销毁解析：
有三大阶段，每阶段的细分5-5-1
9.shouldComponentUpdate是做什么的？
（react性能优化是哪个周期函数？
）
shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。
因为dom的描绘非常消耗性能，如果我们能在
shouldComponentUpdate 方法中能够写出更优化的domdiff算法，可以极大的提高性能。
10.为什么虚拟dom会提高性能?
（必考）
虚拟dom相当于在js和真实dom中间加了一个缓存，利用domdiff算法避免了没有必要的dom操作，从而提高性能。
用JavaScript对象结构表示DOM树的结构；然后用这个树构建一个真正的
DOM树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。
然后用新的树和旧的树进行比较，记录两棵树差异把2所记录的差异应用到步骤1
所构建的真正的DOM树上，视图就更新了。
11.React中refs的作用是什么？
Refs是React提供给我们的安全访问DOM元素或者某个组件实例的句柄。
我们可以为元素添加ref属性然后在回调函数中接受该元素在DOM树中的句柄，该值会作为回调函数的第一个参数返回：
classCustomFormextendsComponent{handleSubmit=（） =>{
console.log（"InputValue:
",this.input.value）;
};
render（）{return（
（this.input=input）} />
Submit
）;
}
}
上述代码中的input域包含了一个ref属性，该属性声明的回调函数会接收
input对应的DOM元素，我们将其绑定到this指针以便在其他的类函数中使
用。
另外值得一提的是，refs并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：
functionCustomForm（{handleSubmit}）{letinputElement;
return（
handleSubmit（inputElement.value）}>
（inputElement =input）} />
Submit
）;
}
12.setState和replaceState的区别
setState是修改其中的部分状态，相当于Object.assign，只是覆盖，不会减少原来的状态
replaceState是完全替换原来的状态，相当于赋值，将原来的state替换为另一个对象，如果新状态属性减少，那么state中就没有这个状态了
13.redux有什么缺点
一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从
store取。
当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的
shouldComponentUpdate 进行判断。
14.简述flux思想
Flux的最大特点，就是数据的"单向流动"。
1.用户访问View
2.View发出用户的Action
3.Dispatcher收到Action，要求Store进行相应的更新
4.Store更新后，发出一个"change"事件
5.View收到"change"事件后，更新页面
15.了解redux么，说一下redux吧
redux是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，工作流程是view调用store的dispatch接收action传入store，reducer进行state操作，view通过store提供的getState获取最新的数据，
flux也是用来进行数据操作的，有四个组成部分action，dispatch，view，
store，工作流程是view发出一个action，派发器接收action，让store
进行数据更新，更新完成以后store发出change，view接受change
更新视图。
Redux和Flux很像。
主要区别在于Flux有多个可以改变应用状态的store，在Flux中dispatcher被用来传递数据到注册的回调事件，但是在redux中只能定义一个可更新状态的store，redux把
store和Dispatcher合并,结构更加简单清晰
新增state,对状态的管理更加明确，通过redux，流程更加规范了，减少
手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。
一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们
16.React中有三种构建组件的方式React.createClass（）、ES6class和无状态函数。
17.react组件的划分业务组件技术组件？
根据组件的职责通常把组件分为UI组件和容器组件。
UI组件负责UI的呈现，容器组件负责管理数据和逻辑。
两者通过React-Redux提供connect方法联系起来。
18.描述事件在React中的处理方式
为了解决跨浏览器兼容性问题，您的React中的事件处理程序将传递
SyntheticEvent 的实例，它是React的浏览器本机事件的跨浏览器包装器。
这些SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏
览器中都兼容。
有趣的是，React实际上并没有将事件附加到子节点本身。
React将使用单个事件监听器监听顶层的所有事件。
这对于性能是有好处的，这也意味着在更新DOM时，React不需要担心跟踪事件监听器。
19.应该在React组件的何处发起Ajax请求
在React组件中，应该在componentDidMount 中发起网络请求。
这个方法会在组件第一次“挂载”（被添加到DOM）时执行，在组件的生命周期中仅会执行一次。
更重要的是，你不能保证在组件挂载之前Ajax请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用setState，这将不起作用。
在componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
20.（在构造函数中）调用super（props）的目的是什么
在super（）被调用之前，子类是不能使用this的，在ES2015中，子类必须在
constructor中调用super（）。
传递props给super（）的原因则是便于（在子类中）能在constructor 访问this.props。
21.除了在构造函数中绑定this，还有其它方式吗
你可以使用属性初始值设定项（propertyinitializers）来正确绑定回调，
create-react-app也是默认支持的。
在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。
22.为什么建议传递给setState的参数是一个callback而不是一个对象
因为this.props和this.state的更新可能是异步的，不能依赖它们的值去计算下一个state。
23.何为高阶组件（higherordercomponent）
高阶组件是一个以组件为参数并返回一个新组件的函数。
HOC运行你重用代码、逻辑和引导抽象。
最常见的可能是Redux的connect函数。
除了简单分享工具库和简单的组合，HOC最好的方式是共享React组件之间的行为。
如果
你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的HOC。
24.何为受控组件（controlledcomponent）
在HTML中，类似,