css相关
1.单行文本溢出显示省略号设置什么属性
{overflow :hidden, text-overflow: ellipsis，white-space: nowrap}
2.简素述盒子模型
Box-sizing：context-box（正常盒子），border-box（ie盒子）
Content-box：盒子的大小=设置的width，height+border+padding+margin
border-box：盒子大小=设置的width，height+margin
Ie盒子的宽高=border+padding+内容
3.盒子居中方法
a.flex居中，设置{display:flex, justify-content:center,align-items:center}
b.定位居中，{position: absolute;left:50%;top:50%;
margin-left: -50px;（高度设置了100px，margin-left就是宽度的一半）
margin-top: -50px;（宽度也设置了100px，margin-top就是高度的一半）}
c.定位居中，利用margin:auto:{position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;height:100px;width:100px;}
d.利用transform属性，{position: absolute;left:50%;top:50%;
transform: translate(-50%,-50%);（在当前位置偏移自身宽高的一半）}
4.CSS选择器及其优先级
important>行内样式>id选择器>class选择器>标签选择器
5.position的属性有哪些
绝对定位absolute，相对定位relative，固定定位fixed，粘性定位：sticky
6.伪元素和伪类元素
伪类元素：链接的不同状态（例如：:hover、:active、:visited）表单元素的状态（例如：:focus、:disabled）
伪元素：在元素内容之前或之后插入内容（例如：::before、::after）
Js相关
1.叙述防抖和节流
写法：（lodash有方法）
防抖是单位时间内多次触发只执行最后一次（搜索框输入）
节流是单位时间内多次触发只执行第一次（短信验证）
2.叙述深浅拷贝
浅拷贝：拷贝地址引用指针不会变，普通等于号赋值，展开运算符
深拷贝：拷贝地址引用指针会改变，JSON方法，lodash方法，递归
3.js数据类型
A.基本数据类型：string，boolean，null，undefined，number，symbol，bigint
B.引用数据类型：abject，array，function
C.特殊数据类型：date，math，RegExp，json
为了更准确地判断数据类型，可以使用 instanceof 操作符或者 Object.prototype.toString.call() 方法
console.log([] instanceof Array); // true
console.log(Object.prototype.toString.call("hello")); // [object String]
4.数组哪些方法改变原数组哪些方法不改变原数组
改变原数组：push，unshift，pop，shift，sort，splice
不改变原数组：concat，map，filter，reduce，find，join，slice，some，ever
5.简述ssr和csr
服务端渲染（SSR）：服务端渲染就是在浏览器请求页面URL的时候，服务端将我们需要的HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中。这个服务端组装HTML的过程，叫做服务端渲染。
CSR，即客户端渲染，指的是将页面的渲染工作推迟到浏览器中进行。服务器通常只发送一个空的 HTML 页面和必要的 JavaScript 文件，浏览器下载并执行 JavaScript 代码后，通过 JavaScript 来生成和渲染页面内容。这种方式可以减轻服务器的负担，并且可以实现更为丰富的交互功能。但是，CSR 对于 SEO 不太友好，因为搜索引擎爬虫可能无法正确地抓取和索引 JavaScript 动态生成的内容。
加载速度：SSR 通常在首屏加载时更快，因为用户可以直接接收到完整的 HTML 页面。CSR 则需要在下载并执行 JavaScript 后才能显示内容，可能会导致首屏加载较慢。
交互性：CSR 在交互性方面更为灵活，可以在客户端动态地更新页面内容而不需要与服务器通信。
SEO：SSR 对 SEO 更友好，因为搜索引擎爬虫可以直接索引服务器渲染的页面内容。CSR 需要额外的 SEO 配置或者使用服务端渲染的辅助技术来优化搜索引擎的抓取。
服务器压力：CSR 可以减轻服务器渲染页面的压力，因为大部分渲染工作转移到了客户端进行。
6，简述var，const，let的区别
var是函数作用域，存在变量提升，可以重复声明和重新赋值。
let是块级作用域，不存在变量提升，不能重复声明，但可以重新赋值。
const是块级作用域，不存在变量提升，不能重复声明，也不能重新赋值（但可以修改对象属性）。
7.简述闭包
闭包函数内部定义了另一个函数，内部函数可以访问到外部函数的变量
好处：变量私有化
坏处：内存泄漏（处理方法，引用完后设置成空）
8.简述堆和栈
在 Js中，原始类型（Number、String、Boolean、Null、Undefined、Symbol）的值直接存储在栈上，堆中储存的对象的引用也存在栈中，而对象（包括数组和函数）则存储在堆上。当你在 JavaScript 中创建一个对象时，实际上是在栈上创建了一个引用，指向堆中的对象。
Js的垃圾回收机制（Garbage Collection）会自动管理堆和栈上的内存。对于栈上的数据，当一个函数执行完成后，其对应的帧会被自动移除，释放内存。而对于堆上的数据，JavaScript 引擎会定期检查哪些对象不再被引用，然后将这些对象标记为可回收，并在适当的时机释放其占用的内存。
9.简述for循环和for in循环
For循环主要用于遍历数组或者进行固定次数的循环
for(let I=0;i<length;i++){console.log(i)}
Forin 循环主要用于遍历对象的属性。
for (let key in obj) {
if (obj.hasOwnProperty(key)) { // 过滤原型链上的属性
console.log(key + ': ' + obj[key]); // 输出对象的每个属性名和值
}}在使用 for...in 循环时，通常需要使用 hasOwnProperty 方法来过滤掉原型链上的属性，除非你确实想要遍历原型链上的属性。
10.简述bom和dom
Bom主要是操作浏览器窗口和地址等，(location, window, screen, history, navigator, document)
Dom是页面里的节点(document, element, attribute, event, comment, text)
11.什么是原型链
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，
那么它就会去prototype里去找这个属性，这个prototype又有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链。原型链的顶端是null
12.什么是事件代理
事件代理是一种事件处理技术，它允许你将事件监听器附加到父元素上，而不是直接附加到每个子元素上。这样，当子元素上的事件触发时，事件监听器会在父元素上被触发，然后通过事件对象（Event）的target属性来确定哪个子元素触发了事件。（多个相似子元素在同一个父元素下且需要监听时，用事件代理，减少内存开销，*优化性能）
13.什么是纯函数
它在相同的输入参数下总是返回相同的输出结果，并且不会产生任何副作用。这意味着纯函数不会改变其外部状态，也不会影响其他函数的执行。
14.说一下call，bind，apply的区别
call和apply是立即执行函数的方式，并且可以传递不同的this值和参数，而bind是创建一个新的函数，不会立即执行，可以在调用时再传参。
15.怎么处理跨域
跨域问题是浏览器出于安全考虑实施的“同源策略”限制的结果。
a.CORS 是一种机制，它允许受限资源被不同源的网页所请求。它通过HTTP头部中的一些特定字段来实现。
b.通过设置一个代理服务器，由代理服务器转发请求到目标服务器，因为代理服务器与前端是同源的，所以不受到同源策略的限制。
c.在Nginx服务器上配置反向代理，可以接收客户端的请求，然后将请求转发到其他服务器。
react相关
1.类组件和函数组件之间的区别是啥？
函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。另外函数组间没有生命周期，没有this
2.简述高阶组件
高阶组件是一个函数，它接受一个组件作为参数，并返回一个新的组件。这个新组件通常包含了对原始组件的增强，例如添加了额外的props、生命周期方法或状态等。
3.react中受控组件和非受控组件
受控组件，通过usestate来改变值，接受state管理
非受控组件，通过读取dom中绑定的useref来改变值，不接受state管理
受控组件的优点是数据管理简单，因为所有表单数据都存储在组件的 state 中，这使得状态管理变得容易。然而，这也可能导致组件与 DOM 分离，因为表单元素的值不再直接反映在 DOM 中，非受控组件是直接从 DOM 获取表单输入值的组件。在非受控组件中，表单元素的值不会绑定到组件的 state 上，而是通过事件处理函数来获取 DOM 元素的当前值
4.什么是 JSX
Jsx是js的语法糖，需要通过babel和webpack等工具解析之后转化为js
5.react周期
componentWillMount:在渲染之前执行，用于根组件中的 App 级配置。
componentDidMount：在第一次渲染之后执行，可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。
componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染
shouldComponentUpdate：确定是否更新组件。默认情况下，它返回true。如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回false，这是一个提高性能的方法。
componentWillUpdate：在shouldComponentUpdate返回 true 确定要更新组件之前件之前执行。
componentDidUpdate：它主要用于更新DOM以响应props或state更改。
componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。
6.什么是 React Context
是一个提供组件间状态传递的机制，它允许你在不使用 prop 传递的方式下，在组件树中传递数据，他的使用分为以下几步:a.creatcontext创建上下文名称，b.包裹跟组件根组件上，mycontext.provider,然后在value中传入参数。c.用usecontext导出传递下来的参数
7.什么是 React Fiber
React Fiber 是 React 16 引入的一种新的渲染架构，它通过引入可中断的渲染和优先级的概念，提高了 React 的性能，特别是在处理复杂更新和动画时。它是 React 支持函数组件的直接原因。之前的渲染机制是同步渲染，容易造成页面阻塞，现在是异步渲染，fiber允许在渲染过程中暂停，把控制权交回dom，这种机制能更好的处理复杂的如动画类的更新。
8.简述usememo，usecallback，memo的用法区别
useMemo 用于记忆化计算结果，而 useCallback 用于记忆化函数，memo 是一个高阶组件，用于记忆化组件，useMemo 和 useCallback 通常用于组件内部，而 memo 用于包裹组件，以减少不必要的渲染。
9.react18更新了些什么？
并发渲染：这是 React 18 最重要的特性之一，它允许 React 在同一时刻准备多个版本的 UI。这意味着用户输入可以被立即响应，即使应用在大量渲染任务中。引入的新的hooks，useId，useTransition，useinsertioneffect。React 18 现在可以自动对多个状态更新进行批量处理（例如settimeout，promise中多次调用usestate，之前会触发多次渲染，现在只触发一次），只触发一次组件的重新渲染，以提高性能。如果不想被合并到一起处理，就需要flushSync包裹，就会立即更新。
10.usetransition的使用
解构出来的starttration和ispending，ispending是判断是否存在待处理的过度，starttration包裹过渡期调用的setstate会让页面不会被卡阻
11.简述useeffect，uselayouteffect，useinsertioneffect区别及用法
顺序上useEffect：在组件渲染后执行（用户看到页面后），适合发出请求，执行异步操作等操作。useLayoutEffect：在组件渲染后立即执行，（用户看到页面前），适合执行调整元素大小颜色等。useInsertionEffect：在组件插入到 DOM 树后执行，适合执行处理焦点和键盘事件，测量元素尺寸等操作。
12.简述react diff算法
Diff算法就是‘差异算法’，当props和state更新是生成一个虚拟dom树，与真实dom树进行比较，先进行分层比较，当对比同一层的组件时，优先对比组件类型，类型相同时，递归比较更新这个组件，类型不同时直接销毁这个组件及子组件，并创建新的组件。比较列表时也用diff算法，通过key属性来识别哪些子组件可以被复用，而不是销毁和重新创建
13.说一下react的flux架构
Flux架构的特点是单向数据流，这意味着数据总是从Action到Dispatcher，再到Stores，最后到Views。Flux不是一个库或框架，而是一种模式，开发者可以根据需要实现自己的Flux架构。如Redux、MobX等，这些都是在Flux架构基础上发展出来的状态管理库，Flux 架构适合于那些需要复杂状态管理的应用，尤其是当应用的状态在多个组件之间共享时。
14.说一下react的mvc架构
MVC 架构是一种更传统的软件架构模式，它将应用分为三个部分：模型（Model）、视图（View）和控制器（Controller）。在 MVC 架构中，模型负责数据和业务逻辑，视图负责展示数据，而控制器负责接收用户输入并调用模型逻辑来处理这些输入，然后更新视图。MVC 架构适合于那些对数据、逻辑和界面有明确分离的应用。
15.简述useDebuggerValue用法
通常用于自定义 Hook 的调试，
16.简述useReducer用法
是一个小型状态管理器
const [state, dispatch] = useReducer(reducer, { age: 42 });
17.usestate是同步还是异步的
useState 本身是同步的，但是 React 的状态更新和渲染过程可能会表现出异步的行为
标签：react,面试题,函数,渲染,元素,2024,简述,组件,页面 From： https://blog.csdn.net/m0_60614534/article/details/139324110