本文详细介绍了React的核心特性，包括JSX、虚拟DOM、组件生命周期的不同阶段及其方法、ReactHooks的使用以及组件间通信。还讨论了React的Reconciliation算法，解释了Diff算法的工作原理。此外，提到了Redux中间件、状态管理以及性能优化技术，如使用节流和防抖函数。最后，简述了模块化规范和WebSocket的基本概念。
目录
说说你对redux中间件的理解？常用的中间件有哪些？实现原理
说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？
说说你对react的理解？有哪些特性？
React，用于构建用户界面的 JavaScript 库，只提供了 UI 层面的解决方案 遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效 使用虚拟 DOM 来有效地操作 DOM，遵循从高阶组件到低阶组件的单向数据流 帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面
特性：JSX 语法 单向数据绑定 虚拟 DOM 声明式编程 Component
优势：高效灵活 声明式的设计，简单使用 组件式开发，提高代码复用率 单向响应的数据流会比双向绑定的更安全，速度更快
React 的 Reconciliation 算法原理
React 的渲染机制 Reconciliation 过程
React 采用的是虚拟 DOM (即 VDOM )，每次属性 (props) 和状态 (state) 发生变化的时候，render 函数返回不同的元素树，React 会检测当前返回的元素树和上次渲染的元素树之前的差异，然后针对差异的地方进行更新操作，最后渲染为真实 DOM，这就是整个 Reconciliation 过程，其核心就是进行新旧 DOM 树对比的 diff 算法。
Real diff算法是怎么运作的？
diff 算法
在某一时间节点调用 React 的 render() 方法，会创建一棵由 React 元素组成的树。在下一次 state 或 props 更新时，相同的 render() 方法会返回一棵不同的树。React 需要基于这两棵树之间的差别来判断如何有效率的更新 UI 以保证当前 UI 与最新的树保持同步。
React生命周期有哪些不同的阶段？每个阶段对应的方法是？
三个阶段生命周期函数
创建阶段
在创建阶段，组件会被创建出来并且被加载到 DOM 中去。如果严格划分创建阶段的话，可以划分为初始化阶段、挂载阶段。
初始化阶段是调用 Constructor 的阶段，挂载阶段就是执行 componentWillMount、render、componentDidMount 的阶段。
创建阶段 constructor
一个类必须要有一个 constructor 方法，如果这个方法没有被显式定义，那么，一个默认的 constructor 函数会被添加。
一般，constructor 方法会返回一个实例对象，返回了实例对象之后我们可以在类函数中使用 this 关键字，在 constructor 中需要使用 super 方法调用基类的构造方法，也将父组件的 props 注入给子组件。
在 constructor 中可以做组件的初始化工作，比如说可以初始化 state，在 constructor 中可以直接修改 state，使用 this.state 进行赋值，不能使用 this.setState 方法。
创建阶段 componentWillMount
在组件挂载到 DOM 前（UI渲染完成前），componentWillMount 会被调用而且只会被调用一次。此时，如果使用 this.setState 是不会引起重新渲染的。
更多时候，会把组件元素里的内容提前到 constructor 中，所以在项目中很少使用到 componentWillMount 这个生命周期函数。
创建阶段 render
render 方法是一个类组件必须有的方法，render 方法会返回一个顶级的 react 元素。render 方法返回的并不是一个真正的 DOM 元素，它渲染的是 Dom Tree 的一个 React 对象，React 之所以效率高，是因为使用了虚拟的 Dom Tree。需要注意的是，不能在 render 方法里去执行 this.setState。
创建阶段 componentDidMount
在第一次渲染后调用，当 React 应用执行 componentDidMount 时就证明 UI 渲染完成了，这个生命周期函数只执行一次，它被调用时已经渲染出真实 DOM 了，这个生命周期函数比较适合使用的场景向服务端获取异步的数据，也就是获取一些外部数据资源。需要注意的是，当父组件执行 render 的时候，只有当所有的子组件都完成了创建，父组件才会完成渲染，然后执行 componentDidMount。
更新阶段
更新阶段 componentWillReceiveProps组件接收到新 props 的时候调用 componentWillReceiveProps，可以在此对比新 props 和原来的 props，如果 props 发生变化，我们可以进行一些业务逻辑的操作。不过，现在不推荐使用这个方法了，因为有新的生命周期函数可以取代它。
更新阶段 shouldComponentUpdate
这个方法可以用于判断是否要继续执行 render 方法。它比较新传入的 nextProps 、 nextState 跟当前的 props、state ，如果返回 true，组件将继续执行更新，如果返回 false，会阻止组件更新，从而减少不必要的渲染，以达到性能优化的目的。但是，跟 shouldComponentUpdate 相比，更推荐使用 PureComponent 自动实现。 ( shouldComponentUpdate 相关笔记：https://www.cnblogs.com/xiaoxuStudy/p/13350935.html#shouldComponentUpdate )
shouldComponentUpdate 同时接受 props 跟 state，componentWillReceiveProps 只接受 props。
更新阶段 componentDidUpdate
componentDidUpdate 在每次 UI 更新时调用。这个方法接收 2 个参数：新传入的 props 跟 state，可以在这里和原来的数据进行对比，进行一些业务逻辑的处理。可以更新一些外部数据资源。
卸载阶段
卸载阶段 componentWillUnmount组件从 DOM 中移除之前立刻被调用 (比如说删除购物车中的某个商品时) componentWillUnmount，这个生命周期函数可以用来做资源的释放，比如说可以清理绑定的 timer。
说你对React中虚拟dom的理解？
虚拟DOM是一种编程概念，就是一颗虚拟的Javascript对象树，它将真实的dom转换为一个个js对象，保存在内存中
虚拟DOM通过js模拟网页文档节点，生成虚拟DOM树，然后进一步生成真实的DOM树，渲染到页面，如果内容发生改变，React会重新生成一棵全新的虚拟DOM树，与前边的旧的虚拟DOM进行比较，通过diff算法，将变化的部分打包成patch，再次应用到真实DOM中，重新渲染页面
说说你对react hook的理解?
Hook是React 16.8.0版本增加的新特性/新语法
可以让你在函数组件中使用 state 以及其他的 React 特性
State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
接收context状态树传递过来的数据
接受reducer函数和状态的初始值作为参数，返回一个数组，其中第一项为当前的状态值，第二项为发送action的dispatch函数
接收的参数都是一样,第一个参数为回调，第二个参数为要依赖的数据
共同作用：仅仅依赖数据发生变化, 才会调用，也就是起到缓存的作用。useCallback缓存函数，useMemo 缓存返回值。
React组件之间如何通信？
说说你对受控组件和非受控组件的理解？应用场景？
受控组件：
表单组件的状态或数据只由state维护，通过setState()修改更新
非受控组件：
使用ref来获取dom节点的数据，然后操作dom节点来处理
说说Connect组件的原理是什么？
组件的容器和store做连接
Connect的方法使得ui组件变成容器组件
让组件和store的数据同步共享，connect store的state数据变化，组件的 state也会跟着变化
说说react 中jsx语法糖的本质？
React 使用 JSX 来替代常规的JavaScript。
JSX 是按照 XML 语法规范 的 JavaScript 语法扩展。
并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲 染的
说说你对redux中间件的理解？常用的中间件有哪些？实现原理
中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的
常用的中间件
redux-thunk：用于异步操作
redux-logger：用于日志记录所有中间件被放进了一个数组chain，然后嵌套执行，最后执行store.dispatch。可以看到，中间件内部（middlewareAPI）可以拿到getState和dispatch这两个方法
说说AMD、CMD、commonJS模块化规范的区别？
说说package.json中版本号的规则？
版本的格式
patch：修复bug，兼容老版本
minor：新增功能，兼容老版本
major：新的架构调整，不兼容老版本
依赖版本号规则
这三个依赖分别使用了三个符号来表明依赖的版本范围。语义化版本范围规定：
- *：升级到最新版本
- ^：升级次版本号和修订号
- ~：只升级修订号
说说React jsx转换成真实DOM的过程？
写jsx代码
Babel进行编译jsx文件
编译后的jsx执行react.createElement的调用
传入到reactElement方法中生成虚拟DOM
返回给reactDom.render生成真实dom
说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？
React render方法的原理，在什么时候会触发？
类组件里是render方法，函数组件是函数本身
是在render过程中，react将新调用的render函数返回的树与旧版本的 树进行 比较，这一步决定DOM的必要步骤，然后进行diff比较，更新DOM树
类组件setState修改状态的时候，函数组件通过useState修改状态的时候
React性能优化的手段有哪些？
如何通过原生js实现一个节流函数和防抖函数？
防抖:
Const input = document.querySelector(‘input’)
Let count=0
Const inputChange=(e)=>{log({++count}，this,e)}
Settimeout(()=>{oninput()},2000)
节流:
Const input = document.querySelector(‘input’)
Let count=0
Const inputChange=(e)=>{log({++count}，this,e)}
Oninput = Settimeout(()=>{inputChange()},2000)
说说你对koa中洋葱模型的理解？
说说如何借助webpack来优化前端性能？
关于webpack对前端性能的优化，可以通过文件体积大小入手，其次还可通过分包的形式、减少http请求次数等方式，实现对前端性能的优化
说说你对webSocket的理解？
什么是websocket
WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）
它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的
Websocket是一个持久化的协议
websocket的原理
websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信
在websocket出现之前，web交互一般是基于http协议的短连接或者长连接
websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"
WebSocket有以下特点：
是真正的全双工方式，建立连接后客户端与服务器端是完全平等的，可以互相主动请求。而HTTP长连接基于HTTP，是传统的客户端对服务器发起请求的模式。
HTTP长连接中，每次数据交换除了真正的数据部分外，服务器和客户端还要大量交换HTTP header，信息交换效率很低。Websocket协议通过第一个request建立了TCP连接之后，之后交换的数据都不需要发送 HTTP header就能交换数据，这显然和原有的HTTP协议有区别所以它需要对服务器和客户端都进行升级才能实现（主流浏览器都已支持HTML5）
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
