说说你对react的理解?有哪些特性?
react是用于构建用户界面的 JavaScript 库,只提供了 UI 层面的解决方案,相当于mvc中的v,遵循组件设计模式、声明式编程范式和函数式编程概念
特性:组件化开发,JSX语法,单向数据流,声明式编程,灵活高效,虚拟DOM。
说说Real diff算法是怎么运作的?
Diff算法是对真实dom与虚拟dom的差异性做比较,只对同层级进行比较。
分为三个层级,tree层级,只有删除和添加操作,只要节点不同,直接删除节点以及节点下所有子节点,并在需要移动的位置上进行添加操作。
Component层级,相同类型的component具有相似的结构,不同类型的component直接在原位置删除,不会在向下进行比较,然后做添加处理。
Element层级,有插入,删除,移动三种操作,如果有相同的父级集合,并且包含同样的元素,可以复用,只需要移动位置即可,对于不同的元素,直接删除,并添加新元素到指定位置,增添了元素的key值,为了更好的比较元素是否相同。
最后进行一次遍历,如果有没有用到的元素,也会做删除处理。
说说React生命周期有哪些不同的阶段?每个阶段对应的方法是?
挂载阶段 constructor() componentWillMount() componentDidMount()
更新阶段 componentWillUpdate()componentDidUpdate()
销毁阶段 componentWillUnmount()
说说你对React中虚拟dom的理解?
虚拟dom就是一个js对象,通过对象的方法来表示dom结构,通过事务处理机制,将多次Dom修改的结果一次性更新到页面上,从而有效的减少页面的渲染次数,减少修改dom重绘重排的时间,提高渲染性能,react在内存中维护一个跟真是dom一样的虚拟dom树,再改动完组件后会再生成一个新的虚拟dom,react会将新的虚拟dom和原来的进行比较,找出两个dom树的不同的地方,然后再真实dom上更新diff,提高渲染速度
说说你对react hook的理解?
函数式组件也称无状态组件,Hook是React16.8版本之后增加的新特性, 它可以让你在函数组件中使用 state 以及其他的 React 特性
React组件之间如何通信?
父传子:父组件在调用子组件的时候,在子组件的标签内传递参数,子组件通过 props属性就能接收父组件传递过来的参数
子传父:父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过 来的值
兄弟组件:使用context状态树,发布订阅者模式,通过react-redux全局状态管 理工具通信。
父组件向后代组件传递:使用context提供了组件之间通讯的一种方式,可以共享 数据
非关系组件传递:将数据进行全局资源管理,从而实现互通
说说你对受控组件和非受控组件的理解?应用场景?
非受控组件不受状态的控制,无需初始化属性值。
受控组件就是受我们控制的组件,受控组件我们一般需要初始状态和一个状态更新事件函数,通过onchange事件对value值进行监听,从而达到对组件状态的控制
如input输入框,绑定value属性,通过onchange回调函数事件时刻监听input状态的改变
说说Connect组件的原理是什么?
用来连接React组件与Redux Store
在原本应用组件上包裹一层,使原来整个应用成为Provider的子组件
接受Redux的store作为props,通过context对象传递给子孙组件上的connect
说说react 中jsx语法糖的本质?
JSX 是按照 XML 语法规范 的 JavaScript 语法扩展,也是一种语法糖。
它的本质:并不是直接把 JSX 渲染到页面上,而是内部先转换成了 createElement 形式,再渲染的。
说说你对redux中间件的理解?常用的中间件有哪些?实现原理?
redux中间件就是在 action 被发起之后,到达 reducer 之前做一些事情
redux-thunk中间件会判断dispatch(action),action如果是一个函数, 将会给函数传入参数值(dispatch,getState)
redux-logger:处理日志信息
说说AMD、CMD、commonJS模块化规范的区别?
AMD是预加载,CMD是懒加载。AMD是提前执行,CMD是延迟执行。都用require 进行导入
commonJS模块化是指export defalte 或者exports进行暴漏模块的方式然后用import进行导入模块。
说说package.json中版本号的规则?
>号,版本号必须大于此版本,
>=号,版本号必须大于等于此版本
<号,版本号必须小于此版本,
<=版本号必须小于等于此版本,
~版本号可以在当前版本左右浮动
说说React jsx转换成真实DOM的过程?
首先通过bable将jsx语法转译
通过react.createElment()方法创建虚拟dom元素
createElement函数对传入的孩子节点进行处理,最终构造成一个虚拟DOM 对象,ReactDOM.render将生成好的虚拟DOM渲染到指定容器上,最终转换 为真实DOM。
说说你对@reduxjs/toolkit的理解?和react-redux有什么区别?
@reduxjs/toolkit:redux官方强烈推荐,是一个开箱即用的一个高效的redux开发工作集 ,成为标准的redux逻辑开发模式,使用redux Toolkit可以优化代码,使其更可维护。
React-redux是react官方推出的redux绑定库,react-redux将所有组件分为两大类:UI组件和容器组件,其中所有容器组件包裹UI组件构成父子关系。
React render方法的原理,在什么时候会触发?
在react中类组件只要执行了setState方法就一定会触发render函数执行,
函数组件使用useState更改状态不一定导致重新render组件的props改变了,但是如果是props的值来自于父组件会祖先组件的state,在这种情况下,就会导致子组件的重新渲染,一旦执行了setState就会执行render方法
React性能优化的手段有哪些?
使用React.memo 进行组件缓存
路由懒加载,react.Lazy()
多用css样式控制元素,少使用添加删除操作
减少全局变量的引用
列表渲染的时候加key
尽量使用纯函数
使用shouldComponentUpdate控制是否需要渲染
如何通过原生js实现一个节流函数和防抖函数?
节流只一段时间内只能触发一次,可以使用定时器的第二个参数规定时间
防抖使用定时器如果在规定时间内触发了,那么清除上次的定时器,重新计算时间
说说你对koa中洋葱模型的理解?
将node原生的req和res封装成为一个context对象。
基于async/await的中间件洋葱模型机制。
Koa的洋葱模型是以next()函数为分割点,先由外到内执行Request的逻辑,然后再由内到外执行Response的逻辑,这里的request的逻辑,我们可以理解为是next之前的内容,response的逻辑是next函数之后的内容,也可以说每一个中间件都有两次处理时机。
说说如何借助webpack来优化前端性能?
优化 loader 配置
使用 resolve.extensions
优化 resolve.modules
使用 cache-loader
启动多线程
说说你对webSocket的理解?
Websocket是html5中一种全双工通信的网络技术,属于应用层协议,复用了http协议,只需要tcp协议中一次握手即可实现客户端和服务器的链接,最大的特点就是客户端可以向服务器发送消息,服务器也可以向客户端直接推送消息。