2025 React岗位前端面试题（一）

最新推荐文章于 2025-05-08 10:30:27 发布

编程路上的小兜

最新推荐文章于 2025-05-08 10:30:27 发布

阅读量1.8k

点赞数 45

文章标签：前端 react.js 前端框架

本文链接：https://blog.youkuaiyun.com/weixin_42417733/article/details/145208257

版权

1.如何从0到1构建项目

参考搭建react项目

2.新建react项目要考虑什么？

deepseek回答新建 React 项目时，需考虑以下关键点：

   
   1. 项目需求 功能需求：明确项目的主要功能和目标。
   
   用户需求：了解目标用户及其使用场景。
   
   2. 技术选型 React 版本：选择最新的稳定版本。
   
   构建工具：常用工具有 Create React App、Vite、Next.js 等。
   
   状态管理：根据项目复杂度选择 Redux、MobX、Context API 等。
   
   路由管理：使用 React Router 进行页面导航。
   
   UI 库：可选 Material-UI、Ant Design、Bootstrap 等。
   
   3. 项目结构 组件结构：合理划分组件，保持高内聚、低耦合。
   
   文件组织：按功能或类型组织文件，如 components/、pages/、services/ 等。
   
   4. 开发环境 代码编辑器：推荐使用 VS Code。
   
   版本控制：使用 Git 进行代码管理，并选择合适的 Git 托管平台。
   
   代码格式化：配置 ESLint 和 Prettier 保证代码风格一致。
   
   5. 性能优化 代码分割：使用 React.lazy 和 Suspense 实现懒加载。
   
   图片优化：压缩图片，使用 WebP 格式。
   
   缓存策略：合理配置 HTTP 缓存。
   
   6. 测试 单元测试：使用 Jest 和 React Testing Library。
   
   集成测试：使用 Cypress 或 Puppeteer。
   
   E2E 测试：确保整个应用流程的稳定性。
   
   7. 部署 CI/CD：配置持续集成和持续部署，常用工具有 GitHub Actions、Jenkins 等。
   
   托管平台：选择 Netlify、Vercel、AWS、Heroku 等平台。
   
   环境变量：使用 .env 文件管理不同环境的配置。
   
   8. 安全性 依赖管理：定期更新依赖，避免安全漏洞。
   
   XSS 防护：避免直接渲染用户输入。
   
   HTTPS：确保生产环境使用 HTTPS。
   
   9. 文档 项目文档：编写 README 文件，说明项目结构、安装步骤等。
   
   代码注释：关键代码添加注释，便于维护。
   
   10. 团队协作 代码审查：通过 Pull Request 进行代码审查。
   
   任务管理：使用 Jira、Trello 等工具管理任务。
   
   11. 国际化 多语言支持：使用 react-i18next 等库实现国际化。
   
   12. 可访问性 ARIA 属性：确保应用对屏幕阅读器等辅助设备友好。
   
   键盘导航：支持键盘操作。
   
   13. 错误处理 错误边界：使用 React 错误边界捕获组件错误。
   
   日志记录：记录前端错误并上报。
   
   14. SEO 服务端渲染：使用 Next.js 提升 SEO。
   
   Meta 标签：动态设置页面标题和描述。
   
   15. 用户体验 加载状态：提供加载指示器。
   
   错误提示：友好的错误提示和重试机制。
   
   16. 未来维护 代码可读性：保持代码简洁易读。
   
   技术债务：定期重构，避免积累技术债务。

总结新建 React
项目时，需综合考虑需求、技术选型、项目结构、开发环境、性能优化、测试、部署、安全性、文档、团队协作、国际化、可访问性、错误处理、SEO、用户体验和未来维护等方面，确保项目成功并易于维护

3. 简单说一下ts泛型

TypeScript 中的泛型（Generics）是一种创建可重用组件的工具，允许在定义函数、类或接口时使用类型参数，以便在使用时指定具体类型。泛型的主要目的是提高代码的灵活性和复用性，同时保持类型安全。

基本概念
泛型允许你编写可以处理多种类型的代码，而不必为每种类型都编写单独的实现。
泛型函数
泛型函数可以在调用时指定类型参数。

function identity<T>(arg: T): T {
   
    return arg;
}

let output1 = identity<string>("hello"); // 类型为 string
let output2 = identity<number>(42);      // 类型为 number

泛型类
泛型类允许在类定义中使用类型参数

class Box<T> {
   
    private value: T;

    constructor(value: T) {
   
        this.value = value;
    }

    getValue(): T {
   
        return this.value;
    }
}

let box1 = new Box<string>("hello");
let box2 = new Box<number>(42);

泛型接口
泛型接口可以在接口定义中使用类型参数。

interface Pair<T, U> {
   
    first: T;
    second: U;
}

let pair: Pair<string, number> = {
    first: "hello", second: 42 };

泛型约束
泛型约束允许你限制类型参数的范围。

interface Lengthwise {
   
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
   
    console.log(arg.length);
    return arg;
}

loggingIdentity("hello"); // 合法，因为字符串有 length 属性
loggingIdentity

最低0.47元/天解锁文章