m‍‍‍‍‍团‍一‍面

本文介绍了React技术中的关键概念,如函数组件与类组件对比,函数组件的性能优势、useEffect的用法及其副作用管理,以及如何在项目中合理安排接口请求和开发公共组件的原则。
摘要由CSDN通过智能技术生成

部门:m平台-m平台技术部

时长:14:50-15:40

1.自我介绍

2. 介绍一个项目

描述、敏捷开发、技术栈(React 全家桶)、

我自己开发页面、公共组件、参与讨论需求

3. 说说函数组件比类组件的优点

  1. 简洁性和易理解性:函数组件更简洁、直观,易于理解和维护。由于它们只是普通的JavaScript函数,因此它们的行为更可预测,也更易于学习和掌握。从原生JS来更容易掌握。

  2. 性能优势:函数组件通常比类组件更高效。这是因为它们没有类组件中常见的额外开销,例如为每次渲染创建新实例的复杂性。函数组件在渲染过程中更为轻量级,因此可以提高应用的性能

  3. 易于测试:由于函数组件只是简单的函数,它们可以更容易地进行单元测试。可以使用像Jest这样的JavaScript测试工具直接对函数组件进行测试,而无需引入复杂的模拟和存根。

  4. 更好的与Hooks集成:函数组件可以充分利用React Hooks的功能,如useState、useEffect等。这些Hooks允许在函数组件中管理状态和执行副作用操作,从而增强了函数组件的功能性和灵活性。而类组件则需要使用生命周期方法和状态管理,这使得代码结构相对复杂。

  5. 面试官补充:this指向性

4. 类组件的componentWillUnmount对应函数组件的哪个地方?

useEffect,执行副作用操作,返回一个清理函数,在组件卸载时调用。

如清除计时器或解绑事件监听器。

5. useEffect的依赖项数组有什么用?应该怎么用?使用不当会有什么后果?

用于指定副作用函数依赖于哪些props或state。当依赖项数组中的任何一个值发生变化时,useEffect会重新执行副作用函数。

  1. 不传入依赖项数组:如果不传入依赖项数组,则副作用函数会在每次组件重新渲染时都执行。
  2. 传入空数组:如果传入一个空数组[],则副作用函数只会在组件挂载和卸载时执行一次。
  3. 传入具体的依赖项:如果传入具体的依赖项数组,如[dep1, dep2],则副作用函数会在dep1dep2的值发生变化时执行。

使用不当:(事后诸葛亮)

  1. 在依赖项数组应尽可能传入不可变的数据类型,即基本数据类型,如number、string、boolean,避免对象引用变更造成依赖项的不可预测。
  2. 在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树,有加载进度条、骨架屏等提示等待(增强用户体验),加载完后才请求接口,渲染数据到页面上。
事后诸葛亮:

  1. useEffect可以看作一直时间循环,在最后的宏任务才执行,避免阻塞主线程渲染。
  2. 如果直接放组件里,就会每次render都请求一次接口,浪费网络资源。在useEffect里可以保证只加载一次,或是需要的时候,即依赖项变更时,才重新发起请求。

9. 开发公共组件应遵循哪些原则

  • 我回答:
  1. 样式统一,均从甲方的figma页面而来,基本遵循figma设计的样式,因为在各个页面的都相同
  2. 预留props,暴露必要接口,也保留拓展运算符的others,方便传其他参数
  3. 预留className属性,方便外部对内部进行微调
  • 面试官补充:
    自己的逻辑自己管理,某些数据和操作能自己管理的就不需要再暴露出去成为必填项(如setState这种)
  • 事后诸葛亮:
  1. 高内聚,低耦合:高度的内聚性,即组件的功能应该紧密相关并集中在一起。同时,组件之间的耦合度应该尽可能低,以减少组件之间的依赖和相互影响。
  2. 可复用性:使其能够在多个场景和项目中被重复使用。这可以通过使用泛型、props等方式来实现,使组件更加灵活和通用。
  3. 明确性:命名应该清晰明确,能够准确描述组件的功能和用途。同时,组件的props和状态也应该有明确的命名和类型定义,以便其他开发者能够快速理解和使用。
  4. 可维护性:代码应该易于维护和扩展。这可以通过编写清晰的代码、添加必要的注释、使用类型注解等方式来实现。此外,公共组件应该避免引入不必要的复杂性和依赖,以减少维护成本。
  5. 性能优化:对于需要频繁渲染或涉及大量计算的公共组件,应该考虑性能优化。例如,可以使用React的memoization技术(如React.memo或useMemo)来避免不必要的重新渲染,或使用其他性能优化手段来提升组件的性能。
  6. 遵循React最佳实践:遵循React的最佳实践,如避免直接修改props、使用受控组件、正确处理事件等。这有助于确保组件的稳定性和可靠性。
  7. 文档化:提供详细的文档说明。文档应该包括组件的用法、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)
注意:

  1. 重复使用的变量应给个变量名,
  2. 函数名应清晰正确
  3. 可在开头加ts-check
    吐槽:没有TS不方便,可以用ts-check渐进增强,或eslint检查
  • 31
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值