2024年最全搞清楚怎样基于 Webpack5 从 0 搭建 React开发环境-超详细，下载量瞬秒百万

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

import ReactDOM from “react-dom”;

import { Router, Route, Link } from “react-router”;

import { createBrowserHistory } from “history”;

import App from “./App.jsx”;

const About = () => {

return <>About</>;

};

ReactDOM.render(

,

document.getElementById(“root”)

);

MobX

---

安装依赖

$ npm install mobx mobx-react babel-preset-mobx --save

.babelrc

{

“presets”: [“@babel/preset-env”, “@babel/preset-react”, “mobx”]

}

src/store.js

在 src 目录下新建 store.js

import { observable, action, makeObservable } from “mobx”;

class Store {

constructor() {

makeObservable(this);

}

@observable

count = 0;

@action(“add”)

add = () => {

this.count = this.count + 1;

};

@action(“reduce”)

reduce = () => {

this.count = this.count - 1;

};

}

export default new Store();

index.js

import { Provider } from “mobx-react”;

import Store from “./store”;

// …

ReactDOM.render(

,

document.getElementById(“root”)

);

src/App.jsx

import React, { Component } from “react”;

import { observer, inject } from “mobx-react”;

@inject(“store”)

@observer

class App extends Component {

render() {

return (

{this.props.store.count}

add

reduce

);

}

}

export default App;

Ant Design

---

安装依赖

$ npm install antd babel-plugin-import --save

.babelrc

{

// …

“plugins”: [

[

“import”,

{

“libraryName”: “antd”,

“libraryDirectory”: “es”,

“style”: true

}

]

]

}

src/App.jsx

// …

import { DatePicker } from “antd”;

import “antd/dist/antd.css”;

@inject(“store”)

@observer

class App extends Component {

render() {

return (

);

}

}

export default App;

TypeScript

---

安装依赖

$ npm install typescript @babel/preset-typescript --save-dev

.babelrc

{

“presets”: [

// …

“@babel/preset-typescript”

]

}

tsconfig.json

在根目录下，新增 tsconfig.json 文件：

{

“compilerOptions”: {

“emitDecoratorMetadata”: true,

“experimentalDecorators”: true,

“target”: “ES5”,

“allowSyntheticDefaultImports”: true,

“strict”: true,

“forceConsistentCasingInFileNames”: true,

“allowJs”: true,

“outDir”: “./dist/”,

“esModuleInterop”: true,

“noImplicitAny”: false,

“sourceMap”: true,

“module”: “esnext”,

“moduleResolution”: “node”,

“isolatedModules”: true,

“importHelpers”: true,

“lib”: [“esnext”, “dom”, “dom.iterable”],

“skipLibCheck”: true,

“jsx”: “react”,

“typeRoots”: [“node”, “node_modules/@types”],

“rootDirs”: [“./src”],

“baseUrl”: “./src”

},

“include”: [“./src/**/*”],

“exclude”: [“node_modules”]

}

src/App.jsx

更换文件后缀 App.jsx -> App.tsx

import React, { Component } from “react”;

import { observer, inject } from “mobx-react”;

import { DatePicker } from “antd”;

import “antd/dist/antd.css”;

@inject(“store”)

@observer

class App extends Component {

props: any;

render() {

return (

{this.props.store.count}

add

reduce

);

}

}

export default App;

代码规范

---

代码校验、代码格式化、Git 提交前校验、Vscode配置、编译校验

ESLint

安装依赖

$ npm install @typescript-eslint/parser eslint eslint-plugin-standard @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-promise  --save-dev

.eslintrc.js

在根目录下，新增 .eslintrc.js 文件：

module.exports = {

extends: [“eslint:recommended”, “plugin:react/recommended”],

env: {

browser: true,

commonjs: true,

es6: true,

},

globals: {

$: true,

process: true,

__dirname: true,

},

parser: “@typescript-eslint/parser”,

parserOptions: {

ecmaFeatures: {

jsx: true,

modules: true,

},

sourceType: “module”,

ecmaVersion: 6,

},

plugins: [“react”, “standard”, “promise”, “@typescript-eslint”],

settings: {

“import/ignore”: [“node_modules”],

react: {

version: “latest”,

},

},

rules: {

quotes: [2, “single”],

“no-console”: 0,

“no-debugger”: 1,

“no-var”: 1,

semi: [“error”, “always”],

“no-irregular-whitespace”: 0,

“no-trailing-spaces”: 1,

“eol-last”: 0,

“no-unused-vars”: [

1,

{

vars: “all”,

args: “after-used”,

},

],

“no-case-declarations”: 0,

“no-underscore-dangle”: 0,

“no-alert”: 2,

“no-lone-blocks”: 0,

“no-class-assign”: 2,

“no-cond-assign”: 2,

“no-const-assign”: 2,

“no-delete-var”: 2,

“no-dupe-keys”: 2,

“use-isnan”: 2,

“no-duplicate-case”: 2,

“no-dupe-args”: 2,

“no-empty”: 2,

“no-func-assign”: 2,

“no-invalid-this”: 0,

“no-redeclare”: 2,

“no-spaced-func”: 2,

“no-this-before-super”: 0,

“no-undef”: 2,

“no-return-assign”: 0,

“no-script-url”: 2,

“no-use-before-define”: 2,

“no-extra-boolean-cast”: 0,

“no-unreachable”: 1,

“comma-dangle”: 2,

“no-mixed-spaces-and-tabs”: 2,

“prefer-arrow-callback”: 0,

“arrow-parens”: 0,

“arrow-spacing”: 0,

camelcase: 0,

“jsx-quotes”: [1, “prefer-double”],

“react/display-name”: 0,

“react/forbid-prop-types”: [

2,

{

forbid: [“any”],

},

],

“react/jsx-boolean-value”: 0,

“react/jsx-closing-bracket-location”: 1,

“react/jsx-curly-spacing”: [

2,

{

when: “never”,

children: true,

},

],

“react/jsx-indent”: [“error”, 4],

“react/jsx-key”: 2,

“react/jsx-no-bind”: 0,

“react/jsx-no-duplicate-props”: 2,

“react/jsx-no-literals”: 0,

“react/jsx-no-undef”: 1,

“react/jsx-pascal-case”: 0,

“react/jsx-sort-props”: 0,

“react/jsx-uses-react”: 1,

“react/jsx-uses-vars”: 2,

“react/no-danger”: 0,

“react/no-did-mount-set-state”: 0,

“react/no-did-update-set-state”: 0,

“react/no-direct-mutation-state”: 2,

“react/no-multi-comp”: 0,

“react/no-set-state”: 0,

“react/no-unknown-property”: 2,

“react/prefer-es6-class”: 2,

“react/prop-types”: 0,

“react/react-in-jsx-scope”: 2,

“react/self-closing-comp”: 0,

“react/sort-comp”: 0,

“react/no-array-index-key”: 0,

“react/no-deprecated”: 1,

“react/jsx-equals-spacing”: 2,

},

};

.eslintignore

在根目录下，新增 .eslintignore 文件：

src/assets

.vscode

在根目录下新增 .vscode 文件夹，然后新增 .vscode/settings.json

{

“eslint.validate”: [

“javascript”,

“javascriptreact”,

“typescript”,

“typescriptreact”

]

}

Perttier

安装依赖

$ npm install prettier --save-dev

prettier.config.js

在根目录下，新增 prettier.config.js 文件：

module.exports = {

// 一行最多 100 字符

printWidth: 100,

// 使用 4 个空格缩进

tabWidth: 4,

// 不使用缩进符，而使用空格

useTabs: false,

// 行尾需要有分号

semi: true,

// 使用单引号

singleQuote: true,

// 对象的 key 仅在必要时用引号

quoteProps: ‘as-needed’,

// jsx 不使用单引号，而使用双引号

jsxSingleQuote: false,

// 末尾不需要逗号

trailingComma: ‘none’,

// 大括号内的首尾需要空格

bracketSpacing: true,

// jsx 标签的反尖括号需要换行

jsxBracketSameLine: false,

// 箭头函数，只有一个参数的时候，也需要括号

arrowParens: ‘avoid’,

// 每个文件格式化的范围是文件的全部内容

rangeStart: 0,

rangeEnd: Infinity,

// 不需要写文件开头的 @prettier

requirePragma: false,

// 不需要自动在文件开头插入 @prettier

insertPragma: false,

// 使用默认的折行标准

proseWrap: ‘preserve’,

// 根据显示样式决定 html 要不要折行

htmlWhitespaceSensitivity: ‘css’,

// 换行符使用 lf

endOfLine: ‘lf’

};

stylelint

安装依赖

$ npm install stylelint stylelint-config-standard stylelint-config-prettier --save-dev

stylelint.config.js

在根目录下，新增 stylelint.config.js 文件：

module.exports = {

extends: [‘stylelint-config-standard’, ‘stylelint-config-prettier’],

ignoreFiles: [

‘**/*.ts’,

‘**/*.tsx’,

‘**/*.png’,

‘**/*.jpg’,

‘**/*.jpeg’,

‘**/*.gif’,

‘**/*.mp3’,

‘**/*.json’

],

rules: {

‘at-rule-no-unknown’: [

true,

{

ignoreAtRules: [‘extends’, ‘ignores’]

}

],

indentation: 4,

‘number-leading-zero’: null,

‘unit-allowed-list’: [‘em’, ‘rem’, ‘s’, ‘px’, ‘deg’, ‘all’, ‘vh’, ‘%’],

‘no-eol-whitespace’: [

true,

{

ignore: ‘empty-lines’

}

],

‘declaration-block-trailing-semicolon’: ‘always’,

‘selector-pseudo-class-no-unknown’: [

true,

{

ignorePseudoClasses: [‘global’]

}

],

‘block-closing-brace-newline-after’: ‘always’,

‘declaration-block-semicolon-newline-after’: ‘always’,

‘no-descending-specificity’: null,

‘selector-list-comma-newline-after’: ‘always’,

‘selector-pseudo-element-colon-notation’: ‘single’

}

};

lint-staged、pre-commit

安装依赖

$ npm install lint-staged prettier eslint pre-commit --save-dev

package.json

{

// …

“scripts”: {

“lint:tsx”: “eslint --ext .tsx src && eslint --ext .ts src”,

“lint:css”: “stylelint --aei .less .css src”,

“precommit”: “lint-staged”,

“precommit-msg”: “echo ‘Pre-commit checks…’ && exit 0”

},

“pre-commit”: [

“precommit”,

“precommit-msg”

],

“lint-staged”: {

“*.{js,jsx,ts,tsx}”: [

“eslint --fix”,

“prettier --write”,

“git add”

],

“*.{css,less}”: [

“stylelint --fix”,

“prettier --write”,

“git add”

]

}

}

eslint-webpack-plugin

安装依赖

$ npm install eslint-webpack-plugin --save-dev

script/webpack.config.js

const ESLintPlugin = require(‘eslint-webpack-plugin’);

module.exports = {

// …

plugins: [new ESLintPlugin()],

};

总结

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

“prettier --write”,

“git add”

],

“*.{css,less}”: [

“stylelint --fix”,

“prettier --write”,

“git add”

]

}

}

eslint-webpack-plugin

安装依赖

$ npm install eslint-webpack-plugin --save-dev

script/webpack.config.js

const ESLintPlugin = require(‘eslint-webpack-plugin’);

module.exports = {

// …

plugins: [new ESLintPlugin()],

};

总结

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

[外链图片转存中…(img-jfy6oR24-1715056417369)]