第一周周考笔试整理

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

             React是用于建构用户界面的JavaScript库，单项数据绑定

特性：

Jsx语法

  单向数据流，

             Component，

虚拟dom，

声明式编程

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

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

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

缺点：在一些性能极高的页面使用一些虚拟dom，没有办法对应到极致，会容易出错，需要解决他们

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

挂载阶段：constrouctor():用于引用数据，构造函数

ComponentWillMount：即将挂载之前使用

componentDidMount：挂载完成使用

更新阶段：

getDeriveStateProps：父组件传入props，页面更新新的内容

ShouldcomponentUpdate:用来判断页面是否需要重新渲染，默认返回true，如果不需要重新渲染，返回false

Render：必须有的更新数据阶段

ComponentWillUpdate：当shouldComponentUpdate返回true，就会进入这个生命周期函数

ComponentDidUpdate：

卸载阶段：

componentDid

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

            当react传入setState时，传入的数据与当前组件状态相结合，就是所谓的调和阶段

当经过调和阶段，react会以更清晰的手段生成react元素树

基于react元素树，可以根据新树和老树的节点差异，找到需要更新的部分，只更新这一部分

当更新完这部分以后，react会直接找到差异的部分，可以做的按需更新，而不用全部更新

setState可以是异步的也可以是同步的，根据条件看他是同步还是异步

            在定时器或者原生事件里，他是同步的，可以直接返回

在生命周期函数里，他是异步的

由于fiber架构的引用，他可以直接调用 srtState(fn)

     setState只是看起来是异步的，并非真异步

使用setState有利于性能优化

1. 说说react的事件机制？

React通过合成事件来处理事件，提供了一个跨浏览器、高性能的时间系统

所有的事件都是合成事件，不是通过dom绑定到dom上，而是通过dom绑定的document上面触发合成事件，通过事件冒泡

生成事件池：管理合成事件，提高性能和内存。当事件被处理完毕后，会被重置并放回事件池中，提供下一次的使用

通过合成事件、事件委托、事件池等机制，提供了一致的事件接口

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

      父组件向子组件传递：父组件派发一个事件，子组件通过props接收这个

子组件向父组件传递：在父组件中可以使用一个回调函数，来接收数据，子组件通过props来传递数据

兄弟组件传递：可以使用context桥梁

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

       受控组件：就是可以受到控制的组件，由react组件来管理组件内部状态，input框输入内容时，值会发生对应的变化，可以完全控制组件的状态和行为；在表单输入时使用

非受控组件：就是不可以受到控制的组件，需要外部因素来进行调用，传值，由dom元素本身来管理内部状态的组件。使用ref来获取dom元素或及你行操作。适用于一些交互场景

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

是对react算法的一次变更，为每一个任务增加了优先级，优先级高的任务可以中断优先级低的任务，然后在重新执行优先级低的任务

解决了js中引擎和页面渲染引擎是两个线程，是互斥的。一个线程在执行的时候，另一个线程只能等待，如果执行时间较长，js长时间等待，页面不会更新，会导致页面反应时间慢

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

  diff算法是对虚拟dom的优化和遍历，通过对新旧节点的对比，进行数据的一些改变，，它分为tree层，component层和element层。

Tree：就是树层，当节点发生变化的时候，他不会进行修改，只会进行添加工作

Component层：当节点数据发生变化的时候，会根据不同进行添加或删除操作

Element层：根据key值，发生变化时，会进行对应的操作，如果是移动，就进行移动，添加删除操作，就进行添加删除

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

Redux中间件是介于应用系统和系统软件应用之间的一个软件，可以使用中间件达到资源共享，分享资源的效果

常用的中间件有：

redux-thunk：用于异步操作

redux-logger：用于日志信息

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

使用border属性

Width:0;

Height:0;

Border-left:50px solid transparent;

Border-right:50px solid transparent;

Border-botton:100px solid red

使用伪元素:before

.a::before{

Position:absolute;

Top:100%;

Left:0;

Width:0;

Height:0;

Border-left:50px solid transparent;

Border-right:50px solid transparent;

Border-top:100px solid red

}

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

强缓存：当浏览器发送请求时，服务器可以通过响应头来设置资源的过期时间，如果没有过期，浏览器直接从缓存中获取资源，不会发送请求到服务器

协商缓存：当资源的缓存时间过期时，浏览器发送请求，服务器通过比较判断资源是否发生变化。没有发生变化返回304，发生变化，返回新的内容

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

当jsx语法被编译的时候，会转换成真实的dom；

先解析js语法，就是虚拟dom；

创建虚拟dom元素

渲染虚拟dom：将虚拟dom渲染到真实dom中去，比较真实dom和虚拟dom的差异

生成真实dom：完成页面的渲染

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

@reduxjs/toolkit可以开箱即用，更加简洁和高效

区别：

@reduxjs/toolkit以更简洁高效的api来创建redux store和reducer；react-redux只提供了连接redux store和组件的功能；

依赖关系：@reduxjs/toolkit不依赖于react-redux，可以独立使用，react-redux是建立在redux基础上的，依赖于redux

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

Render是将组件的虚拟dom转化为真实dom元素，并且放到页面中

当组件状态或方法发生变化的时候，react自动调用render函数，会触发新的渲染组件内容

组件初始化的时候触发

当父组件的render方法被调用

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

shouldComponentUpdate：可以判断页面是否需要重新渲染，需要返回true，不需要返回false

通过react.memo：只能用在函数组件里，避免不必要的组件重合

            Key值的绑定：可以通过唯一的key值，渲染需要的数据，避免重复渲染

路由懒加载：可以使用lazy，避免页面重复更新

  

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

Function aa(fn,delay){

Let lastTime = 0;

Return function(){

 Const time=Date.now()

 If(currentTime - lastTime > delay){

lastTime = currentTime}

}

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

使用entry配置：在配置文件里，将多个入口点指定为数组或对象，分割代码

使用插件：可以根据配置的规则自动提取到单独的文件中，避免重复加载

动态导入：可以将模块拆分成更小的模块，按需导入

懒加载：提高页面的加载速度

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

可以通过代码压缩

代码分割：减少初始文件过大，提高页面的加载速度

图片优化：减小图片文件的大小，提高加载速度

按需加载：将不必要的模块延迟

缓存管理：充分利用缓存

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

闭包引起的内存泄露

遗忘的定时器

意外的全局变量

没有清理dom元素引用