【无标题】

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

React 是一个用于构建用户界面的 JavaScript 库。它通过组件化的方式让开发者可以方便地构建可复用、可维护的 UI 组件，并将数据与界面进行关联，实现高效的页面渲染。下面是我对 React 的理解和一些特性：
组件化开发：React 提倡以组件为基本单位进行开发，将复杂的用户界面划分为独立的组件，每个组件包含自己的状态（state）和属性（props）。这种组件化开发方式使得代码结构更清晰、可维护性更高。
虚拟 DOM：React 使用虚拟 DOM（Virtual DOM）来表示界面的状态和结构，通过比较虚拟 DOM 的变化来最小化实际 DOM 操作，从而提高性能。当组件的状态发生变化时，React 会生成一个新的虚拟 DOM 树，并通过算法找出需要真正更新的部分，然后将这些变化批量更新到实际的 DOM 上。
单向数据流：React 的数据流向是单向的，自上而下（父组件到子组件）通过 props 进行数据传递。这种单向数据流的设计使得数据变化的追踪更加可控，易于调试和理解应用程序的状态变化。
JSX 语法：React 使用 JSX 语法，这是一种基于 JavaScript 的扩展语法，允许在 JavaScript 代码中直接编写类似 HTML 的结构。JSX 可以将组件的结构和逻辑放在同一个文件中，提高了代码的可读性和开发效率。
状态管理：React 提供了一种称为状态（state）的概念，允许组件保存和管理自己的数据。组件的状态可以通过 setState 方法进行更新，并且当状态发生改变时，React 会重新渲染组件。
生命周期方法：React 组件生命周期包含了多个阶段，从组件创建、更新到销毁，每个阶段都会触发不同的生命周期方法。开发者可以利用这些生命周期方法来控制组件行为、进行资源的初始化和释放等操作。
可复用性：React 的组件化和模块化设计使得组件可以被复用，通过将不同功能的组件组合在一起，形成更大的应用程序。React 还提供了丰富的生态系统，包括大量的第三方组件库和工具，可以加速开发过程。
这些是 React 的一些主要特性，它们使得 React 成为构建用户界面的强大工具。使用 React 可以使开发者更加专注于界面的实现和交互逻辑的开发，提高开发效率和代码质量。

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

(1)真实DOM和虚拟DOM的区别在于他们的运行不同，真实DOM的运行是真实DOM完全增删改加排版与重绘，虚拟DOM的运行时真实DOM部分增删改加排版与重绘
(2)优缺点：真实DOM在小型的运行项目中运行效率没有虚拟DOM运行效率高，但是在大型项目中，真实DOM运行的效率不一定比虚拟DOM运行效率慢。因为在大型项目中，虚拟DOM的运行还要通过DOM对比和同级对比等过程之后再转化为真实的DOM。
真实 DOM 的优势：
易用
缺点：
效率低，解析速度慢，内存占用量过高
性能差：频繁操作真实 DOM，易于导致重绘与回流
使用虚拟 DOM 的优势如下：
简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能
跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行
缺点：
在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

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

React生命周期有三个不同的阶段，分别是挂载阶段，更新阶段，销毁阶段。
挂载阶段:
constructor() 在 React 组件挂载之前，会调用它的构造函数。
componentWillMount: 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用

更新运行阶段:
componentWillReceiveProps: 在接受父组件改变后的props需要重新渲染组件时用到的比较多，外部组件传递频繁的时候会导致效率比较低
shouldComponentUpdate():用于控制组件重新渲染的生命周期，state发生变化，组件会进入重新渲染的流程，在这里 return false可以阻止组件的更新
render(): render() 方法是 class 组件中唯一必须实现的方法。
componentWillUpdate(): shouldComponentUpdate返回true以后，组件进入重新渲染完成之前进入这个函数。
componentDidUpdate(): 每次state改变并重新渲染页面后都会进入这个生命周期
卸载或销毁阶段
componentWillUnmount ()： 在此处完成组件的卸载和数据的销毁。

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

一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用 setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据 在使用setState更新数据的时候，setState的更新类型分成： 同步和异步，在组件生命周期或React合成事件中，setState是异步在setTimeout或者原生dom事件中，setState是同步

5.说说react的事件机制？

(1)React事件机制：在JavaScript中，react事件机制就是eventloop的循环机制，JavaScript是单线程任务，有的时候需要执行异步任务，为了防止异步任务时候单线程的阻塞，所以采用事件机制的方式来解决这个单线程阻塞的问题
(2)在JS任务中分同步任务和异步任务
(3)同步执行：在同步执行中，直接向下执行不需要等待，直接进入主线程，一般在原生事件中是同步执行的
(4)异步执行：在异步执行过程中，一般像是Ajax网络请求，setTimeOut定时器等当中是异步任务执行的，然后异步的任务又分为微观和宏观，在setState异步执行过程中，先执行宏观任务，然后查看是否有微观任务，如果有微观任务，则执行完全部的微观任务之后继续向下执行，然后在执行当前的任务，一直重复循环，知道当前任务执行完毕

6.React组件之间如何通信？

React组件之间进行通信有父传子，子传父，兄弟组件传值，中间件传值，消息订阅与发布，还有Context状态树等。
父传子：在父组件中的子组件标签上绑定自定义属性，挂载传递的数据，子组件中props接受传递的数据，直接使用即可
子传父：父组件中子组件标签上绑定一个属性，传递一个方法给子组件，子组件中通过props接受这个方法，直接调用，传递相应的参数即可
非父子组件：React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件,在父组件上改变这个状态然后通过props分发给子组件
context状态树传参

7.说说你对受控组件和非受控组件的理解？应用场景？

受控组件：相当于Vue中的双向绑定，以input输入框为例：通过给input绑定onChange事件，获取到input的内容，然后在浏览器会返回输入的结果，输入框更改，下面的控制台也会返回这个结果，一般在进行数据的填写或者是表单当中常用，输入值即最新值。
非受控组件：相当于Vue中的单向绑定，通过ref获取DOM节点，一般在表单的数据回填等会用到。

8.说说你对fiber架构的理解？解决了什么问题？

理解：Fiber是对react做出的一个重大改变与优化，是对react核心算法的一次重新实现
解决的问题：
为每个增加了优先级，优先级高的任务可以中断低优先级的任务。然后再重新，注意是重新执行优先级低的任务
增加了异步任务，调用requestIdleCallback api，浏览器空闲的时候执行
dom diff树变成了链表，一个dom对应两个fiber，对应两个队列，这都是为找到被中断的任务，重新执行

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

Diff算法是虚拟DOM的一个必然结果，它是通过新旧DOM的对比，将在不更新页面的情况下，将需要内容局部更新
Diff算法遵循深度优先，同层比较的原则
React中diff算法主要遵循三个层级的策略：tree层，component层，element层
tree层不会做任何修改，如果有不一样，直接删除创建
component层从父级往子集查找，如果发现不一致，直接删除创建
element层有key值做比较，如果发现key值可以复用的话，就会将位置进行移动，如果没有，则执行删除创建

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

Redux中间件理解：Redux中间件:是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务，衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的，Redux中，中间件就是放在就是在siapatch过程，在分发action进行拦截处理
本质上一个函数，对store.dispatch方法进行了改造，在发出 Action和执行Reducer这两步之间，添加了其他功能
常用的中间件有，redux-logger：日志中间件 redux-thrunk：异步中间件
实现原理：redux的实现原理就是，首先创建一个store，然后将reducer传入其中，初始化状态之后，组件通过dispatch派发一个action，redux调用对应的reducer来处理action，生成新的状态。所有的订阅了store的组件接收到新的状态后，进行重新渲染。通过这种方式，redux实现了一个单一的数据源的状态管理机制。提供了可预测和可维护性，似的状态管理更加简洁和可控。

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

方法一：通过边框和透明区域创建三角形

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}

在这个例子中，我们将元素的宽度和高度设置为0，并通过设置边框的宽度和颜色来创建三角形的形状。通过调整 border-width 和 border-color 属性的值，可以控制三角形的大小和颜色。
方法二：使用伪元素实现三角形

.triangle {
  width: 100px;
  height: 100px;
  position: relative;
}
.triangle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid blue;
}

在这个例子中，我们创建了一个具有固定宽度和高度的容器元素，并利用伪元素 ::before 创建一个尺寸为0的绝对定位元素。通过设置 border 属性的值，同样可以创建出三角形的效果

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

强缓存：浏览器不会像服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK
协商缓存: 向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源

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

JSX 编写阶段：在编写 React 组件时，我们使用 JSX 语法来描述 UI 的结构和交互。JSX 是一种类似于 XML 的语法扩展，它允许我们在 JavaScript 中编写类似 HTML 的代码。

function MyComponent() {
  return <div>Hello, World!</div>;
}

Babel 编译阶段：在构建过程中，通常使用 Babel 来将 JSX 代码转换为普通的 JavaScript 代码。Babel 可以将 JSX 语法转换为 React.createElement() 函数调用。

function MyComponent() {
  return React.createElement('div', null, 'Hello, World!');
}

React.createElement() 调用阶段：在运行时，React 会解析 React.createElement() 函数调用，并基于调用中的参数创建一个虚拟 DOM 元素（Virtual DOM Element）。这个虚拟 DOM 元素是一个轻量级的 JavaScript 对象，包含了组件的类型、属性和子元素等信息。

const element = React.createElement('div', null, 'Hello, World!');

虚拟 DOM 渲染阶段：一旦创建了虚拟 DOM 元素，React 就会根据这些虚拟 DOM 元素的描述信息开始进行渲染。React 会递归遍历虚拟 DOM 树，创建和更新真实 DOM 元素。

真实 DOM 更新阶段：一旦 React 完成虚拟 DOM 的渲染，它将通过比较新旧虚拟 DOM 树的差异，找出需要更新的部分，并相应地更新真实 DOM。React 采用了高效的 Diff 算法来最小化对真实 DOM 的操作，以提高性能。

<!-- 更新前 -->
<div id="root"></div>

<!-- 更新后 -->
<div id="root">
  <div>Hello, World!</div>
</div>
	

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

react-redux 是的官方 React UI绑定层，允许React组件从Redux存储中读取数据，并将操作分派到存储以更新状态
@reduxjs/toolkit 是对 Redux 的二次封装，开箱即用可的一个高效的Redux 开发工具集，使得创建store、更新store更加方便

15.React render方法的原理，在什么时候会触发？

在 React 中，render 方法是用于将组件渲染到真实 DOM 的核心方法之一。它的原理是根据当前组件的状态和属性（props），生成一个虚拟 DOM 树，并将其与之前的虚拟 DOM 树进行比较，找出需要更新的部分，最后将更新的部分同步到真实 DOM 中。
当以下情况发生时，React 的 render 方法会被触发：
组件初始化：初始渲染时，React 会调用组件的 render 方法，将组件的输出渲染到真实 DOM 中。
组件状态变化：当组件的状态（通过 useState 或类组件的 setState）发生改变时，React 会重新调用 render 方法来重新计算虚拟 DOM，并更新真实 DOM。
组件属性变化：当组件的属性（props）发生改变时，React 会重新调用 render 方法来重新计算虚拟 DOM，并更新真实 DOM。
forceUpdate 方法调用：在某些情况下，可以通过调用组件的 forceUpdate 方法来强制触发 render 方法，重新渲染组件。
需要注意的是，React 会使用虚拟 DOM 来进行 diff 算法优化，只更新变化的部分而不是整个 DOM 树。这样能够提高性能，并减少对真实 DOM 的操作次数。

总结起来，React 的 render 方法会在组件初始化、组件状态变化、组件属性变化以及 forceUpdate 方法调用时触发。它是将组件的输出渲染到真实 DOM 的关键步骤。

16.React性能优化的手段有哪些？

React性能优化的手段有：
使用空白标签可以减少额外的标记
使用useMemo和useCallback进行优化缓存和计算，优化性能，提高运行效率
使用封装好的CSS样式或者是import导入CSS文件，减少内联样式的使用
使用PureComponent可以分割组件，减缓Component运行时候的压力。
使用懒加载，load-lazy可以缓解页面加载的压力
对图片和资源进行压缩，节省资源，缩小图片，提高性能
使用纯函数和函数组件
使用Hooks方法，useState或者是useEffect等

17.如何通过原生js实现一个节流函数和防抖函数，写出核心代码，不是简单的思路？

	//节流：
function thorttle2(fn,wait)let timer;
return function () {
let _this = this;
let args = arguments;
if(!timer) [
timer = setTimeout(function(){timer = null;fn.apply(_this, args)
], wait)}}

//防抖函数
function debounce(fn，wait
let timer;
return function() {
let  this = this;
let args = arguments;if(timer)  clearTimeout(timer) ?timer = setTimeout(function()ffn.apply( this, args)
，wait);}}

18.说说webpack中代码分割如何实现？

在 Webpack 中，代码分割（Code Splitting）是一种将代码划分为更小、更独立的文件块的技术，以优化应用程序的加载性能。通过代码分割，可以避免将整个应用打包到一个单独的文件中，而是根据需要动态加载所需的代码块。
Webpack 提供了多种方式来实现代码分割：
入口起点设置：通过在配置文件中指定多个入口起点，每个入口对应一个输出文件。这种方式适合于较小的项目，但可能会导致重复的模块加载。
使用动态导入：利用 ES6 的动态 import() 语法，Webpack 可以将代码分割为单独的文件块，并在需要时进行按需加载。
使用 SplitChunks 插件：Webpack 内置了 SplitChunks 插件，它可以将公共模块提取为单独的文件，避免重复加载。
使用动态导入和预加载：结合动态导入和预加载，可以更精细地控制代码的加载方式。

19.说说如何借助webpack来优化前端性能？

代码分割：使用代码分割将代码拆分为多个文件，以实现按需加载和提高初始加载速度。可以使用动态导入、SplitChunks 插件或配置多个入口起点来实现代码分割。

压缩代码：Webpack 内置了 UglifyJS 插件，可以将 JavaScript 代码进行压缩和混淆，减小文件体积，提高加载速度。
静态资源优化：Webpack 可以处理和优化各种类型的静态资源。例如，使用 image-webpack-loader 来优化图片，使用 file-loader 或 url-loader 来处理字体文件、媒体文件等。

缓存管理：Webpack 可以为生成的文件添加哈希值，以实现文件版本管理和缓存更新。使用 [contenthash] 或 [chunkhash] 将哈希值添加到输出文件名称中，确保文件内容更改时哈希值发生变化。

Tree Shaking：通过配置 Webpack 的 mode 为 production，可以启用 Tree Shaking 功能。Tree Shaking 可以从代码中删除未使用的模块和代码，以减小最终打包后的文件体积。

懒加载和预加载：使用动态导入和预加载技术，按需加载模块，提高页面初始化速度，并在后台加载可能需要的资源。
使用缓存：Webpack 提供了多个缓存策略，例如 babel-loader 的缓存、Webpack 自身的缓存等。通过使用缓存，可以避免重复编译和处理相同的文件，提高构建速度。

CDN 加速：对于一些公共库或静态资源文件，可以考虑使用 CDN 加速，通过配置 externals 或使用插件（如 HtmlWebpackPlugin）来引入 CDN 资源。

20.说说javascript内存泄漏的几种情况？

定时器未及时清理
闭包使用不当，造成循环嵌套循环，然后导致内存泄漏
频繁使用内联样式
DOM对象的不当使用