web前端常见面试题（react篇）
基础部分：
请讲一下react的生命周期？
答：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 中进行渲染之前调用。
什么是JSX？
答：JSX 是J avaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能。就是可以js和xml写到同一文件了。
什么是展示组件？什么是容器组件？
答：展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。(子组件)
容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。(父组件)
React中Component与PureComponent的区别？
答：PureComponent和Component几乎一样，对于PureComponent而言，当其props或者state改变之时，新旧props与state将进行浅对比（shallow comparison）。另一方面，Component默认的情况下其shouldComponentUpdate方法并不进行新旧props与state的对比。
React 中 key 的重要性是什么？
答：key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。
什么是有状态组件？什么是无状态组件？
答：有状态组件它属于一个class类,有继承,可以通过this来接收状态和属性，有生命周期。
无状态组件 它是一种函数式组件，没有state, 接收Props，渲染DOM，而不关注其他逻辑。
什么是ref？
答：React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。
什么是高阶组件（HOC）？
答：高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。
你能用HOC做什么？
答：HOC可用于许多任务，例如：
- 代码重用，逻辑和引导抽象
- 渲染劫持
- 状态抽象和控制
- Props 控制
react hook是什么？
答：react hook是react 1.6+的新特性，hook是允许从功能组件(function component)“挂钩”React状态和生命周期功能的功能。
react组件之间是怎么通信的？
答：
父传子：利用props
子传父：利用props 传入回调函数，或者redux等状态管理框架
跨级组件通信：使用context，或者redux等状态管理框架
redux是什么？具体怎么去使用？
答：
底层原理：
解析一下react渲染原理和过程？
答：因为操作dom元素会触发浏览器的回流和重绘，影响性能，所以减少操作dom就能提升性能。React会调用render函数构建一棵虚拟Dom树。当state/props改变时，react会再次调用render函数，构建一个新的虚拟Dom树，和旧的树作对比，批量更新节点。
react使用什么更新节点？原理和过程是什么？
答：主要使用了diff算法，react根据两个假设
1.两个相同的组件产生类似的DOM结构，不同组件产生不同DOM结构
2.对于同一层次的一组子节点，它们可以通过唯一的id区分
对传统的diff作了更改。将算法复杂度从O(n^3)降低到O(n)。
react的diff函数只对同层的节点进行比对比，即父节点相同会进行对比，因为不同组件的dom结构不同，所以没必要对比子节点。
如果出现节点不同的情况，会直接删除节点，重新新建节点。
如果节点相同属性不同，则会更新属性。
请简述react的事件机制？
答：react利用了事件委托机制实现事件机制，事件并没有绑定在真实的dom节点上面，是绑定在最外层的docment上。使用一个统一的监听器，所有的事件都由这个监听器统一分发。
组件挂载更新时，会将事件分门别类放进事件池，事件触发根据event找到对应的组件，再组件标识和事件类型找到对应的事件进行监听回调，然后，执行回调函数。
fiber是什么？
答：因为js的运数、页面布局和页面绘制都在浏览器的主线程里，所以，如果js占用浏览器主线程事件长会造成掉帧。所以，react团队重写了Reconciler 层，即组件生命周期和diff算法，react团队命名为fiber Reconciler，建立了自己的组件调用栈，让diff计算可打断。
请简述fiber的原理和流程？
答：Fiber 树在首次渲染的时候会一次过生成，这个树是由Virtual Dom和一些调度信息组成，每个节点包括父节点、子节点、兄弟节点、节点实列。后续进行diff计算时，会根据已有树和最新 Virtual DOM 的信息，生成一棵新的树。这个树每生成一个节点，都会把控制权交还个浏览器，去查看有没有优先级较高的任务需要处理，没有就继续构建。如果有就会放弃当前生成的树，等空闲再重新执行。生成fiber 树的过程中，如果发现需要更新的信息时，fiber Reconciler 会将信息保存Effect List当中，等树构建完之后批量更新，批量更新跟构建fiber不同，是无法打断的。
什么是服务器渲染？
答：服务器接到用户请求之后，计算出用户需要的数据，然后将数据更新成视图（也就是一串dom字符）发给客户端，客户端直接将这串字符塞进页面即可。
服务器渲染和浏览器渲染对比有什么优点？有什么缺点？
答：页面相应比较快，用户体验比较好。另外对于搜索引擎比较友好，优化seo。缺点是增加了一层nodejs，增加了服务器的计算。前后端分工不明，不能很好并行开发。
