【无标题】

1、props和state相同点和不同点？render方法在哪些情况下会执行？

相同点：props和state都是用来存储组件的数据的，他们都可以触发组件的重新渲染。

不同点:props是父组件传递子组件的数据，不可能直接修改，state是组件自身的状态，可以通过setState方法来修改。

Render方法在以下情况下会执行：组件初始化渲染时，组件的props或state发生变化是，父组件重新渲染时，子组件也会重新渲染

2、shouldComponentUpdate有什么作用？

shouldComponentUpdate方法是用来控制组件是否重新渲染。默认情况下，每当组件的props或state发生变化时，组件都会重新渲染。但是在shouldComponentUpdate方法中，可以根据新的props或state的值，来决定是否重新渲染。如果shouldComponentUpdate方法返回false，组件将不会重新渲染。

3、说说React中的虚拟dom？在虚拟dom计算的时候diff和key之间有什么关       系？

虚拟DOM时react中的一种概念，是一个轻量级的js对象，用来描述真实DOM的结构。当组件的state发生变化时，react会生成一个新的虚拟DOM，并将新旧虚拟DOM进行比较，找出需要跟新的部分，然后只更新需要更新的部分到真实DOM提高渲染效率。

虚拟DOM计算过程中，diff算法来比较新旧虚拟DOM的差异的，diff算法会遍历新旧DOM的节点，超出需要更新的节点，这个过程中每个节点需要有一个唯一key属性，用来表示节点的身份，key属性可以帮助react更近准的找到需要跟新的节点，来提高效率。

4、react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

GetDerivedStateFromProps和getSnapshotBeforeUpdate

GetDerivedStateFromProps代替了componentWillReceiveProps

getSnapshotBeforeUpdate代替了componentWillUpdate

5、React的props.children使用map函数来遍历会收到异常显示，为什么？应该    如何遍历？

Map函数遍历props.children时，如果props.children只有一个元素，则map函数无法正常工作会报错。这是因为map函数要求接受一个数组作为参数，而props.children只有一个元素时，是个单独对象不是数组。

解决方案是将props.children用数组包裹起来，比如使用react.children.toArray方法将props.children转换为数组。

6、React组件之间如何通信？

父传子：父组件将数据传递给父组件中的子组件标签，子组件通过props来接受父组件传递过来的数据。

子传父：在父组件中定义一个回调函数，将回调函数传递给子组件，子组件通过调用传递的回调函数，回调函数的返回值就是子组件传递的数据。

兄弟传值：子组件A调用父组件传递过来定义好的回调函数，将数据传递过去，父组件将函数的回调接收在将参数传递给子组件B，子组件B通过props来接受传递过来的数据。

Context来实现跨足剑通信。

7、谈谈你对immutable.js的理解？

immutable.js是用于处理不可变数据的js库，提供了一些不可变数据结构，这些数据结构的值一旦创建，就不能被修改，只能通过创建新的数据结构来实现修改。它还可以提高性能。

8、redux本来是同步的，为什么它能执行异步代码？实现原理是什么？中间件的          实现原理是什么？

redux本身是一个同步的状态管理库，但是通过使用中间件，可以在redux中执行异步代码。中间件是一个函数，它可以拦截redux的action，并在action达到reducer之前的进行一些额外的处理。

常见的中间件：redux-thunk和redux-saga

9、redux中同步action与异步action最大的区别是什么？

同步的action是一个简单对象，描述了一中状态变化，他会立即出发reducer进行处理

异步是一种函数，可以执行异步操作，action可以在异步操作完成后再发送reducer进行处理。

10、redux-saga和redux-thunk的区别与使用场景？

redux-thunk使用函数作为action创建函数，这些函数可以在内部进行异步操作，然后派发一个普通的同步action

redux-saga是用了ES6的Generator函数来处理异步逻辑，通过监听redux的action，并满足某些条件时执行异步操作。

使用场景：redux-saga比较强灵活，适合处理复杂的异步逻辑，可以实行更细的控制和组织异步的操作流程。

redux-thunk：

11、在使用redux过程中，如何防止定义的action-type的常量重复？

可以通过将action-type的常量定义在一个单独文件中，然后再使用的地方引入，这样可以避免定义的action-type的常量重复。

12、CDN的特点及意义？

CDN的特点时将静态资源部署到全球各个地点服务器上，让用户能够从离自己最近的服务器获取资源，提高了访问速度和用户体验。

意义在于减轻了服务器的负载，提高网站的访问速度提供更好的用户体验。

13、为什么for循环比forEach性能高？

For循环比forEach性能高的原因是for循环在循环过程中直接使用索引进行访问，而forEach会为每个元素的创建一个函数作为回调，导致额外的开销。For可以使用break和continue控制语言，forEach不行。

14、说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

@reduxjs/toolkit是官方推荐用于简化Redux开发的工具。提供了一些API和工具函数，可以简化redux的常见操作，如action和reducer等。相对于redux的传统开发方式，@reduxjs/toolkit可以减少大量的代码提高效率。

react-redux是和react结合使用的redux绑定库，提供了些用于在react组件中使用redux的API和工具函数。

15、React render方法的原理，在什么时候会触发？

用于将react组件渲染到DOM中的方法。当react组件的状态或属性发生改变时，或调用了组件的forceUpdate方法，就会触发render方法重新渲染组件。

触发时机是刚开始的时候会被触发一次。之后的只要props或state发生该改变时会触发一次。

16、![] == ![]，![] == []，结果是什么？为什么？

结果都是false，在js中队的比较是通过引用地址来进行的，两个不同的数组或对象在内存中的引用地址不同，所以它们是不相等的。它们两个对象中元素或属性想用，它们也不相等。

 17、什么是闭包，应用场景是什么？ 

闭包是指函数能够更访问其定义的时的此法作用域中的变量，即使函数在其定义的此法作用域之外执行。

应用场景：私有变量、模块化，

18、谈谈你是如何做移动端适配的？

响应式布局

Rem是一种相对单位可以根据元素的字体大小进行调整

vm/vh是相对于视口宽度和高度的单位，可以根据视口的大小进行调整。

19、移动端1像素的解决方案？

移动端1像素的解决方案主要有使用伪元素加倍、使用viewport的scale属性、使用flexible.js等方法。使用伪元素加倍是通过在1像素元素的两侧分别添加一个0.5像素的伪元素，然后使用transform:scale(0.5)将其缩小到1像素。使用viewport的scale属性是通过设置viewport的scale属性为1/dpr，然后使用1像素的样式进行渲染。flexible.js是一种动态设置根元素字体大小的方法，可以根据设备像素比进行调整。

20、弹性盒中的缩放机制是怎样的？

弹性盒子的缩放机制是指当弹性容器的可用空间不足以容纳所有弹性项时，会按照一定的比例对弹性项进行一个缩放。弹性项可以通过设置flex属性来控制弹性容器中的缩放比例