目录
说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？
说说你对redux中间件的理解？常用的中间件有哪些？实现原理？
说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？
说说你对react的理解？有哪些特性？
React是用于构建用户界面的JavaScript库，它起源与Facebook的内部项目，该公司对市场上所有的JavaScript都不满意决定自己开发一套，用户架设自己的网站，react不是一个mvc框架，仅仅是视图V层的库
说说Real diff算法是怎么运作的？
Diff算法的目的就是为了找到哪些节点发生了变化，哪些没有发生变化，可以复用，具体实现就事进行虚拟dom对比，返回一个patch对象用来存储两个节点不同的地方，最后用patch记录的消息去局部的更新dom，diff算法比较只会在同层级下进行，不会跨层级去比较
说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？
挂载阶段：
Constructor()在react组件挂载之前，会调用他的构造函数
componentWillMount：在调用render方法之前调用，并在初始化挂载及后续更新的时候都会被调用
componentDidMount：在组件挂载的时候立即调用
更新运行阶段：
ComponentWillReceiveProps：在接收父组件改变后的props需要重新的渲染组件的时候用的比较多，外部组件传递频繁的时候会导致效率比较低
ShouldComponentUpdate：用于控制组件重新渲染的生命周期，state发生变化的时候，组件会进入冲洗你的渲染流程当中，在这里return false就可以阻止组件的更新
Render()：是class组件中唯一的必须实现的方法
ComponentWillUpdate()：这个方法是在等ShouldComponentUpdate返回true的时候，组件会进入重新渲染完成之前的进行这个函数
ComponentDidUpdate():每次state改变并重新渲染页面后都会进入这个生命周期
卸载或者销毁的阶段：
ComponentWillunMount():在此处完成组件的卸载和数据的销毁
说说你对React中虚拟dom的理解？
虚拟dom不会进行排版与重绘的操作，而真实dom会频繁的排版与重绘，虚拟dom的总损耗是“虚拟dom增删改+真实dom的差异增删改+排版与重绘”它的优势是简单方便，如果使用手动的操作真实dom来完成页面，繁琐又很容易出错，在大规模的应用下维护起来也比较困难，性能方面使用虚拟dom能够有效的去避免真实dom树的频繁更新，减少多次引起的重绘与回流，从而的去提高性能；跨平台：react借助虚拟dom带来了跨平台的能力，一套代码多段运行；
虚拟dom的缺点：在一些性能要求极高的应用当中虚拟dom无法进行针对性的极致优化，首次渲染大量dom的时候，由于多了一层虚拟dom的计算，速度要比正常的稍慢
说说你对react hook的理解？
常见的hooks有useMemo、useState、useEffect、useCallBack、useRef、useContext、
Hooks主要就是通过创建的hooks来解决性能提升
通过自定义的hooks，可以将组件逻辑提取到可重复利用的函数当中，可以理解为hooks，就是为了用来放一些重复代码的函数，其中最常见的hooks就是useMemo是通过proComponent来对数据进行一次浅比较在引入hooks特性后我们可以中memo进行性能的提升，usecontext：它是可以将全局数据通过provider接口传递value给局部组件，让它包围在provider的接口可以全局数据的读写接口
React组件之间如何通信？
组件通信就是发送者通过某种媒体某种手段从而达到某种目的，常见的组件通信方式有父传子，子传父，兄弟组件传递
父传子的话就在在父组件中的子组件的标签上绑定一个自定义的属性，挂载传递数据，子组件中通过props接收传递的参数
子传父的话在父组件的子组件的标签上绑定一个属性，传递方法给子组件，子组件通过props进行接收，直接调用这个方法，传递响应的参数
兄弟组件传递就是一般通过父组件作为中间层来进行使用，是通过父组件在进行传递的
说说你对受控组件和非受控组件的理解？应用场景？
受控组件就是由react的控制输入表单的元素，而改变其值的方式，称为受控组件
假设：给表单元素input绑定一个onChange事件，当input状态发生改变的时候，就会触发onChange事件从而去更新组件的state
非受控组件就是表单数据由dom元素本身进行处理，既不会收到setState()的控制，又与传统的HTML表单输入相似，input输入的值即显示的是最新的值，在非受控组件当中，可以使用ref来获取表单的值
说说Connect组件的原理是什么？
Connect有四个参数，但是后面两个参数用的很少，第一个参数是mapStateToProps这个函数允许我们讲store中的数据作为props绑定到数组上，现主要原理就是将需要绑定的props作为一个函数传过来，在connect中传给mapStateToProps一个真实store数据
第二个参数就是mapDispatchToProps由于更改数据必须要触发action，因此在这里的主要功能就是将action作为props绑定到组件上
说说react 中jsx语法糖的本质？
Jsx语法糖实质上就是一个js函数，需要babel来解析，核心函数是react.createElement(tag.(attrbuties),children)参数tag是标签名，可以是html标签和组件名attrbuties参数是标签的属性，children参数是tag的子元素，用来创建一个vnode，最后渲染到页面上
说说你对redux中间件的理解？常用的中间件有哪些？实现原理？
在Redux中，中间件就是放在dispatch过程，在分发action的时候进行拦截处理，redux的整个工作流程就是，当action发出后reducer立即算出state，整个过程就是一个同步的操作，那么如果需要支持异步操作，或者致辞错误处理，日志监控，这个过程就可以用上中间件，其本质就是一个函数对store，dispatch方法进行了改造，在发出action和执行reducer这两步之间人添加了其他功能，常见的中间件有redux-thuck：用于异步操作；redux-logger：用于日志记录
实现原理：中间件都需要经过applyMiddlewares进行注册，作用就是将所有的中间件组成一个数组，一次执行然后作为第二个参数传入到createStore中
说说AMD、CMD、commonJS模块化规范的区别？
Commonjs规范加载模块是同步的，也就是说只有加载完成，才能执行后面的操作AMD规范是非同步加载模块，允许指定回调函数
CMD和AMD：对于依赖的模块AMD是提前执行，CMD是延迟执行，不过requirejs
是从2.0开始，也改成就可以延迟执行
AMD推崇依赖前置，AMD的api默认是一个当多个用，CMD严格的区分
说说package.json中版本号的规则？
分为住版本号、次版本号、修订版本号、日期版本号、
主板本号变化了就表示有一个不兼容上个版本的大更改
次版本号，变化了就表示增加了新功能并且可以向后兼容
修订版本号变化了就表示有bug修复，并且可以向后兼容
日期版本号加希腊字母版本号
说说React jsx转换成真实DOM的过程？
使用react.createElement或者JSX编写react组件，实际上所有的JSX代码都会转换成react.createElement内容，babel帮助我们完成了转换的过程，createElement函数对key和ref等特殊的props进行了处理，并获取defaultProps对默认的props进行赋值，并且对传入的子节点进行处理，最终构造成一个dom对象
说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？
Redux是一个js'状态管理容器，主要提供状态的管理，可以运行在服务器客户端，@reduxjs/toolkit是一个redux官方于react绑定的库，可以使组件从redux store中直接读取数据，并且stroe分发actions，用来更新数据
React render方法的原理，在什么时候会触发？
再类组件和函数组件中render函数的形式不同，在类组件中render函数指的是render方法，在函数组件中指的就是整个函数，在render过程中，react函数返回的dom树与旧版本的树进行比较，这一步是决定如何更新dom的必要步骤，然后进行diff比较更新dom树
在类组件中调用setState修改状态的时候会触发，和函数组件通过useState hooks次该状态的时候会触发
React性能优化的手段有哪些？
- 避免使用内联函数，每次render渲染的时候，都会创建一个新的函数实例，应该在组件内部创建一个函数，将事件绑定到函数，这样每次调用render的时候，就不会创建单独的函数实例
- 使用react fragement避免额外的标记，用户创建新组件的时候，每个组件应该具有单个父标签，父级不能有两个标签，所以顶部要有一个公共的标签，所以经常的在组件顶部添加额外的标签div，这个div标签充当父标签没有掐的作用，这个时候使用fragement它不会向组件引入任何的额外标记，但是它可以作为父级的标签
- 懒加载组件，从工程方面考虑，webpack存在代码拆分的能力，可以为应用创建多个包，并在运行的时候动态的去加载，减少初始包的大小
- 事件绑定方式：从性能上来考虑，在render方法中使用bind和箭头函数，都会生成新的方法实例，在constructor中使用bind和箭头函数，性能提高
- 服务端渲染：可以使用户更快的看到显示成功的页面
如何通过原生js实现一个节流函数和防抖函数？
本质上就是一个优化高频率执行代码的一种手段，
节流的话可以使用时间戳和定时器的写法，使用事件戳写法，事件就会立即执行，停止触发后没有办法再一次的执行
防抖的话
Function deb(func,wait){
Let timeout
Return function(){
Let context = this;
Let args = argumnets
ClearTimeoout(timeout)
Timeout = setTimeout(function(){
Func.apply(context,args)
},wait)
}
}
说说你对koa中洋葱模型的理解？
Koa洋葱模型是以next()函数为分割点，先由外到内执行response的逻辑，洋葱模型的核心原理主要是借助compose方法
说说如何借助webpack来优化前端性能？
Webpack是一个模块打包工具，可以使用webpack管理模块，并分析模块之间的依赖关系，最终编译输出模块为html、JavaScript和css一级各种静态文件，让开发更加高效
说说你对webSocket的理解？
Websocket是一种基于TCP的全双工通信协议，用在应用层
websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信
在websocket出现之前，web交互一般是基于http协议的短连接或者长连接
websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
