urlname
type
Post
password
SyncToConfluence
category
学习笔记
date
Dec 5, 2024
slug
a6b294ad-6d29-421f-88ca-3f174b0173f0
icon
Button
catalog
summary
tags
React
前端知识
面试题目
cover
Status
BusyTime
Status 1
status
Published

简答题

  1. 请简单介绍一下React Native的优点和缺点。
  1. 请简述React Native的新旧架构，以及新架构在哪方面进行了提升。
  1. React Native应用包含哪几个线程，都有什么作用？
  1. React Native的Node.js有什么作用？
5. React 的严格模式有什么作用？如何使用？
  • 作用：React 的严格模式（StrictMode）是一种开发模式工具，用于检测应用中潜在的问题。它不会渲染任何真实的 DOM，仅在开发环境中启用，主要作用包括：
    • 检测不安全的生命周期方法。
    • 警告使用旧式的 React API（如字符串 ref）。
    • 检测意外的副作用。
    • 检测过时的 findDOMNode 用法。
  • 使用：通过 <React.StrictMode> 包裹需要检查的组件，通常会包裹在应用的根组件中：
6. 描述类组件和函数组件，以及它们的异同
  • 类组件（Class Component）：
    • 定义：使用 ES6 的类语法，继承自 React.Component。
    • 特点：
      • 可以使用状态（state）和生命周期方法。
      • 通过 this.setState 更新状态。
      • 代码相对冗长。
    • 示例：
  • 函数组件（Function Component）：
    • 定义：使用普通的 JavaScript 函数定义组件。
    • 特点：
      • 无状态组件在 React 16.8 之前只能通过 props 接收数据，无法管理状态。
      • 自 React 16.8 起，Hooks 引入后函数组件可以使用状态（state）和副作用（effect）。
      • 代码简洁，易于维护。
    • 示例：
  • 异同：
    • 相同点：
      • 都是 React 组件，接收 props 渲染 UI。
      • 都可以实现逻辑复用。
    • 不同点：
      • 类组件依赖生命周期方法，函数组件通过 Hooks 实现状态和副作用管理。
      • 函数组件更轻量，性能更高，推荐在现代开发中使用。
7. 简述 React 的 diff 算法
React 的 diff 算法是虚拟 DOM 更新的核心，用于高效计算新旧虚拟 DOM 的差异，并以最小代价更新真实 DOM。核心思想包括：
  • 分层比较：
    • 同层比较，只比较同级节点，不跨层对比，提升性能。
  • 类型判断：
    • 如果节点类型不同（如 div 和 span），直接销毁旧节点，创建新节点。
    • 如果节点类型相同（如 div 和 div），对比属性差异并更新。
  • 列表比较（key 的作用）：
    • 对于有序列表，通过 key 标识每个子节点，减少节点移动操作。
    • 没有提供唯一 key 会导致不必要的重新渲染。
优势：
React 的 diff 算法复杂度从 O(n³) 降低到 O(n)，显著提升性能。
8. 简述 React Fiber 架构，说明它在哪些方面进行了性能提升
  • Fiber 架构的简介：
Fiber 是 React 16 引入的新架构，用于解决大型应用中的性能问题。它将渲染工作拆分为更小的任务块，可以被分片执行，以适应现代应用对性能和响应速度的需求。
  • 核心改进：
      1. 可中断的渲染：
          • 传统的同步渲染会阻塞主线程，导致长时间的卡顿。
          • Fiber 支持将任务拆分为多个片段，允许在需要时暂停任务，优先处理更重要的更新（如用户输入）。
      1. 优先级调度：
          • 根据任务的重要性分配优先级，如用户交互优先于后台数据加载。
      1. 增量更新：
          • 将渲染过程分解成可中断的任务后，可以逐步更新 UI，避免一次性更新造成性能瓶颈。
      1. 组件回收：
          • 增加对未使用组件的内存回收，优化内存占用。
  • Fiber 的实际效果：
    • 提升复杂应用的渲染性能。
    • 更好地适应高帧率需求的动画和过渡效果。
    • 改进了用户体验（如更少的卡顿现象）。
9. 简述 CSS 包含的基本选择器，以及它们的执行顺序
  • CSS 基本选择器：
      1. 通配选择器（）：
          • 选择所有元素。
          • 示例：{ margin: 0; }
      1. 类型选择器（Tag Selector）：
          • 选择特定 HTML 标签的元素。
          • 示例：p { font-size: 16px; }
      1. 类选择器（Class Selector）：
          • 选择指定类名的元素，前缀为 .。
          • 示例：.btn { background: blue; }
      1. ID选择器（ID Selector）：
          • 选择指定 ID 的元素，前缀为 #。
          • 示例：#header { color: red; }
      1. 属性选择器（Attribute Selector）：
          • 选择具有特定属性的元素。
          • 示例：input[type="text"] { border: 1px solid; }
      1. 伪类选择器（Pseudo-classes）：
          • 选择某些状态下的元素，如 :hover、:nth-child()。
          • 示例：a:hover { color: green; }
      1. 伪元素选择器（Pseudo-elements）：
          • 用于选择元素的一部分内容，如 ::before 和 ::after。
          • 示例：p::before { content: "Note: "; }
  • 执行顺序（优先级）：
      1. 内联样式（style 属性）：优先级最高（权重 1000）。
      1. ID选择器：权重 100。
      1. 类选择器、属性选择器、伪类选择器：权重 10。
      1. 类型选择器和伪元素选择器：权重 1。
      1. 通配选择器：权重 0。
若权重相同，则后声明的规则优先。
10. 简述 CSS 盒子模型，以及其常用的属性
  • CSS 盒子模型：盒子模型描述了每个 HTML 元素的结构，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。
    • 内容（Content）：元素实际显示内容的区域。
    • 内边距（Padding）：内容与边框之间的空间。
    • 边框（Border）：围绕内容和内边距的边框。
    • 外边距（Margin）：元素与其他元素之间的距离。
  • 常用属性：
      1. 宽高相关：
          • width、height：内容区域的宽度和高度。
          • min-width、min-height：内容最小宽高限制。
          • max-width、max-height：内容最大宽高限制。
      1. 内边距：
          • padding：设置内边距，可分方向 padding-top、padding-right 等。
      1. 边框：
          • border：设置边框宽度、样式、颜色。
          • 示例：border: 1px solid black;
      1. 外边距：
          • margin：设置外边距，可分方向 margin-top、margin-right 等。
      1. 盒子模型类型：
          • box-sizing：控制盒子模型的计算方式。
            • content-box：默认方式，仅内容区域算宽高。
            • border-box：包含边框和内边距。
11. 简述 Flexbox 布局，以及其常用的属性
  • Flexbox 布局：
Flexbox 是一种一维布局方式，用于在容器中排列子项。它适合用来控制行或列的排列关系。
  • 常用属性：
      1. 父容器属性：
          • display: flex：启用 Flex 布局。
          • flex-direction：设置主轴方向（默认 row）。
            • 值：row、row-reverse、column、column-reverse。
          • justify-content：设置主轴对齐方式。
            • 值：flex-start、flex-end、center、space-between、space-around。
          • align-items：设置交叉轴对齐方式。
            • 值：flex-start、flex-end、center、baseline、stretch。
          • flex-wrap：控制子项是否换行。
            • 值：nowrap（默认）、wrap、wrap-reverse。
      1. 子项属性：
          • flex：简写属性，表示子项的放大、缩小和基础尺寸。
          • align-self：设置单个子项的交叉轴对齐方式。
          • order：设置子项的排列顺序。
12. 简述 FlatList 组件的 key 属性有什么作用
  • 作用：key 属性在 React 和 React Native 中，用于标识列表中的每个元素，提升渲染性能。它的主要作用包括：
      1. 唯一标识：
          • key 帮助 React 确定哪些元素被更改、添加或移除。
          • 在进行 diff 算法时，React 通过 key 快速定位变化的节点，从而最小化 DOM 操作。
      1. 优化渲染性能：
          • 减少不必要的组件卸载和重新挂载。
          • 尤其在长列表中，能显著提升性能。
  • 最佳实践：
      1. 使用唯一且稳定的标识符作为 key（如数据库中的 ID）。
      1. 避免使用索引作为 key，因为列表项顺序变化时可能导致渲染问题。
  • 示例：
13. 简述 Fetch 网络请求框架的特点，以及它与 Axios 的区别
  • Fetch 的特点：
      1. 原生支持：
          • Fetch 是浏览器内置的 API，无需安装额外依赖。
      1. 基于 Promise：
          • 返回 Promise 对象，支持 then 和 catch 链式调用。
      1. 现代接口：
          • 使用简单且灵活，支持各种 HTTP 请求（GET、POST、PUT 等）。
      1. 不自动处理 JSON：
          • 响应需要手动调用 response.json() 方法解析。
      1. 不支持超时和取消请求：
          • 需要结合 AbortController 或手动实现超时功能。
  • Fetch 与 Axios 的区别：
特性
Fetch
Axios
支持环境
浏览器内置
需引入库，支持浏览器和 Node.js
请求方式
原生支持
封装了更简单的 API
JSON 解析
手动调用 response.json()
自动解析 JSON
请求拦截器
不支持
支持请求和响应拦截器
错误处理
仅对网络错误抛出异常
HTTP 状态码错误抛出异常
超时支持
不支持
支持
取消请求
通过 AbortController 实现
内置支持（CancelToken）
  • 示例代码对比：

选择题

JSX可以将不同的代码组合到一起，除了下列哪种（ ）
  • A. HTML
  • B. JavaScript
  • C. Java
  • D. CSS
答案：C. Java
解析：
JSX 是 JavaScript 的语法扩展，允许将 HTML 和 JavaScript 结合在一起，形成类似模板语言的结构，但它不能直接包含非 JavaScript 代码如 Java。
 
以下哪个不属于类组件的生命周期函数（ ）
  • A. componentDidMount
  • B. componentWillUnmount
  • C. componentDidUpdate
  • D. render
答案：D. render
解析：
render 是 React 类组件中必须实现的一个方法，但它不被归类为生命周期函数，而是用来定义组件的 UI 结构。而其他选项都是生命周期函数：
  • componentDidMount：组件挂载后调用。
  • componentWillUnmount：组件卸载前调用。
  • componentDidUpdate：组件更新后调用。
 
以下哪种方式可以用来动态引入组件（ ）
  • A. React.Fragments
  • B. React.lazy
  • C. React.Suspense
  • D. React.import
答案：B. React.lazy
解析：
React.lazy 是 React 提供的用于动态加载组件的方式，结合 React.Suspense 可以实现按需加载和代码分割。
  • React.Fragments：用于避免多余的 DOM 包裹。
  • React.Suspense：用于包裹动态加载的组件，提供加载时的占位。
  • React.import：不是 React 中的合法方法。
以下哪些功能可以使用 MiddleWare 来实现（ ）【多选】
  • A. REST API
  • B. error handle
  • C. promised
  • D. setTimeout
答案：A, B, C
解析：
中间件（Middleware）在 React 或 Redux 应用中通常用于扩展 dispatch 的功能，比如：
  • A. REST API：通过中间件拦截 actions，处理异步的 API 调用（如 redux-thunk）。
  • B. error handle：中间件可以捕获并处理 action 或请求中的错误。
  • C. promised：中间件可以将 Promise 转换为 action 结果（如 redux-promise）。
  • D. setTimeout：虽然可以通过中间件延迟某些 action 的 dispatch，但不常使用中间件处理纯定时任务，通常直接用 JavaScript 的 setTimeout 即可。
预研：3D资源模型的技术对比AI产品经理：算法类AI产品落地详解
Loading...
Announcement
暂时没有公告！
Catalog
0%