面试题总结react

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

       相同点：

             Props和state都是导出html的原始数据

             Props和state都是确定性的，如果我们写的同一个props和state产生了不同的输出，肯定是我们在哪里做错了

             Props和state都可以触发渲染更新

             Props和state都是纯js对象

             可以从父组件得到初始值props和state初始值

       不同点：

             Props不可以在组建内部进行修改，state可以在组件内部进行修改

             可以从父组件修改子组件中的props而不能从父组件修改子组件的state

         Render在以下情况下会执行：

            在类组件调用setState修改状态

            在函数组件中使用useState hook进行修改状态

            一旦执行了setState就会执行render方法，useState会判断当前值是否有无发生改变是否需要执行render方法，一旦父组件发生渲染子组件也会发生渲染

1. shouldComponentUpdate有什么作用？

       ShouldcomponentUpdate的返回值用于判断react组件的输出是否受到当前的state和props的修改，如果当props和state发生改变，shouldcomponentupdate会在渲染之前被调用。

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

       Key在当前的同一层级的某一个节点添加了对同一级的唯一的key属性，当他在当前层级发生变化后，react diff算法通过对比新旧节点进行比较后，如果发现key值相同的节点的时候，就会执行移动操作（然后依然按原策略深入节点的内部进行差异对比更新）而不会执行原策略进行删除旧节点，添加新的节点。

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

       新的生命周期中出现了两个钩子函数分别是：

             GetDerivedStateFromprops(从props中获得衍生的state)

             GetSnapShotBeforeUpdate（）

       区别：

             ComponentWillMount（）中一些初始化的操作放到这个钩子函数中执行，constructor中或者是ComponentDidMount钩子函数中也可已进行甚至做到更好，所以被废弃了。

       ComponentWillreceiveProps（）与自己的名字不符合所以由于不稳定所以被getDerivedStateFromprops（）所代替

       而componentWillupdate（）同理由也被getDerivedStateFromprops（）所代替

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

1. 当前组件没有子节点数据类型就是undefined
2. 有一个子节点的数据类型就是object
3. 有多个子节点的时候才会是array，只有是多个子节点的时候才可以使用map函数来遍历，react资深提供了一个react.children.map()这个方法，可以安全的遍历props.chilren
4. React组件之间如何通信？

       React组件通信：

             子组件向父组件传值：子组件向父组件传值父组件需要自定义一个回调函数来接收子组件的传值

             父组件向子组件传值：父组件通过props进行向子组件传值

             兄弟组件传值：通过状态提升到他们共同的父组件内，通过父传子的方式进行传递值

          祖先组件通信：使用Context API来在组件树中传递数据。

事件总线通信：使用事件总线来发布和订阅事件，实现任何组件之间的通信。

Redux通信：使用Redux作为单一数据源管理应用程序的状态，任何组件可以访问和更新Redux存储的数据。

全局变量通信：使用全局变量来存储共享数据，任何组件都可以访问和更新它们。但使用时需要注意全局变量的作用域和生命周期问题。

1. 谈谈你对immutable.js的理解？

       Immutable.js采用了持久化数据结构，保证每一个对象都是不可变的，任何的添加修改，删除等操作都会产生一个新的对象，且通过结构共享，等方式大服务提升

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

       Redux-thunk支持异步操作，执行异步操作需要先下载redux-thunk，通过thunk进行一个异步的操作，可以通过dispatch和SetState来进行数据的获取以及捕获。

       Redux是一个状态的管理库，redux的核心是dispatch、action、reducers这三部分。

       通过dispatch发放到任务的actions中，在actions中返回一个promise的一个对象，再通过dispatch派发过去。

       在reducers中通过type和data进行数据判读

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

       同步：redux的教程中反复使用rodo的例子，那就是一个典型的同步action，每当dispatch action的时候，state就会被立即更新，setState是异步的。

       异步：一般异步处理的话会使用中间件，比如redux-thunk、redux-saga等中间件，他们做的事情就是包装dispatch、request action由view进行触发 receive action由这些中间件进行触发。

1. redux-saga和redux-thunk的区别与使用场景？

       Redux-thunk：通过执行action中的函数实现业务逻辑，没有拓展的API

       Redux-saga：通过定义saga函数进行监控，同时提供一些常用的API

       Redux-thunk将部分常用的异步处理，放到了action中，redux-saga则是放到了监控函数中。

      

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

       在es6中引入了一种新的原始数据类型symbol，表示独一无二的值。Symbol不可以使用new命令否则的话会报错，这是因为生成的symbol是一个独一无二的值，不是对象symbol函数可以接受一个字符串作为参数，表示对symbol实例的一个描述，主要是为了在控制台进行一个显示，或者字符串的时候，比较容易区分

1. CDN的特点及意义？

     意义：

     CDN的意义就是为了减少带宽的需求量，提高服务器端加速，解决用户量访问的问题，以及客服网站分布不均匀，提高网络访问的稳定性。使用CDN可以获得一些好处，无论他们是共有的CDN还是提供静态内容的私有CDN，里程可能会有所不同，具体取决于CDN传递的流量以及产生的流量

       1.节省骨干网络带宽，减少带宽的需求量

       2.提高服务器端加速，解决由用户访问量大造成服务器过载的问题

     3.服务商可以使用web

     4.能克服网站分布不均匀的问题，并且可以降低网站自身建设和维护成本。

     5.降低“通信风暴”的影响，提高网络访问的稳定性

1. 为什么for循环比forEach性能高？

       For循环是通过下标来进行循环的，对循环中的代码反复的执行，功能强大，可以通过index取得元素。处理的比较方便。

       ForEach方法主要是用于调用数组的某一个元素，并且将元素传递给回调函数，forEach也叫做增强for循环，forEach其实就是for的一个简化版本。Foreach循环对于空的数组来说是并不会执行回调函数的。

       区别：

1. for循环通过顺序进行遍历，forEach通过迭代器进行遍历
2. 数据结构：for是随机访问元素，forEach是顺序链表访问元素

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

       React-redux是官方提供的一个ui绑定层，允许react组件从redux从中读取数据，并且将操作存储以更新的状态。

       @reduxjs/toolkit是对redux进行的一个二次封装，开箱即用的一个高效的redux的工具集。使创建store、更新store更加方便

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

       React render方法的原理：

       Render方法在react中有两种形式，在类组件中指的是render方法，在函数组件中指的是本身，在render函数中我们会编写jsx，jsx通过babel把jsx转换成js进行渲染遍历。

         Render在以下情况下会执行：

            在类组件调用setState修改状态

            在函数组件中使用useState hook进行修改状态

            一旦执行了setState就会执行render方法，useState会判断当前值是否有无发生改变是否需要执行render方法，一旦父组件发生渲染子组件也会发生渲染

1. ![] == ![]，![] == []，结果是什么？为什么？

       根据运算优先级，！的优先级是大于==的，所以会先执行！[]

       根据上述提到的规则（如果有一个操作数是一个布尔值，则在比较相等的情况之前会将其值转换成数值进行比较，当值为true的时候值为1，当值为false的时候值为0）

       根据上述提到的规则（如果有一个数操作的是一个对象，另一个操作数不是的话，则会调用value of的方法）

       根据上述提到的规则（如果有一个数操作的是一个字符串，另一个数为数值的话，在比较相等之前会将字符串转换成数值）

1. 什么是闭包，应用场景是什么？

       闭包：指的就是一个函数作为另一个函数的参数，可以在函数内部访问外部变量。如果一个函数被定义到另一个函数的内部并且返回了对他的引用，这样就形成了闭包。

       闭包的应用场景包括：

1. 访问函数内部的变量
2. 防止函数内部变量执行完毕之后被销毁，使其一直保存在内存中

1. 谈谈你是如何做移动端适配的？

       移动端适配有以下几种方式：

1. 媒体查询
2. Flex弹性布局
3. 百分比
4. 用框架搭建页面
5. Rem+viewprot缩放
6. 使用vh+vw

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

1. 伪类+tranfrom
2. Viewprot+rem
3. Border-image
4. Background-image
5. Postcss-write-svg

对于老项目而言建议使用伪类+tranfrom对于新项目而言的话可以使用viewprot，这个方法的兼容性比较好。

Postcss-write-svg这个方法简单易用，适合直线，圆角建议使用tranfrom+伪类实现

1. 弹性盒中的缩放机制是怎样的？

       弹性盒子中的项目设置flex-grow属性定义项目的比例然后，进行一个项目缩放的一个比例，默认值为0，值越大，放大越厉害，不支持负值。

       Flex-shrink属性定义项目缩小的比例，默认值为1，值越大，缩小的越厉害，同样不支持负值。