70场面试,复盘我遇到的有趣问题(九)

        顺丰二面面经续集。
1.monorepo的各个子应用是独立打包的吗?
        有在字节实习的uu应该都接触过monorepo。我是进去之后才知道这个东西,但对他的原理也不明白,今天跟大家一块了解一下。
        首先什么是monorepo。我个人理解monorepo是一个将不同项目的代码放在同一个代码仓库中组织起来的一种方式。可以想象github中的一个仓库中有很多小项目的代码文件。这些项目虽然有可能是相关的,但通常在逻辑上是独立的,并由不同的团队维护。像我之前实习时的项目仓库使用monorepo,仓库中既有web前端的代码,也有小程序前端的代码。
        monorepo有什么好处?1.多个项目之间需要共享代码、组件或者工具库时,monorepo比较简便。使用monorepo就不需要将想要共享的部分发布npm包再去别的项目中安装,而是有一个share目录,专门放置共享的组件或方法等。2.统一依赖版本管理时更好的确保一致性。3.根目录下有一个package.json,每个项目也有自己的package.json,通过在根目录下npm install,它会自动安装所有子项目的依赖。4.在开发的时候,省去了在多个代码仓库之间切换的麻烦。还有很多优点,比如统一的CI/CD,统一的构建流程......
        再谈谈不好的点。从我自己的使用角度来说,刚开始最常见的问题就是更新依赖时很容易改变了其他子项目的依赖,在全局npm install或者一些api update的时候,会给所有子项目都更新,但是可能版本更新会给别的项目带来不可预见的问题,这也是为什么需要code review,把这些不是你应该改动的东西要改回去。除此之外,打包构建需要专门优化,否则会出现打包时间过长。
        那么回到monorepo的子项目是否是独立打包这个问题。要知道monorepo的每个子项目都是可以独立开发、部署、构建...试想如果只有其中一个子项目fix了一个线上bug,但是整个项目都要重新打包发布那么整个流程岂不是太过冗杂了,所以一定是可以独立打包独立安装才有足够灵活性的。但是能独立打包并不意味着你的项目中的子项目都是独立打包的,具体还要看是否在子项目package.json中配置了打包脚本。
2.setState是同步还是异步
        拷打完项目就开始拷打原理了。这个问题当时没记住啊,恨自己没多看两篇文章。
        首先要知道这个同步和异步跟我们所谓的js同步任务异步任务不一样,是指调用setState后能否马上得到更新后的值,即是否立即调用render 函数渲染视图。
        在react18之前,在react 可调度范围内的setState 就是异步的,反之,则为同步。什么是可调度范围?react 合成事件内同步执行的setState 就是可调度范围。什么是react 可调度范围外呢?宏任务:setTimeout ,微任务:.then ,或直接在DOM元素上绑定的事件等都是react 可调度范围外。
        在react18中多了批处理功能(当 React 在一个单独的重渲染事件中批量处理多个状态更新以此实现优化性能),这意味着之前没办法批处理的情况都可以批处理了。在每次setstate时会产生一个优先级标志lane,对于相同优先级的多次更新任务,react实际只会复用第一个调度任务,在一次批量更新结束后才会更新实际变量的值。相同优先级的setState是异步执行的,而不同优先级则是同步的。
        需要注意的是,由于js的闭包特性,同一份代码在类组件和函数组件中的执行结果是有差异的。
        详细源码理解推荐以下链接(彻底搞懂setState到底是同步还是异步1,2,3):
        https://blog.csdn.net/y_ang_1/article/details/136941891?spm=1001.2014.3001.5502
        https://blog.csdn.net/y_ang_1/article/details/137151783?spm=1001.2014.3001.5502
        https://blog.csdn.net/y_ang_1/article/details/137151803?spm=1001.2014.3001.5502
3.react的任务优先级策略,以及哪些任务优先级比较高?
        这么多场面试,这是唯一一个问了这个问题的面试官,不得不说是有水平和经验的。东西太多了,我水平也不够,帖个帖子:https://juejin.cn/post/7207406497508114489
        涉及原理的内容确实很难理解和掌握,多看点帖子多看点源码吧。
        如果大家觉得对自己有帮助,感谢大家点赞收藏送花评论!希望大家意向多多offer多多!
#软件开发##软件开发2024笔面经##前端##顺丰#
全部评论

相关推荐

2025-12-24 15:25
已编辑
门头沟学院 前端工程师
是腾讯的csig腾讯云,前天晚上九点突然打电话约面,激动的通宵学了一晚上,第二天状态很差改了今天(以后再也不通宵学习了)感觉自己浪费了面试官一个半小时单纯手写+场景,无八股无项目无算法,打击真的很大,全是在面试官提醒的情况下完成的,自己技术方面真的还是有待提高,实力匹配不上大厂和已经面试的两个公司完全不一样,很注重编码能力和解决问题的能力,然而我这两个方面都很薄弱,面试官人很好很耐心的等我写完题目,遇到瓶颈也会提醒我,写不出题也会很耐心的跟我讲解好感动,到最后面试结束还安慰我打算把下周最后一场面试面完之后就不面啦,如果能去实习还是很开心,但是最重要的还是好好努力提高技术以下是面经第一题// 实现一个解析 url 参数的函数function parseUrl(urlStr) {// TODO}parseUrl('*********************************************');// 返回 {a: 1, b: 2, c: 3}追问:在链接里见过什么部分?用 hash 路由的话放在哪第二题// 考虑有一个异步任务要执行,返回 Promise,这个任务可能会失败,请实现 retry 方法,返回新方法,可以在失败后自动重试指定的次数。/*** 异步任务重试* @param task 要执行的异步任务* @param times 需要重试的次数,默认为 3 次*/function retry(task, times = 3) {// TODO: 请实现}// ---------------测试示例 ----------------// 原方法const request = async (data) => {// 模拟失败if (Math.random() < 0.7) {throw new Error('request failed');}const res = await fetch('https://jsonplaceholder.typicode.com/posts', {method: 'POST',body: JSON.stringify(data),});return res.json();}// 新的方法const requestWithRetry = retry(request);// 使用async function run() {const res = await requestWithRetry({ body: 'content' });console.log(res);}run();第三题就是给 retry 函数添加类型注释,用到泛型第四题:在组件库中将 Alert 用 api 的形式实现(应该就是 message 这个组件)怎么渲染到一个浮层里而不是原地渲染出来
不知道怎么取名字_:技术这个东西,太杂了,而且要下功夫的
查看5道真题和解析
点赞 评论 收藏
分享
评论
9
9
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务