★★★★ 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的名字都是