飞项科技 - 前端面试
面试时间：2023-04-07
公司全称：飞项科技（广州）有限公司
公司位置：大观中路492号慧创百思产业园A区241
面试题
谈谈你对原型链的理解
查看答案
当访问对象的某个属性或者方法时，如果在对象自身上找不到，就会到对象的原型上查找，如果也找不到，就会到原型的原型上查找，一直找到顶层为止，就构成了一条链路，这就是原型链。
ES5、ES6 的继承
查看答案
ES5 包含 6 种继承方式。分别为原型链继承、构造函数继承、组合式继承、原型式继承、寄生式继承、寄生组合式继承。
ES6 通过 extends 关键字进行继承。
对象如何进行解构？
查看答案
将一个对象中的属性显式的写在另一个对象中。如：
const { name, age } = userInfo
如何让一个空对象 + 2 === 4？
查看答案
JSON.stringify({}).length + 2 === 4
当父组件数据变化与子组件无关时，如何避免子组件重新渲染？
查看答案
可以用到 React.memo、useMemo、useCallback 一起来解决。
写过哪些自定义 Hooks？
查看答案
页面滚动位置监听 Hooks。
全局弹窗 Hooks。
权限校验 Hooks。
谈谈你对错误边界的理解。如何实现错误边界？
查看答案
错误边界是一个 React 组件，它可以捕获其子组件树任何位置的 JS 错误，并打印这些错误，同时显示降级 UI，而不去渲染那些已崩溃的子组件树。
方式一（手写错误边界组件）：一个 class 组件中只要定义了 static getDerivedStateFromError() 或 componentDidCatch() 生命周期中任何一个即可成为一个错误边界。
方式二（使用第三方库）：react-error-boundary
React 组件生命周期
查看答案
挂载阶段：constructor() -> render()、componentDidMount()
更新阶段：componentWilReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() -> render() -> componentDidUpdate()
卸载阶段：componentWillUnmount()
说说你对 React Hook 的闭包陷阱的理解，有哪些解决方案？
查看答案
闭包陷阱：由于闭包的存在，导致无法获取 state 更新后的值。
解决方案：
方案一：使用 useRef() 绑定数据。
方案二：useState() 中的数据定义为一个对象。
开发的过程中你用到过哪些设计模式以及具体的应用场景？
查看答案
适配器模式。
单例模式。
代理模式。
发布订阅模式。
观察者模式。
装饰者模式。
在 umi 中如何配置 dva？
查看答案
在一个配置文件中定义一个对象，包含 state、reducers、effects 属性并导出，这就是一个 dva 配置。
单元测试的流程逻辑
查看答案
确定输入和输出
准备测试数据
编写测试用例
验证测试结果