本文详细梳理了React.js面试中的重点问题，包括React事件绑定原理、setState的优缺点、组件通信、类组件与函数组件区别、路由概念、性能优化手段、React Hooks的应用、虚拟DOM的优势与实现、React与Vue的diff优化等。深入探讨了Redux与Vuex设计思想，以及React组件间的通信和Refs的使用。此外，还涵盖了React生命周期、React优化方法、Context API、React Fiber等内容，是准备React面试的必备资料。
★★★★ React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
★★★★ 新出来两个钩子函数？和砍掉的will系列有啥区别？
★★ React 组件中 props 和 state 有什么区别？
★★★★ redux本来是同步的，为什么它能执行异步代码？中间件的实现原理是什么？
★★★ React组件生命周期按装载，更新，销毁三个阶段分别都有哪些？
★★★★★ 调用this.setState之后，React都做了哪些操作？怎么拿到改变后的值？
★★★ 循环执行setState组件会一直重新渲染吗？为什么？
★★★ React类组件，函数组件，在类组件修改组件对象会使用。
★★★ useEffect 和 useLayoutEffect 的区别
★★ React 中 refs 干嘛用的？如何创建 refs？
★★★ 在构造函数调用 super 并将 props 作为参数传入的作用是啥？
★★★ React 组件生命周期有哪些不同阶段？React 的生命周期方法有哪些？
★★★ React 中的StrictMode(严格模式)是什么？
this.setState((prevState, props) => {
return {
streak: prevState.streak + props.count
}
})
★★ 在 React 中使用构造函数和 getInitialState 有什么区别？
★★★★ Hooks 会取代 render props 和高阶组件吗？
★★★★ 当调用setState时，React render 是如何工作的？
★★★ 在js原生事件中 onclick 和 jsx 里 onclick 的区别
★★★★ shouldComponentUpdate的作用是什么？
★★★ React状态管理工具有哪些？redux actionCreator都有什么？
★★★ redux中使用setState不能立刻获取值，怎么办
★★★ 为什么不建议在 componentWillMount 做AJAX操作
★★★★ React-router-dom内部是怎么样实现的，怎么做路由守卫？
★★★★ redux中sages和thunk中间件的区别，优缺点
★★★ useCallback是干什么的？使用useCallback有什么好处？
★★★ 简单说一下，如何在react中实现瀑布流加载？（左右两列的一个商品长列表）
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——对应路由的两种模式，包括<BrowsersRouter>与<HashRouter>；
（2）route matching组件——控制路径对应的显示组件，可以进行同步加载和异步加载，<Route>；
（3）navigation组件——用做路由切换和跳转，<Link>；
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的名字都是
最低0.47元/天 解锁文章
扫一扫
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
