【第三次测试题】

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

	react是一个前端js框架，高效灵活，有着声明式设计，
	使用简单，组件式开发，可以提高代码的复用率，单向的数据绑定，更加安全
	特性：
		单项数据流
		JSX语法
		虚拟DOM
		声明式编程
		Component

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

区别:
		1.虚拟dom不会进行重绘和回流，而真实dom会频繁重排与重绘
		2.虚拟dom的总损耗是”虚拟dom的增删改+真实dom的差异增删改
		+重排“；真实dom的消耗是”真实dom全部增删改+重排“
真实dom的优点：直接操作HTML，易用
		缺点：解析速度慢，效率低，内存占用量大
	    性能差：频繁操作真实dom会导致重绘和回流
虚拟dom的优点：减少真实dom的频繁更新，减少重绘和回流，占用内存少
		跨平台：一套react代码可以多端运行
		缺点：页面首次渲染时，由于多一层虚拟dom的计算，速度比正常慢些

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

挂载阶段：
	Constructor（）
	ComponentWillMount
	ComponentDidMount()
更新阶段：
	ComponentWillReceiveProps
	ShouldComponentUpdate()
	Render()
	componentWillUpdate()
	componentDidUpdate()
卸载阶段：
	componentWillUnmount()

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

setState是一个组件的显示形态可以由数据状态和外部参数所决定，
而数据状态就是state当需要修改里面的值的状态需要通过setState来改变，
从而达到更新组件内部数据的作用

setState是由React引发的事件处理，调用setState不会同步更新，
除此之外的setState调用会同步更新，除此之外，指的是绕过react，
通过addEventListener直接添加的事件处理函数，还有通过
setTimeout/setInterval产生异步任务

5.说说react的事件机制？

react自身实现了一套事件机制，包括事件的注册、事件的存储、
事件的合成及执行等。

react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上，
然后由统一的事件处理程序来派发执行。通过这种处理，减少了事件注册的次数，
另外react还在事件合成过程中，对不同浏览器的事件进行了封装处理，
抹平浏览器之间的事件差异。

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

（1）父组件向子组件通信，可以通过 props 方式传递数据；也可以通过 ref 方式传递数据；
（2）子组件向父组件通信，通过回调函数方式传递数据；
（3）父组件向后代所有组件传递数据，如果组件层级过多，通过 props 的方式传递数据很繁琐，
	可以通过 Context.Provider 的方式；
（4）一个数据源实现跨组件通信，通过指定 contextType 的方式来实现；
（5）多个数据源实现跨组件通信，使用 Context.Consumer 方式实现；

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

受控组件:简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据

非受控组件:简单来讲，就是不受我们控制的组件，一般情况是初始化的时候
		  接受外部数据，然后自己在内部存储其自身状态当需要时，
		  可以使用ref查询找其当前值

应用场景：
	一次性取值：受控和非受控都可以
	提交是验证：受控和非受控都可以
	即时现场验证：用受控组件
	有条件的禁用提交按钮：用受控组件
	强制输入格式：用受控组件
	一个数据多个输入：用受控

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

Fiber 是 Facebook 花费两年余时间对 React 做出的一个重大改变与优化，
是对 React 核心算法的一次重新实现。
在react中，主要做了以下的操作：
	为每个增加了优先级，优先级高的任务可以中断低优先级的任务。
	然后再重新，注意是重新执行优先级低的任务
	增加了异步任务，调用requestIdleCallback api，浏览器空闲的时候执行
	dom diff树变成了链表，一个dom对应两个fiber（一个链表），对应两个队列，
	这都是为找到被中断的任务，重新执行	
	从架构角度来看，Fiber 是对 React核心算法（即调和过程）的重写
	从编码角度来看，Fiber是 React内部所定义的一种数据结构，它是 Fiber树
	结构的节点单位，也就是 React 16 新架构下的虚拟DOM

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

(1)把树形结构按照层级分解，只比较同级元素。
(2) 列表结构的每个单元添加唯一的 key 属性，方便比较。
(3) React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
(4) 合并操作，调用 component 的 setState 方法的时候, React 将其标记为
	dirty.到每一个事件循环结束, React检查所有标记dirty的component重新绘制.
(5) 选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能。

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

中间件（Middleware）是介于应用系统和系统软件之间的一类软件,它使用系统软件
所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到
资源共享、功能共享的目的 
常用的中间件：
	redux-thunk：用于异步操作
	redux-logger：用于日志记录
实现原理：
	所有中间件被放进了一个数组chain，然后嵌套执行，最后执行store.dispatch。
	中间件内部（middlewareAPI）可以拿到getState和dispatch这两个方法

11.如何使用css实现一个三角形？

.triangle {
	width: 0;
	height: 0;
	border-left: 69px solid transparent;
	border-right: 69px solid transparent;
	border-bottom: 120px solid skyblue;
}

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

强缓存:强缓存是根据返回头中的 Expires 或者 Cache-Control 两个字段来控制
的，都是表示资源的缓存有效时间。

协商缓存:协商缓存是由服务器来确定缓存资源是否可用。主要涉及到两对属性字段,
都是成对出现的,即第一次请求的响应头带上某个字, Last-Modified或者Etag,
则后续请求则会带上对应的请求字段If-Modified-Since或者If-None-Match,
若响应头没有Last-Modified或者Etag字段,则请求头也不会有对应的字段。

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

使用react.createElement或jsx编写react组件,实际上所有的jsx代码最后都会转
换成react.createElement(),babel帮助我们完成了这个转换的过程
react.createElement()函数对key和ref等特殊的props进行处理,并获取
defaultProps对默认props进行赋值,并且对传入的孩子结点进行处理,最终构造成一
个虚拟dom对象,reactDOM.render将生成好的虚拟dom渲染到指定容器上,可以采用
批处理事物等机制对特定浏览器进行了性能优化,最终转化为真实dom

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

reduxjs/toolkit是redux官方强烈推荐,开箱即用的一个高效的redux开发工具集,
旨在成为标准的redux逻辑开发模式,使用redux Tookit可以进行代码的优化,使其
更可维护
React-redux是官方推出redux绑定库,react-redux将所有的组件分成两大类UI组件
和容器组件,其中所有容器组件包裹着ui组件构成父子关系,容器组件会给UI组件传
递redux中保存对的状态和操作状态的方法

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

原理:在类组件中render函数指的就是render方法,而在函数组件中指的就是整个函
数组件,render函数中的jsx语法会被编译成我们熟悉的js代码,在render过程中,
react将新调用的render函数返回的树与旧版本的树进行比较,这一步是决定如何更
新dom的必要步骤,然后进行diff比较,更新dom树

触发时机:类组件调用setState修改状态,函数组件通过useState hook修改状态,
一旦执行了setState就会执行render方法，一旦父组件发生渲染，子组件也会渲染

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

(1)避免使用内联函数
(2)使用react避免额外标记
(3)Immutable减少渲染次数，避免重复渲染
(4)懒加载组件
(5)事件绑定方式
(6)服务端渲染
(7)组件拆分，合理使用hooks
(8)避免使用内联样式属性；
(9)优化 React 中的条件渲染；
(10)不要在 render 方法中导出数据；
(11)列表渲染的时候加key

17.如何通过原生js实现一个节流函数和防抖函数？

防抖
function debounce(fn, delay){
  let timer = null
  const _debounce = function(){
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn()
    }, delay)
  }
  return _debounce
}
节流
function throttle(fn, interval, options){
  	let lastTime = 0
  	const _throttle = function(){
	    const nowTime = new Date().getTime()
	    const remainTime = interval - (nowTime - lastTime)
	    if (remainTime <= 0) {
	      	fn()
	    	lastTime = nowTime
   		}
 	}
 	return _throttle
}

18.说说webpack中常见的loader？解决了什么问题？

(1)mage-loader:加载并且压缩图片文件
(2)css-loader:帮助webpack打包处理css文件,使用css-loader必须要配合使用
style-loader
(3)style-loader:用于将css编译完成的样式,挂载到页面的style标签上。但是要
   注意loader执行顺序,style-loader要放在第一位,loader都是从后往前执行
(4)babel-loader:把 ES6 转换成 ES5
(5)sass-loader:css预处理器,能更好的编写css
(6)postcss-loader:用于补充css样式在各种浏览器的前缀,很方便,不需要手动写了
(7)eslint-loader:用于检查代码是否符合规范，是否存在语法错误

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

(1)Js代码压缩
(2)css代码压缩
(3)文件大小压缩
(4)代码分离
(5)HTML代码压缩
(6)内联chunk

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

(1)意外的全局变量
(2)闭包引起的内存泄露
(3)变量使用后垃圾回收机制为进行处理