部门:m平台-m平台技术部
时长:14:50-15:40
1.自我介绍
2. 介绍一个项目
描述、敏捷开发、技术栈(React 全家桶)、
我自己开发页面、公共组件、参与讨论需求
3. 说说函数组件比类组件的优点
-
简洁性和易理解性:函数组件更简洁、直观,易于理解和维护。由于它们只是普通的JavaScript函数,因此它们的行为更可预测,也更易于学习和掌握。从原生JS来更容易掌握。
-
性能优势:函数组件通常比类组件更高效。这是因为它们没有类组件中常见的额外开销,例如为每次渲染创建新实例的复杂性。函数组件在渲染过程中更为轻量级,因此可以提高应用的性能。
-
易于测试:由于函数组件只是简单的函数,它们可以更容易地进行单元测试。可以使用像Jest这样的JavaScript测试工具直接对函数组件进行测试,而无需引入复杂的模拟和存根。
-
更好的与Hooks集成:函数组件可以充分利用React Hooks的功能,如useState、useEffect等。这些Hooks允许在函数组件中管理状态和执行副作用操作,从而增强了函数组件的功能性和灵活性。而类组件则需要使用生命周期方法和状态管理,这使得代码结构相对复杂。
-
面试官补充:this指向性
4. 类组件的componentWillUnmount对应函数组件的哪个地方?
useEffect,执行副作用操作,返回一个清理函数,在组件卸载时调用。
如清除计时器或解绑事件监听器。
5. useEffect的依赖项数组有什么用?应该怎么用?使用不当会有什么后果?
用于指定副作用函数依赖于哪些props或state。当依赖项数组中的任何一个值发生变化时,useEffect
会重新执行副作用函数。
- 不传入依赖项数组:如果不传入依赖项数组,则副作用函数会在每次组件重新渲染时都执行。
- 传入空数组:如果传入一个空数组
[]
,则副作用函数只会在组件挂载和卸载时执行一次。 - 传入具体的依赖项:如果传入具体的依赖项数组,如
[dep1, dep2]
,则副作用函数会在dep1
或dep2
的值发生变化时执行。
使用不当:(事后诸葛亮)
- 在依赖项数组应尽可能传入不可变的数据类型,即基本数据类型,如number、string、boolean,避免对象引用变更造成依赖项的不可预测。
- 在useEffect中避免放置useState,否则导致re-render!
6. useState的工作原理是什么?
用于在函数组件中添加内部状态
返回一个包含当前状态和更新该状态函数的数组。这个数组的第一个元素是当前的状态值,第二个元素是一个函数,用于更新这个状态值。每次调用这个更新函数时,它都会接收一个新的状态值,并触发组件的重新渲染(render)。
组件的初始渲染期间,返回的状态值与useState
的初始参数值相同。这个初始参数是我们在调用useState
时传入的,它代表了状态的初始值。
事后诸葛亮:unstable_batchedUpdates可用于手动批量更新state,可以指定多个setState合并为一个更新请求。
7.url渲染过程
DNS+TCP握手(最后一次握手是客户端到服务端,发送method、url、header)+dom树构建+加载标签(script、link)+无defer或async阻塞
8.接口请求应该放在哪
答:useEffect里
先渲染dom树,有加载进度条、骨架屏等提示等待(增强用户体验),加载完后才请求接口,渲染数据到页面上。
事后诸葛亮:
- useEffect可以看作一直时间循环,在最后的宏任务才执行,避免阻塞主线程渲染。
- 如果直接放组件里,就会每次render都请求一次接口,浪费网络资源。在useEffect里可以保证只加载一次,或是需要的时候,即依赖项变更时,才重新发起请求。
9. 开发公共组件应遵循哪些原则
- 我回答:
- 样式统一,均从甲方的figma页面而来,基本遵循figma设计的样式,因为在各个页面的都相同
- 预留props,暴露必要接口,也保留拓展运算符的others,方便传其他参数
- 预留className属性,方便外部对内部进行微调
- 面试官补充:
自己的逻辑自己管理,某些数据和操作能自己管理的就不需要再暴露出去成为必填项(如setState这种) - 事后诸葛亮:
- 高内聚,低耦合:高度的内聚性,即组件的功能应该紧密相关并集中在一起。同时,组件之间的耦合度应该尽可能低,以减少组件之间的依赖和相互影响。
- 可复用性:使其能够在多个场景和项目中被重复使用。这可以通过使用泛型、props等方式来实现,使组件更加灵活和通用。
- 明确性:命名应该清晰明确,能够准确描述组件的功能和用途。同时,组件的props和状态也应该有明确的命名和类型定义,以便其他开发者能够快速理解和使用。
- 可维护性:代码应该易于维护和扩展。这可以通过编写清晰的代码、添加必要的注释、使用类型注解等方式来实现。此外,公共组件应该避免引入不必要的复杂性和依赖,以减少维护成本。
- 性能优化:对于需要频繁渲染或涉及大量计算的公共组件,应该考虑性能优化。例如,可以使用React的memoization技术(如React.memo或useMemo)来避免不必要的重新渲染,或使用其他性能优化手段来提升组件的性能。
- 遵循React最佳实践:遵循React的最佳实践,如避免直接修改props、使用受控组件、正确处理事件等。这有助于确保组件的稳定性和可靠性。
- 文档化:提供详细的文档说明。文档应该包括组件的用法、props说明、示例代码等,以便其他开发者能够快速上手并正确使用组件。
算法1:
url的search转对象(面试官:注意可能为undefined)
location.href=location.origin+location.pathname+location.hash+location.search
location.origin=location.protocol+‘//’+location.host
location.host=location.hostname+(location.port?:${location.port}
:‘’)
算法2:
数组求交集、差集(filter、includes)
注意:
- 重复使用的变量应给个变量名,
- 函数名应清晰正确
- 可在开头加ts-check
吐槽:没有TS不方便,可以用ts-check渐进增强,或eslint检查