2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---React篇
★★★ React 事件绑定原理
★★★ React中的 setState 缺点是什么呢
★★★ React组件通信如何实现
★★★ 类组件和函数组件的区别
★★★ 请你说说React的路由是什么？
★★★★★ React有哪些性能优化的手段？
★★★★ React hooks 用过吗，为什么要用？
★★★★ 虚拟DOM的优劣如何？实现原理？
★★★★ React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
★★★ 聊聊 Redux 和 Vuex 的设计思想
★★★ React中不同组件之间如何做到数据交互？
★★★ React中refs的作用是什么？
★★★★ 请列举react生命周期函数。
★★★ 组件绑定和js原生绑定事件哪个先执行？
★★ fetch的延时操作
★★ A 组件嵌套 B 组件，生命周期执行顺序
★★★ diff 和 Key 之间的联系
★★★ 虚拟 dom 和原生 dom
★★★★ 新出来两个钩子函数？和砍掉的will系列有啥区别？
★★★ react中如何打包上传图片文件
★★★ 对单向数据流和双向数据绑定的理解，好处？
★★ React 组件中 props 和 state 有什么区别？
★★ react中组件分为那俩种？
★★ react中函数组件和普通组件的区别？
★★★★ react中 setState 之后做了什么？
★★★★ redux本来是同步的，为什么它能执行异步代码？中间件的实现原理是什么？
★★★★ 列举重新渲染 render 的情况
★★★ React 按需加载
★★★ React 实现目录树（组件自身调用自身）
★★★ React组件生命周期按装载，更新，销毁三个阶段分别都有哪些？
★★★★★ 调用this.setState之后，React都做了哪些操作？怎么拿到改变后的值？
★★★ 如果我进行三次setState会发生什么
★★★ 循环执行setState组件会一直重新渲染吗？为什么？
★★★ 渲染一个react组件的过程
★★★ React类组件，函数组件，在类组件修改组件对象会使用。
★★★★ 类组件怎么做性能优化？函数组件怎么做性能优化？
★★★ useEffect 和 useLayoutEffect 的区别
★★★ hooks 的使用有什么注意事项
★★★ 纯函数有什么特点，副作用函数特点
★★ React 中 refs 干嘛用的？如何创建 refs？
★★★ 在构造函数调用 super 并将 props 作为参数传入的作用是啥？
★★★ 如何 React.createElement ？
★★★ 讲讲什么是 JSX ？
★★★ 为什么不直接更新 state 呢？
★★★ React 组件生命周期有哪些不同阶段？React 的生命周期方法有哪些？
★★★ 这三个点(...)在 React 干嘛用的？
★★★ React 中的 useState() 是什么？
★★★ React 中的StrictMode(严格模式)是什么？
★★★ 为什么类方法需要绑定到类实例？
★★★★ 什么是 prop drilling，如何避免？
★★ 描述 Flux 与 MVC？
★★★ 这段代码有什么问题吗？
this.setState((prevState, props) => {
return {
streak: prevState.streak + props.count
}
})
★★★★ 什么是 React Context?
★★★★★ 什么是 React Fiber?
★★★ 如何在 React 的 Props 上应用验证？
★★ 在 React 中使用构造函数和 getInitialState 有什么区别？
★★★ 如何有条件地向 React 组件添加属性？
★★★★ Hooks 会取代 render props 和高阶组件吗？
★★★ 如何避免组件的重新渲染？
★★★ 什么是纯函数？
★★★★ 当调用setState时，React render 是如何工作的？
★★★ 如何避免在React重新绑定实例？
★★★ 在js原生事件中 onclick 和 jsx 里 onclick 的区别
★★★★ diff复杂度原理及具体过程画图
★★★★ shouldComponentUpdate的作用是什么？
★★★ React组件间信息传递
★★★ React状态管理工具有哪些？redux actionCreator都有什么？
★★★★ 什么是高阶组件、受控组件及非受控组件？都有啥区别
★★★ vuex 和 redux 的区别？
★★★ Redux遵循的三个原则是什么？
★★★ React中的keys的作用是什么？
★★★ redux中使用setState不能立刻获取值，怎么办
★★ 什么是JSX
★★★ React新老版生命周期函数
★★★★ vue react都怎么检测数据变化
★★★ React中怎么让 setState 同步更新？
★★★★ 什么是 immutable？为什么要使用它？
★★★ 为什么不建议在 componentWillMount 做AJAX操作
★★★★ 如何在React中构建一个弹出的遮罩层
★★★★★ React中的Context的使用
★★★★ React路由懒加载的实现
★★★★ React-router-dom内部是怎么样实现的，怎么做路由守卫？
★★★★ redux中sages和thunk中间件的区别，优缺点
★★ 为什么说React是view（视图层）
★★★ 怎么用useEffect模拟生命周期函数？
★★★ useCallback是干什么的？使用useCallback有什么好处？
★★★ 能简单说一下redux-sage的使用流程吗？
★★★★ React复用组件的状态和增强功能的方法
★★★ redux 和 mobx 的区别
★★★ react中如何实现命名插槽
★★★ 简单说一下，如何在react中实现瀑布流加载？（左右两列的一个商品长列表）
★★★★★ 简述一下 memoization
React.js 面试真题
★★★ React 事件绑定原理
/*
一、react并没有使用原生的浏览器事件，而是在基于Virtual DOM的基础上实现了合成事件，采用小驼峰命名法，默认的事件传播方式是冒泡，如果想改为捕获的话，直接在事件名后面加上Capture即可；事件对象event也不是原生事件对象，而是合成对象，但通过nativeEvent属性可以访问原生事件对象；
二、react合成事件主要分为以下三个过程：
1、事件注册
在该阶段主要做了两件事：document上注册、存储事件回调。所有事件都会注册到document上，拥有统一的回调函数dispatchEvent来执行事件分发，类似于document.addEventListener("click",dispatchEvent)。
register:
addEventListener-click
addEventListener-change
listenerBank:
{
click: {key1: fn1, key2: fn2},
change: {key1: fn3, key3: fn4}
}
2、事件合成
事件触发后，会执行一下过程：
（1）进入统一的事件分发函数dispatchEvent；
（2）找到触发事件的 ReactDOMComponent；
（3）开始事件的合成；
—— 根据当前事件类型生成指定的合成对象
—— 封装原生事件和冒泡机制
—— 查找当前元素以及他所有父级
—— 在listenerBank根据key值查找事件回调并合成到 event(合成事件结束)
3、批处理
批量处理合成事件内的回调函数
*/
★★★ React中的 setState 缺点是什么呢
/*
setState执行的时候可以简单的认为，隶属于原生js执行的空间，那么就是属于同步，被react处理过的空间属于异步，这其实也是一种性能的优化，如果多次使用setState修改值，那么在异步中会先进行合并，再进行渲染，降低了操作dom的次数，具体如下：
（1）setState 在合成事件和钩子函数中是“异步”的，在原生事件和 `setTimeout` 中都是同步的。
（2）setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
（3）setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。
（4）正是由于setState存在异步的机制，如果setState修改值的时候依赖于state本身的值，有时候并不可靠，这时候我们需要传入一个回调函数作为其入参，这个回调函数的第一个参数为更新前的state值。
*/
★★★ React组件通信如何实现
/*
react本身:
(1)props——父组件向子组件通过props传参
(2)实例方法——在父组件中可以用 refs 引用子组件，之后就可以调用子组件的实例方法了
(3)回调函数——用于子组件向父组件通信，子组件调用props传递过来的方法
(4)状态提升——两个子组件可以通过父组件定义的参数进行传参
(5)Context上下文——一般用作全局主题
(6)Render Props——渲染的细节由父组件控制
状态管理:
(1) mobx/redux/dva——通过在view中触发action，改变state，进而改变其他组件的view
*/
★★★ 类组件和函数组件的区别
/*
（1）语法上：函数组件是一个函数，返回一个jsx元素，而类组件是用es6语法糖class定义，继承component这个类
（2）类组件中可以通过state进行状态管理，而在函数组件中不能使用setState()，在react16.8以后，函数组件可以通过hooks中的useState来模拟类组件中的状态管理；
（3）类组件中有一系列的生命周期钩子函数，在函数组件中也需要借助hooks来使用生命周期函数；
（4）类组件能够捕获**最新**的值（永远保持一致），这是因为当实例的props属性发生修改时，class组件能够直接通过this捕获到组件最新的props；而函数式组件是捕获**渲染**所使用的值，已经因为javascript**闭包**的特性，之前的props参数保存在内存之中，无法从外部进行修改。
*/
★★★ 请你说说React的路由是什么？
/*
路由分为前端路由和后端路由，后端路由是服务器根据用户发起的请求而返回不同内容，前端路由是客户端根据不同的URL去切换组件；在web应用前端开发中，路由系统是最核心的部分，当页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。
react生态中路由通常是使用react-router来进行配置，其主要构成为：
（1）Router——对应路由的两种模式，包括与；
（2）route matching组件——控制路径对应的显示组件，可以进行同步加载和异步加载，；
（3）navigation组件——用做路由切换和跳转，；
BrowserRouter与HashRouter的区别：
（1）底层原理不一样：BrowserRouter使用的是H5的history API，不兼容IE9及以下版本；HashRouter使用的是URL的哈希值；
（2）path表现形式不一样：BrowserRouter的路径中没有#,例如：localhost:3000/demo/test；HashRouter的路径包含#,例如：localhost:3000/#/demo/test；
（3）刷新后对路由state参数的影响：BrowserRouter没有任何影响，因为state保存在history对象中；HashRouter刷新后会导致路由state参数的丢失；
*/
★★★★★ React有哪些性能优化的手段？
/*
1、使用纯组件；
2、使用 React.memo 进行组件记忆（React.memo 是一个高阶组件），对于相同的输入，不重复执行；
3、如果是类组件，使用 shouldComponentUpdate（这是在重新渲染组件之前触发的其中一个生命周期事件）生命周期事件，可以利用此事件来决定何时需要重新渲染组件；
4、路由懒加载；
5、使用 React Fragments 避免额外标记；
6、不要使用内联函数定义（如果我们使用内联函数，则每次调用“render”函数时都会创建一个新的函数实例）；
7、避免在Willxxx系列的生命周期中进行异步请求，操作dom等；
8、如果是类组件，事件函数在Constructor中绑定bind改变this指向；
9、避免使用内联样式属性；
10、优化 React 中的条件渲染；
11、不要在 render 方法中导出数据；
12、列表渲染的时候加key；
13、在函数组件中使用useCallback和useMemo来进行组件优化，依赖没有变化的话，不重复执行；
14、类组件中使用immutable对象；
*/
★★★★ React hooks 用过吗，为什么要用？
/*
Hooks 是React在16.8版本中出的一个新功能，本质是一种函数，可以实现组件逻辑复用，让我们在函数式组件中使用类组件中的状态、生命周期等功能，hooks的名字都是