React面试题归纳总结
19年毕业，首次工作面试emmm只能说是自己运气比较好，没问专业的问题（到现在都不知道自己是怎么进入现在这家公司的，笑哭），拾到拾到准备21换家公司啊，于是从网上各种搜罗过来的面试题，也不知道现在面试都问些啥，还要不要写试卷（手写代码，我内心是拒绝的；狗脸：上机的话，不让我百度也是懵逼的，真是太菜了啊），不说了，上面试题吧（我只是把别人的搬到自己博客上来，这样自己看起来方便些，等以后面试了，我再继续往下更新吧）
每天一点面试题
- 10.21 https://www.cnblogs.com/misterng/p/12578690.html
- 10.22 https://blog.csdn.net/qq_44163269/article/details/106272915
10.21 https://www.cnblogs.com/misterng/p/12578690.html
1、请讲一下react的生命周期？
1、点击这里感受下react的生命周期（参考简书）
2、这个博主讲的挺好
答：React的生命周期从广义上分为三个阶段：挂载、渲染、卸载。
componentWillMount() – 在渲染之前执行，在客户端和服务器端都会执行。
componentDidMount() – 仅在第一次渲染后在客户端执行。
componentWillReceiveProps() – 当从父类接收到 props 并且在调用另一个渲染器之前调用。
shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true 否则返回 false。默认情况下，它返回 false，解决重复渲染带来的性能问题。
componentWillUpdate() – 在 DOM 中进行渲染之前调用。
componentDidUpdate() – 在渲染发生后立即调用。
componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。
getDerivedStateFromProps(nextProps, prevState)-新的钩子，当从父类接收到 props 并且在调用另一个渲染器之前调用。
getSnapshotBeforeUpdate(prevProps, prevState)-新的钩子，在render之后，在 DOM 中进行渲染之前调用。
2、什么是JSX？
答：JSX 是JavaScript XML 的简写，是JavaScript的语法扩展，React.createElement 的语法糖。
是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能。就是可以js和xml写到同一文件了。
3、什么是展示组件？什么是容器组件？
答：展示组件：
1、展示页面的，可以调页面样式之类的。
2、专门通过 props 接受数据和回调，并且几乎不会有自身的状态，
3、有状态时，通常也只关心 UI 状态而不是数据的状态。(子组件)
容器组件：
1、调用接口获取数据，为展示组件或者其它容器组件提供数据和行为
2、它们会调用 Flux actions，并将其作为回调提供给展示组件。
3、有状态，因为它们是(其它组件的)数据源。(父组件)
4、React中Component与PureComponent的区别？
答：PureComponent和Component几乎一样，对于PureComponent而言，当其props或者state改变之时，新旧props与state将进行浅对比（shallow comparison）。另一方面，Component默认的情况下其shouldComponentUpdate方法并不进行新旧props与state的对比。
5、React 中 key 的重要性是什么？
答：key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。
6、什么是有状态组件？什么是无状态组件？
答：有状态组件它属于一个class类,有继承,可以通过this来接收状态和属性，有生命周期。
无状态组件 它是一种函数式组件，没有state, 接收Props，渲染DOM，而不关注其他逻辑。
7、什么是ref？
答：React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。
8、什么是高阶组件（HOC）？
答：高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。
9、你能用HOC做什么？
答：HOC可用于许多任务，例如：
代码重用，逻辑和引导抽象
渲染劫持
状态抽象和控制
Props 控制
10、react hook是什么？
答：react hook是react 1.6+的新特性，hook是允许从功能组件(function component)“挂钩”React状态和生命周期功能的功能。
11、react组件之间是怎么通信的？
答：
父传子：利用props
子传父：利用props 传入回调函数，或者redux等状态管理框架
跨级组件通信：使用context，或者redux等状态管理框架
12、redux是什么？具体怎么去使用？
答：
底层原理：
13、解析一下react渲染原理和过程？
答：因为操作dom元素会触发浏览器的回流和重绘，影响性能，所以减少操作dom就能提升性能。React会调用render函数构建一棵虚拟Dom树。当state/props改变时，react会再次调用render函数，构建一个新的虚拟Dom树，和旧的树作对比，批量更新节点。
14、react使用什么更新节点？原理和过程是什么？
答：主要使用了diff算法，react根据两个假设
1.两个相同的组件产生类似的DOM结构，不同组件产生不同DOM结构
2.对于同一层次的一组子节点，它们可以通过唯一的id区分
对传统的diff作了更改。将算法复杂度从O(n^3)降低到O(n)。
react的diff函数只对同层的节点进行比对比，即父节点相同会进行对比，因为不同组件的dom结构不同，所以没必要对比子节点。
如果出现节点不同的情况，会直接删除节点，重新新建节点。
如果节点相同属性不同，则会更新属性。
15、请简述react的事件机制？
答：react利用了事件委托机制实现事件机制，事件并没有绑定在真实的dom节点上面，是绑定在最外层的docment上。使用一个统一的监听器，所有的事件都由这个监听器统一分发。
组件挂载更新时，会将事件分门别类放进事件池，事件触发根据event找到对应的组件，再组件标识和事件类型找到对应的事件进行监听回调，然后，执行回调函数。
16、fiber是什么？
答：因为js的运数、页面布局和页面绘制都在浏览器的主线程里，所以，如果js占用浏览器主线程事件长会造成掉帧。所以，react团队重写了Reconciler 层，即组件生命周期和diff算法，react团队命名为fiber Reconciler，建立了自己的组件调用栈，让diff计算可打断。
17、请简述fiber的原理和流程？
答：Fiber 树在首次渲染的时候会一次过生成，这个树是由Virtual Dom和一些调度信息组成，每个节点包括父节点、子节点、兄弟节点、节点实列。后续进行diff计算时，会根据已有树和最新 Virtual DOM 的信息，生成一棵新的树。这个树每生成一个节点，都会把控制权交还个浏览器，去查看有没有优先级较高的任务需要处理，没有就继续构建。如果有就会放弃当前生成的树，等空闲再重新执行。生成fiber 树的过程中，如果发现需要更新的信息时，fiber Reconciler 会将信息保存Effect List当中，等树构建完之后批量更新，批量更新跟构建fiber不同，是无法打断的。
18、什么是服务器渲染？
答：服务器接到用户请求之后，计算出用户需要的数据，然后将数据更新成视图（也就是一串dom字符）发给客户端，客户端直接将这串字符塞进页面即可。
19、服务器渲染和浏览器渲染对比有什么优点？有什么缺点？
答：页面相应比较快，用户体验比较好。另外对于搜索引擎比较友好，优化seo。缺点是增加了一层nodejs，增加了服务器的计算。前后端分工不明，不能很好并行开发。
10.22 https://blog.csdn.net/qq_44163269/article/details/106272915
1. 请说下在react中如何处理异步的action
通过applyMiddleware来使用中间件来处理action
常用的中间件
reduxpromisemiddleware
reduxthunk
reduxsaga
2. render函数什么时候会执行？
当this.state 或者 this.props发生改变的时候render函数就会执行
3. react中如何对state中的数据进行修改？setState为什么是一个异步的
修改数据通过this.setState(参数1,参数2)
this.setState是一个异步函数
参数1 : 是需要修改的数据是一个对象
参数2 : 是一个回调函数，可以用来验证数据是否修改成功，同时可以获取到数据更新后的DOM结构 等同于componentDidMount
this.setState中的第一个参数除了可以写成一个对象以外，还可以写成一个函数，函数中第一个值为prevState 第二个值为prePprops this.setState((prevState,prop)=({}))
为什么setState是一个异步的？
当批量执行state的时候可以让DOM渲染的更快,也就是说多个setstate在执行的过程中还需要被合并
4. react中如何定义自定义属性，以及限制外部数据的类型
自定义属性
组件名称.defaultProps= { key:val }
限制外部数据的类型
引入propTypes第三方模块
类型限制 组件名称.propTypes = { key:propTypes.类型 }
5. react路由常用的一些组件配置项有哪些？
BrowserRouter
HashRouter
withRouterRoute
Link
NavLink
Switch
Redirect
6. reatc路由中Route渲染组件的方法有哪几种？区别是什么？
渲染方式有2种
7. 如何控制路由的路径完全匹配
给NavLink 或者 Route设置 exact属性
8. react中路由传递参数的方法有哪些？
动态路由传参数
query传值
9. react中的编程式导航方法有哪些？
this.props.history.push(“需要跳转的路径”)；
this.props.history.back()
this.props.history.forward()
this.props.history.replace()
10. react中的生命周期有哪些？
(1) 组件创建的过程
constructor
componentWillMount
render
componentDidMount
(2) 当props中的数据发生改变后会执行哪些生命周期函数
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
(3) 组件销毁的时候
componentWillUnmount