面试
1.redux工作流程？
redux将整个应用状态储存到一个叫store的地方，组件通过dispatch派发action后,通过订阅store中的state来更新试图
2.vue,react区别？
1.因为react使用虚拟dom技术，它会先在内存中计算出变更的最小集合(差异化渲染),然后再进行DOM渲染，使得react在性能方面表现卓越，尤其在处理大规模数据的情况下表现更为出色 2.拥有大量第三方库和插件，帮助开发者简化复杂操作，比如：redux,react router,axios 3.React组件化模式相对于Vue略显复杂，虽然react非常灵活，，但是不同开发者也会有不同的组件管理方式，导致react代码阅读不易
4.Vue易学易用，组件化架构非常清晰每个组件处理自己的 逻辑且单一的功能
5.Vue的组件化架构在实际操作中较为灵活，受限于这一点Vue在处理大规模数据情况下可能会存在性能问题，Vue的一些特性被开发者滥用可能会导致代码允许速度远远慢于react
3.移动端适配
import {Dimensions} from 'react-native'
const screenWidth = Math.round(Dimensions.get('window').width)
const screenHeight = Math.round(Dimensions.get('window').height)
4.时间戳
function formattedDate(dateStr: string) { return dateStr.substring(0, 4) + '-' + dateStr.substring(4, 6) + '-' + dateStr.substring(6, 8) }
5.数组与对象转换处理
6.国际化适配
1.安装i18n
npm i react-i18next i18next --save
2.在src文件夹下创建locales文件夹,并创建zh.json和en.json文件
zh文件：
{
"translation": {
"Welcome to React": "欢迎使用 React"
}
}
en文件:
{
"translation": {
"Welcome to React": "Welcome to React"
}
},
3.在src文件夹下创建 includes文件夹,并创建i18n.js文件
import i18n from "i18next"
import { initReactI18next } from "react-i18next"
import zh from '../locales/zh'
import en from '../locales/zh'
const resources = {
en,
zh
}
i18n
.use(initReactI18next)
.init({
resources,
lng: "zh", // 默认语言
fallbackLng: "zh",// 切换语言失败时默认语言
interpolation: {
escapeValue: false
}
})
export default i18n
4.在index.js import "./includes/i18n"
5.在需要使用翻译的组件中
import { useTranslation } from 'react-i18next'
function App () {
const { t, i18n } = useTranslation()
// 修改语言
const changeLangage = () => {
i18n.changeLanguage(i18n.language === "zh" ? "en" : "zh")
}
return (
<div className="App">
<h1>{t("Welcome to React")}</h1>
<button onClick={changeLangage}>切换语言</button>
</div>
)
}
export default App
移动端适配方案
1.响应式布局，通过@media实现一套html配合多套css实现配套
2.通过rem或者vw，vh等实现不同的设备有相同的比例进而实现适配
http协商缓存和强缓存
强缓存： 当浏览器查询缓存时，可以不需要通过服务器，直接通过强制缓存查找是否存在本地缓存。 通过响应头cache-control中max-age（强缓存时间周期）等指令进行控制
协商缓存：
在缓存过期的情况下，客户端和服务端协商，确认客户端缓存是否需要更新。
通过响应头etag于last-modified进行控制。
它每次发送请求时，需要进行缓存新鲜度校验，如果资源过旧，将直接从响应中获取，否则从客户端缓存中进行获取，新鲜度校验通过请求头if-none-match于响应头etag进行对比，或者请求头if-modified-since与响应头last-modefind进行对比
首页白屏解决方案
根源：
需要渲染的东西太多，忙不过来
性能分析工具：
performance分析白屏原因
解决思路一：
组件太多：你组件再多，但是一个用户只能看到那一部分，所以我们可以先去渲染那些对用户的体验比较重要的组件，将这些组件作为首先要渲染的组件，也就是说它出现在渲染的第一帧，再去安排其他组件。虽然渲染时间不变，但是用户的感知不一样
脚本
React为什么存在hook？
解决组件之间状态共享的问题：在传统的 React 组件中，状态通常是通过组件的层次结构进行传递和共享的。这种方式在一些复杂的场景中可能会导致组件结构嵌套过深，代码可读性和维护性较差。Hooks 提供了一种更灵活的方式来管理状态，允许在函数组件中使用状态和副作用，从而减少了组件的嵌套层次。
提高代码的复用性：Hooks 使得函数组件能够更方便地复用状态逻辑和副作用处理逻辑。通过将相关的逻辑提取到自定义的 Hook 中，可以在多个组件中共享和重复使用这些逻辑，提高了代码的复用性和可维护性
更好的代码组织和可读性：Hooks 鼓励将相关的状态和行为封装在一起，使得代码更加模块化和易于理解。通过使用自定义 Hook，可以将逻辑分组，提高代码的可读性和可维护性。
与函数组件的生态系统更好地集成：React 的生态系统中有许多与函数组件配合使用的库和工具。Hooks 的设计与函数组件的工作方式更加契合，使得这些库和工具能够更容易地与 React 集成
单页面应用(spa)和多页面应用（mpa）区别?
单页面应用：
只在web页面初始化时，加载相应的HTML,js,css等，一旦页面加载完成，就不会因为用户的操作，而进行页面的重新加载或跳转
为什么能看到不同的页面？
归功于路由机制，通过监听路由的变化，实现HTML内容变化，从而动态实现UI与用户交互
优点？
用户导航会实时加载页面的部分内容，这样就避免了切换页面的时候，白屏的一些现象
缺点？
首屏加载慢，初次加载时资源会统一全部加载
由于所有内容都在一个页面中动态替换显示，所以在SEO上有着天然的弱势
多页面应用：
为每个页面创建一个独立的html文件应用。每次用户在mpa中导航到不同页面时，都会通过服务器加载一个新的页面
优点：
更好的SEO：由于每个页面都是独立的HTML文件，搜索引擎可以更容易的对每个页面进行索引和优化
页面加载快：由于只需要加载当前需要页面，MPA可以更快的加载页面，特别时较慢的网络连接上
缺点：
用户体验较差：对于每个页面之间切换，需要重新加载整个页面，因此会导致页面闪烁，白屏等待时间较长问题
多次重复渲染：每次导航hi重新渲染整个页面，这会增加整体页面的负载和性能开销
Redux源码
get和post区别？
1.get通过url传递参数，post通过url和request body传递 2.get请求跨域缓存，post不能(cache-control经测试无法缓存) 3.get只能进行url编码,post传输的编码方式很多 4.get请求参数会保存在浏览器历史中，post不会 5.get传递参数上限是2k,post没有限制
为什么会出现跨域？如何解决？
原因：浏览器同源策略
解决：
1.nginx反向代理：架设一台nginx服务器，对外提供一个5000端口，把/路径映射到3000端口的web服务上，再把/api路径映射到4000端口的API服务器上，这样一来，页面访问的地址和API请求地址就同域了
2.搭建bff层：在3000端口的WEB服务上，直接暴露接口，页面所有请求都集中到这个服务上，再由这个服务代为转发，这样页面地址和API请求就同域了
