目录
3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？
10.说说你对redux中间件的理解？常用的中间件有哪些？实现原理？
14. 说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？
15. 说说AMD、CMD、commonJS模块化规范的区别？
18. React render方法的原理，在什么时候会触发？
1.说说你对react的理解？有哪些特性？
React，用于构建用户界面的 JavaScript 库，只提供了 UI 层面的解决方案
遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效
使用虚拟 DOM 来有效地操作 DOM，遵循从高阶组件到低阶组件的单向数据流
帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面
react 类组件使用一个名为 render() 的方法或者函数组件return，接收输入的数据并返回需要展示的内容
特性：
JSX 语法
单向数据绑定
虚拟 DOM
声明式编程
Component
2.说说对Diff算法理解
Diff算法作用：
由于渲染真实DOM的开销很大，有时候我们修改了某个数据，直接渲染到真实dom上会引起整个dom树的重绘和重排。我们希望只更新我们修改的那一小块dom，而不是整个dom，diff算法就帮我们实现了这点
Diff算法的本质：找出两对象（虚拟dom树）之间的差异，目的是尽可能地做到节点可复用
3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？
一共有三个阶段，分别为
挂载阶段（Mounting）
更新阶段(Updating)
卸载阶段（Unmounting
挂载阶段:
- constructor() 在 React 组件挂载之前，会调用它的构造函数。
- componentWillMount: 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
- componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用
更新运行阶段:
* componentWillReceiveProps: 在接受父组件改变后的props需要重新渲染组件时用到的比较多，外部组件传递频繁的时候会导致效率比较低
* shouldComponentUpdate():用于控制组件重新渲染的生命周期，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
* render(): render() 方法是 class 组件中唯一必须实现的方法。
* *componentWillUpdate(): shouldComponentUpdate返回true以后，组件进入重新渲染完成之前进入这个函数。
* **componentDidUpdate(): 每次state改变并重新渲染页面后都会进入这个生命周期
卸载或销毁阶段
componentWillUnmount ()： 在此处完成组件的卸载和数据的销毁。
4.说你对react hook的理解
React中的Hook方法：
useState()用于为函数组件引入状态。在useState()中，数组第一项为一个变量，指向状态的当前值。类似this.state,第二项是一个函数，用来更新状态,类似setState
useEffect()接受两个参数，第一个参数是你要进行的异步操作，第二个参数是一个数组，用来给出Effect的依赖项。只要这个数组发生变化，useEffect()就会执行
useRef()：
相当于class组件中的createRef的作用，ref.current获取绑定的对象
UseReducer()：
接受reducer函数和状态的初始值作为参数，返回一个数组，其中第一项为当前的状态值，第二项为发送action的dispatch函数
UseMemo()和useCallback()：
接收的参数都是一样,第一个参数为回调，第二个参数为要依赖的数据
共同作用：仅仅依赖数据发生变化, 才会调用，也就是起到缓存的作用。useCallback缓存函数，useMemo 缓存返回值。
5. 说说你对React中虚拟dom的理解？
虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘
使用虚拟 DOM 的优势如下：
如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能
跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行
6. React组件之间如何通信
父传子：在父组件的子组件标签上绑定自定义属性，挂载传递的数据，然后子组件通过props接收传递的数据
子传父：在父组件中的组件间标签上绑定一个数据，传递一个方法给子组件，子组件通过props接收这个方法，直接调用即可
非父子组件通信： redux
7.说说你对受控组件和非受控组件的理解？应用场景？
受控组件：
由React控制输入表单的元素而改变其值的方式
例如：给表单input绑定一个onChange事件，当input状态发生变化就会触发这个事件，从而更新state的变化
非受控组件：
它的表单数据由dom本身处理，不受setState控制，和传统的html相似，输入什么就会显示最新的值在非受控组件中可以使用ref来从dom获取表单数据
8.说说Connect组件的原理是什么？
connect有四个参数, 但是后两个参数用到的很少.
connect 的第一个参数是 mapStateToProps
这个函数允许我们将 store 中的数据作为 props 绑定到组件上，实现主要原理, 就是将需要绑定的props作为一个函数传过来, 在connect中传给mapStateToProps一个真实的store的数据
9.说说react 中jsx语法糖的本质？
jsx本质就是下面这个函数React.createElement的语法糖，所有的jsx语法都会最终经过babel.js转化成为React.createElement这个函数的函数调用
10.说说你对redux中间件的理解？常用的中间件有哪些？实现原理？
Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理
前面我们了解到了Redux整个工作流程，当action发出之后，reducer立即算出state，整个过程是一个同步的操作
那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件，其本质上一个函数，对store.dispatch方法进行了改造，在发出 Action和执行 Reducer这两步之间，添加了其他功能
常用的redux中间件，如：redux-thunk：用于异步操作、edux-logger：用于日志记录
中间件都需要通过applyMiddlewares进行注册，作用是将所有的中间件组成一个数组，依次执行然后作为第二个参数传入到createStore中
11. 什么是websocket？
WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。它最大的特点是：服务器可以向客户端主动推动消息，客户端也可以主动向服务器推送消息。
12. 什么是koa？
Koa是一个精简的node框架，被认为是第二代Node框架，其最大的特点就是独特的中间件流程控制，是一个典型的洋葱模型，它的核心工作包括下面两个方面：
将node原生的req和res封装成为一个context对象。
基于async/await的中间件洋葱模型机制。
13. 通过原生js实现一个节流函数和防抖函数？
防抖函数（debounce）
功能：当事件被触发N秒之后再执行回调，如果在N秒内被触发，则重新计时。
节流函数（throttle）
功能：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效
14. 说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？
@reduxjs/toolkit
@reduxjs/toolkit 是对 Redux 的二次封装，开箱即用可的一个高效的 Redux 开发工具集，使得创建store、更新store
15. 说说AMD、CMD、commonJS模块化规范的区别？
CommonJS与AMD：
CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。
AMD规范则是非同步加载模块，允许指定回调函数。
CMD和AMD：
1.对于依赖的模块AMD是提前执行，CMD是延迟执行。
2.AMD推崇依赖前置（在定义模块的时候就要声明其依赖的模块），CMD推崇依赖在用到某个模块的时候再去require——按需加载）。
16. 说说React jsx转换成真实DOM的过程？
1. JSX在被编译后，会变成一个针对 React.createElement 的调用。
2.eateElement的大致流程为：
1.二次处理key、ref、self、source四个属性值；
2.遍历config，筛选可以提到props中的属性；
3.将children中的子元素推入childArray数组；
4.格式化defaultProps
5.将以上数据作为入参，发起ReactElement的调用，最终由ReactElement返回虚拟Dom对象
3. 最终将虚拟Dom传入ReactDom.render函数中，将其转变为真实Dom
17.package.json中版本号详解
version 指定版本号
>version 大于该版本号
>=version 大于等于该版本号
<version 小于该版本号
<=version 小于等于该版本号
~version 右侧任意
^version 从左向右，第一个非0号的右侧任意
x-version x位置任意
" "|| * version 表示版本任意
version1-version2 表示版本区间范围 包含首尾版本号
version1||version2||…version 表示或，或version1或version2，支持多个
18. React render方法的原理，在什么时候会触发？
原理
在类组件和函数组件中，render函数的形式是不同的。
在类组件中render函数指的就是
render方法；而在函数组件中，指的就是整个函数组件。类组件调用 setState 修改状态
函数组件通过
useState hook修改状态
19.说说如何借助webpack来优化前端性能？
JS代码压缩
CSS代码压缩
Html文件代码压缩
文件大小压缩
图片压缩
Tree Shaking
代码分离
内联 chunk
20.React性能优化的手段有哪些？
1、使用纯组件；
2、使用 React.memo 进行组件记忆（React.memo 是一个高阶组件），对 于相同的输入，不重复执行；
3、如果是类组件，使用 shouldComponentUpdate（这是在重新渲染组件之前触发的其中一个生命周期事件）生命周期事件，可以利用此事件来决定何时需要重新渲染组件；
4、路由懒加载；
5、使用 React Fragments 避免额外标记；
6、不要使用内联函数定义（如果我们使用内联函数，则每次调用“render”函数时都会创建一个新的函数实例）；
7、避免在Willxxx系列的生命周期中进行异步请求，操作dom等；
8、如果是类组件，事件函数在Constructor中绑定bind改变this指向；
9、避免使用内联样式属性；
10、优化 React 中的条件渲染；
11、不要在 render 方法中导出数据；
12、列表渲染的时候加key；
13、在函数组件中使用useCallback和useMemo来进行组件优化，依赖没有变化的话，不重复执行；
14、类组件中使用immutable对象；
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
