react常见面试题

说说你对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协议中一次握手即可实现客户端和服务器的链接，最大的特点就是客户端可以向服务器发送消息，服务器也可以向客户端直接推送消息。