2024年最全react移动端常用工具和常用配置整理_react buddy工具箱配置(1)，面试必知必会

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

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

JavaScript

性能

linux

}

//组件传值验证
Product.propTypes={
//必选传一个字符串
name:Protypes.string.isRequired,
//必传一个数组 每一项是字符串
city:Protypes.arrayOf(Protypes.string).isRequired,

//自定义验证
self:function(props,PropName){
    if(!/s/.test(props[PropName]))
    return new Error("内容非法")
    console.log(arguments);
},
//验证数组里面元素
self1: Protypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/北京/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
}).isRequired,

}

### 五、路由


**安装插件 yarn add react-router-dom -S**  
 官网<https://reacttraining.com/react-router/web/guides/quick-start>  
 npm 安装地址 <https://www.npmjs.com/package/react-router-dom>  
 github(https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom


### 六、移动端组件ant-design


ant-design官网地址<https://ant-design.gitee.io/docs/react/introduce-cn>  
 ant移动端组件<https://antd-mobile.gitee.io/docs/react/use-with-create-react-app-cn>


### 七、webpack常用配置


**在根文件建立config-overrides.js**

const {override,addWebpackAlias}=require(‘customize-cra’)//customize-cra是重写配置文件
const path=require(‘path’)
module.exports = override(
//配置别名
addWebpackAlias({
[“assets”]: path.resolve(__dirname, “./src/assets”),
})
)

### 八、移动端适配


根据屏幕的大小生成根元素字体的大小  
 在public文件夹下面的index.html入口文件中html标签设置**font-size的大小**  
 这里注意：如果如果UI给的设计图是750，则设置为100px，如果UI给的设计图是375，则设置为50px


在idndex.html中动态生成根元素字体大小

### 九、移动端解决一像素问题


创建css-in-js文件，使用伪元素设置一像素边框，不同屏幕像素比设置不同的百分比

import styled from ‘styled-components’

const Border = ({ Comp, bordercolor = “#666666”, radius = 0, borderwidth = ‘1px’ ,borderRadius}) => {
return styled(Comp)`
position: relative;
&::before {
position:absolute;
pointer-events:none;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
border-style:solid;
border-color:$bordercolor;border-width:${borderwidth};
transform-origin:0 0;
z-index:1;
content:" ";
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
height: 150%;
width: 150%;
border-radius:${radius * 1.5}rem;
transform:scale(0.75)
}

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
height: 200%;
width: 200%;
border-radius:KaTeX parse error: Undefined control sequence: \* at position 40: …s.borderRadius \̲*̲2; }}rem; /\*…{ parseFloat(borderRadius)*2}rem; */
transform:scale(0.5)
}

@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
height: 300%;
width: 300%;
border-radius:${radius * 3}rem;
transform:scale(0.3333)
}

}
`
}
export {
Border
}

在css-in-js文件内引入，InputContainer为原本容器，导入InputContainer给原本容器添加1像素边框

import {Border} from ‘component/style/Border’
const BorderContainer=Border({
Comp:InputContainer,
bordercolor:‘#B28969’,
radius:0.15
})
export {
BorderContainer
}

使用

import React, { Component } from ‘react’
import {BorderContainer}from ‘./Search.style’
export default class Search extends Component {
render() {
return (




)
}
}

### 十、配置代理


**安装插件npm install http-proxy-middleware -D**  
 官网<https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually>


在src根目录创建setupProxy.js文件

const { createProxyMiddleware } = require(‘http-proxy-middleware’);
module.exports = function(app) {
app.use(
‘/api’,
createProxyMiddleware({
target: ‘http://localhost:3000’,
changeOrigin: true,
})
);
};

### 十一、模拟数据


在根文件下创建mock文件夹  
 在mock文件夹里创建模拟数据json文件

{
“code”:1,
“data”:[
{
“id”: 1,
“url”:“http://localhost:8088/images/swiper-1.png”
},
{
“id”: 4,
“url”: “http://localhost:8088/images/swiper-2.jpeg”
},
{
“id”: 5,
“url”: “http://localhost:8088/images/swiper-3.jpeg”
}
]
}

在mock文件夹里创建mock.js

const swiper = require(‘./swiper.json’)
module.exports=()=>{
return{
swiper
}
}

在mock文件夹里配置路由映射文件

{
“/api/swiper”:“/swiper”
}

创建静态资源（如图片等）  
 在mock文件夹下创建public/images  
 把所有的静态图片资源放在images文件夹里  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200504222218230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1Nzk2NA==,size_16,color_FFFFFF,t_70)


然后在package.json里配置快捷启动

“scripts”: {

"mock": "json-server ./mock/mock.js -p 8088 -r ./mock/router.json -s ./mock/public/"

},

### 十二、接口封装


**安装插件yarn add axios -S**  
 在src文件夹下新建utils/http.js

import axios from ‘axios’

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

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

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

塞控制

• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

[外链图片转存中…(img-COCqvE9F-1715041186360)]

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

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

[外链图片转存中…(img-ocLdt96C-1715041186361)]