面试题813

小仙1223

已于 2023-08-14 07:46:09 修改

阅读量54

点赞数

文章标签：前端 javascript 开发语言

于 2023-08-14 07:45:50 首次发布

本文链接：https://blog.csdn.net/kll5588/article/details/132268328

版权

1.说说你对react的理解？有哪些特性？

React使用来构建用户界面的JavaScript库，核心思想是组件化，它将用户界面拆分成一个个独立的组件，每个组件都有自己的状态和属性，通过组件的组合和嵌套，构造出一个复杂的用户界面。React使用虚拟dom技术，在内存中维护一个虚拟dom树，对比前后两棵树的差异，只更新变化的部分，从而提高性能。还提供了一种声明式编程，只需要关注页面的渲染状态，不需要操作dom

特性：jsx语法，单项数据绑定，虚拟dom，声明式编程，组件化

2.说说Real DOM和Virtual DOM的区别？优缺点？

虚拟dom不会重绘和排版，真实dom会频繁地重绘排版

虚拟dom优点：简单方便，跨平台，性能比较好

缺点：在一些性能特别高的一些应用中虚拟dom没办法针对性的极致优化，第一次渲染dom的时候，速度比正常来说稍微慢了些

真实dom优点：使用起来很方便

缺点：效率比较低，解析速度慢，占用内存高，性能比较差

3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

挂载阶段，更新阶段和销毁阶段

挂载阶段：constructor()组件挂载前调用

ComponentWillMount()调用render前调用

Render()渲染时调用

componentDidMount()挂载后调用

更新阶段：componentWillReceiveProps()接收父组件传递过来的值

shouldComponentUpdate()组件渲染生命周期

render()：class组件中必须实现的渲染方法

componentWillUpdate()组件重新渲染之前进入

componentDidUpdate():state状态更改后进入

销毁阶段：componentWillUnmount()销毁组件

4.说说React中setState执行机制？

一个组件的显示形态可以由内部参数和外部参数共同决定，数据状态就是state，需要修改里面的值的状态就要用到setState，从而达到更新内部数据的效果

SetState是一个异步方法，所以在调用setState后不能够立即获取到state更新后的状态，如果在更新后还需要执行一些操作，就需要在第二个参数中传入回调函数，这个回调函数会在状态更新并重新渲染后执行

t的事件机制？

5.React上注册的事件最后会绑定到document上

React自身实现了事件冒泡机制，这就是我们使用event.stoppropogation()无效的原因

React有一套自身的合成事件

6Rea？

6.父传子：在父组件中给子组件绑定一个属性，子组件通过props接收

子传父：在父组件中绑定一个属性，传递一个函数过去，子组件通过props接收，直接调用，再返回对应的参数

中间人：把多个组件需要共享的状态提供到离他们共有的父组件中，在父组件中改变这个状态然后再通过props传递给各个子组件

跨组件通信：通过context实现子孙组件传值

件非场景？

7.受控组件就是受控制的组件，组件状态全程响应外部的数据，由react控制表单值的方法就被称为受控组件

非受控组件也就是不受控制的组件，一般情况就是在初始化的时候接受外部数据，然后自己在内部存储自身状态，一切都由DOM操作，不受setState的控制，和原始的html相似

大部分时候推荐使用受控组件实现表单，因为在受控组件中，表单数据由react负责处理，如果由非受控组件处理，控制能力较弱，表单数据就由dom本身操作，但代码量较少，比较简单

8.题？

8.Fiber架构是用来实现架构渲染和提高react性能的，他解决了一些react中存在的问题，比如长时间占用主线程，无法中断渲染和难以实现优先级控制等。Fiber架构的主要思想是将渲染过程分解成多个可分段的任务单元，通过优先级调度，对任务执行进行排序，可以让react在主线程上进行灵活的任务切换，避免长时间阻塞，提高应用的响应性和用户体验感

解决的问题：长时间占用主线程，无法中断渲染和难以实现优先级控制

9.说说react diff的原理是什么？

Diff算法是比较virtual dom树的变化，只对真正发生变化的部分进行更新，提高渲染性能和效率

原理：对比两棵树的根节点，不同类型会销毁旧树创建新树，相同类型会继续对比子结点

对比子结点：逐个对比旧树的子节点，进行列表对比，属性对比，对比子结点

列表遍历：对比子结点的过程中，react会尽量复用已存在的子结点，不是销毁创建新节点，以减少不必要的操作，优化性能

10.说说你对redux中间件的理解？常用的中间件有哪些？实现原理？

Redux中间件是用来在redux数据流中进行扩展和处理的功能，获得redux的action和state，对其进行处理，转换或执行额外的操作，然后将结果传递给下一个中间件或redux的reducer

常见中间件：

Redux thunk:允许action创建函数并返回一个函数，而不是普通的action对象

Redux Saga:使用生成器函数来处理操作

Redux logger:用于在开发过程中记录redux的action和state的变化，方便调试和监控

Redux promise：允许action创建函数返回一个promise对象，实现异步操作

实现原理：中间件的实现原理基于redux的dispatch机制，在react中，当一个action被dispatch时，会依次经过中间件链中的每个中间件进行处理，每个中间件都会对action进行拦截，修改，延迟处理等操作，并将处理结果传递给下一个中间件，直到最后一个中间件将结果传递给redux的reducer进行状态更新

11.如何使用css实现一个三角形，写出两种以上方案得满分？

使用border实现三角形，设置元素的宽度和高度为0，然后通过border属性来控制三角形的颜色形状大小，通过设置border-left和border-right为相同的宽度，还有border-bottom的宽度和颜色，可以创建出一个向下的三角形
使用伪元素实现三角形：使用::before来创建一个绝对定位的元素，并设置边框的宽度样式颜色来形成一个三角形

12.什么是强缓存和协商缓存？

强缓存是指浏览器在第一次请求资源时，将资源的响应信息缓存在本地，以后再请求相同资源时，浏览器会根据缓存的相应信息判断是否命中强缓存，如果命中强缓存，浏览器会直接从本地存储获取资源，不会再向浏览器发送请求，这样可以提高页面加载速度

协商缓存是在强缓存失效的情况下，浏览器将请求发送给服务器，通过比较请求头中的If-Modified-Since与服务器上资源的Etag值来判断资源是否发生变化，如果没变化服务器会返回304，告诉浏览器继续使用本地缓存，如果发生变化他就会返回新的资源，更新缓存

强缓存和协同缓存可以协同使用，可以保持页面加载速度的同时减少对服务器的请求

13.说说React jsx转换成真实DOM的过程？

这个过程主要由babel编译器完成

首先要解析JSX，将它转换成抽象的对应语法树，然后要创建元素，再将react元素渲染到真实的dom树，然后再使用diff算法来比较前后两次渲染的dom树有什么变化找出需要更新的地方，再对需要更新的地方进行dom操作，完成渲染

14.说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

@reduxjs/toolkit是一个官方提供的用于简化redux开发的工具包。它提供了一组用于编写redux逻辑的实用函数和工具，

主要特点；

集成了多个redux常用的中间件（比如Redux thunk，Redux Saga等），以及redux DevTools扩展，

提供了一个createSlice函数，用于生成标准的redux reducer和action，减少了代码工作量