面试题-a little

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

        props：

                props是一个从外部传进组件的参数，由于React具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据，它是不可改变的，如果想要改变它，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props和展示形式不会改变，props除了可以传字符串，数字，还可以传递对象，数组甚至是回调函数

        state:

                state主要作用是用于组件保存，控制及修改自己的状态，它只能在constructor中初始化，state是可以被改变的，state放改动的一些属性，比如点击选中，再点击取消，类似这种属性就放入带state中，注意：没有state的叫做无状态组件，多用props少用state，多写无状态组件，注意：修改state的值时，必须通过调用setState方法，当我们调用this.setState方法时,React会更新组件的数据状态，并且重新调用render方法

        不同点：

                1.props不可以在组件内部修改，但state可以在组件内部修改 2.可以从父组件修改自组件的props，而不能从父组件修改自组件的state 相同点：

                1.props和state都是导出HTML的原始数据。 2.props和state都是确定性的，如果我们写的组件为同一props和state的组合3.生成了不同的输出，那木我们肯定在哪里做错了 4.props和state都会触发渲染更新 5.props和state都是纯JS对象（用typeof来判断，结果都是object） 6.可以从父组件得到初始值props和state的初始值

        触发时机: 类组件调用用setState修改状态，从而执行render 函数组件通过useState的hook修改状态，函数通过useState这种形式更新数据，当数组的值不在发生变化就不会触发render

2、生命周期shouldComponentUpdate有什么作用

        shouldComponentUpdate(nextProps, nextState)

                nextProps: 表示下一个props。

                nextState: 表示下一个state的值。

        shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。

优点：

性能优化：React中props,state值的变化，会导致组件重新渲染。使用shouldComponentUpdate就是为了减少render不必要的渲染

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

        虚拟dom的理解：

                实际上它只是一层对真实DOM的抽象，以JavaScript对象（VNode节点）作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作时这棵树映射到真实环境上，创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应

        关系：

                react中的diff算法遵循了三个层阶，而与key值有关的就是element层。

                element层：当同一层级的某个节点添加了对于其他同级节点唯一的key属性，当它在当前层级的位置发生了变化后。

                react diff算法通过新旧节点比较后，如果发现了key值相同的新旧节点，就会执行移动操作（然后依然按原策略深入节点内部的差异对比更新），而不会执行原策略的删除旧节点，创建新节点的操作。这无疑大大提高了React性能和渲染效率

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

        react新增的生命钩子：

                 getDerivedStateFromProps： 这个钩子的作用是从props中获取衍生的state

        getSnapshotBeforeUpdate：

                这个钩子的意思是在组件更新前获取快照，此方法一般结合componentDidUpdate使用，getSnapshotBeforeUpdate中返回的值将作为第三参数传递给componentDidUpdate

        react废弃了哪些钩子，为什么？

     componentWillMount、componentWillReceiveProps、*componentWillUpdate*这三个钩子均被废弃。

                这三个钩子很容易被误解和滥用，而且在未来react打算提供异步渲染能力，那么这几个钩子的不稳定很可能被放大，从而带来不可预测的bug

        componentWillUpdate：

                会因为不合理的用法导致被调用多次，而且getSnapshotBeforeUpdate比它更加稳定

         componentWillMount：

                        它能够优化的实际效果却是微乎其微，而且由于后期react引入fiber的概念，react中的任务也有了优先级之分，而在render之前的任务，极有可能被更高优先级的任务打断，导致多次执行

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

        在react 中 props.children 不一定是数组

        受到异常有三种可能 ：

                1.当前组件没有子节点数据类型就是undefined

                2.有一个子节点数据类型就是object 。

                3 .有多个子节点的时候才会是array ,只有在多个节点的时候才可以直接调用map方法，react提供了一个react.children.map()方法，可以安全遍历子节点对象。

6、对 immutable的理解：

        Immutable Data 就是一旦创建，就不能再被更改的数据。

        对 Immutable 对象的任何修改、添加或删除操作都会返回一个新的 Immutable 对象。         Immutable 实现原理是持久化数据结构（Persistent Data Structure），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。 为了避免深度拷贝（deep Copy）把所有节点都复制一遍带来的性能损耗，Immutable 使用了共享结构（Structural Sharing），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享

        优点

                1、降低Mutable带来的复杂度 原生Js的引用赋值虽然可以节省内存，但当应用复杂后，可变状态就会变成噩梦，通常一般的做法使用浅拷贝和深拷贝可以解决，但是这样造成了CPU和内存的消耗，Immutable可以很好的解决这些问题。

                2、节省内存空间 前面提到的结构共享，Immutable.js使用这种方式会尽量的复用内存。

                3、随意穿梭 因为每次数据都不一样，只要把这些数据放到一个数组中存起来，就可以作回退操作，很容易开发出撤销和回退的功能。

                4、拥抱函数式编程 Immutable（持久化数据结构）本身就是函数式编程的概念，纯函数式编程比面向对象更适用于前端开发。因为只要输入一致，输出必然一致，这样开发的组件更易于调试和组装。

        缺点

                1、学习成本 2、需要额外引入资源文件 3、使用过程中容易与原生对象混淆

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

Redux本身是一个同步的状态管理库，但通过使用中间件（middleware），可以实现在Redux中执行异步代码。 在Redux中，中间件是一种位于action被发起和reducer处理之间的拦截器。它可以拦截action，并对其进行处理，甚至可以发起新的action。中间件提供了一种扩展Redux功能的机制，使得我们可以处理异步操作、日志记录、错误处理等。

1. 创建中间件函数：中间件函数是一个接收store对象作为参数的函数，它返回一个函数，该函数接收next作为参数。

1. 应用中间件：通过调用Redux的applyMiddleware函数，将中间件函数作为参数传递给它，并将返回的函数作为Redux store的enhancer。这样就将中间件应用到了Redux的执行流程中。

1. 拦截action：当发起一个action时，中间件会捕获到这个action，并在需要的情况下进行处理。中间件可以访问到当前的store对象，可以获取state、dispatch新的action等。

1. 执行异步操作：在中间件中，我们可以执行异步的操作，如发送网络请求、获取数据等。通常使用异步操作库（如axios、fetch）或者Promise来执行异步操作。

1. 发起新的action：当异步操作完成后，中间件可以根据异步操作的结果，发起新的action来更新Redux的状态。这个新的action会经过其他中间件的拦截，最终被传递给reducer进行状态更新。 通过这种方式，Redux中间件实现了在同步的Redux流程中执行异步代码的能力。它允许我们在Redux中处理异步操作，并将异步结果以同步的方式更新到状态中。 中间件的实现原理是，它在Redux的dispatch过程中拦截action，并可以对action进行处理、修改或者发起新的action。中间件形成了一个链式调用的机制，每个中间件都可以对action进行处理，然后将处理结果传递给下一个中间件，最终传递给reducer进行状态更新。这种链式调用的机制使得我们可以在Redux流程中插入自定义的逻辑，并对action进行灵活的处理。

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

        同步action：

                执行了dispatch函数之后，对应的reducer纯函数立即得到执行，reducer执行完了之后，state立即就改变了，此时用store.getState函数，取到的是最新的state值； 异步action：原则上redux并没有提供异步action的处理方案，异步的action需要依赖第三方的中间件解决（如redux-thunk），dispatch了一个异步action（本质上是dispatch的一个函数）之后，目标state并不会立即响应，而是要看异步函数内部的逻辑，来决定state什么时候响应.

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

        redux-thunk：

                实现思路 redux-thunk相当于是基于store的升级，一般情况，我们传给store的action是一个对象，但是通过redux-thunk中间件，我们可以把部分的业务逻辑（异步请求）等放在action中进行处理。当store接收到函数类型的action，redux-thunk会执行该函数，并传入参数dispatch，当函数内部的逻辑执行完成后，会再次派发一个action继续向下执行

        redux-saga

                实现思路 在store的index文件中创建saga中间件连接到store，saga中间件可以监控派发的action，如果有action.type值与监控的变量一致，则执行该函数的内容，在这个函数中也可以再次派发一个新的action。

        使用场景

                两者都是在发送后端请求需要使用异步代码的时候使用

        区别

                redux-thunk：通过执行action中的函数实现业务逻辑，没有拓展API redux-saga：通过定义saga函数进行监控，同时提供一些常用的API redux-thunk将部分异步处理业务逻辑写在action中，redux-sagasaga则是放在监控的函数中。

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

        1.ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。

        2.Symbol函数前不能使用new命令，否则会报错。这是因为生成的Symbol是一个原始类型的值，不是对象。

        3.Symbol函数可以接收一个字符串作为参数，表示对Symbol实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

11、CDN的特点及意义

        CDN的功能特点：

                 (1)节省骨干网带宽，减少带宽需求量；

                (2)提供服务器端加速，解决由于用户访问量大造成的服务器过载问题；

                (3)服务商能使用Web Cache技术在本地缓存用户访问过的Web页面和对象，实现相同对象的访问无须占用主干的出口带宽，并提高用户访问因特网页面的相应时间的需求；

                (4)能克服网站分布不均的问题，并且能降低网站自身建设和维护成本；

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

        CDN的作用有哪些？

        远程加速 若用户使用远程访问会根据DNS负载均衡的技术智能选择服务器，加快远程访问的速度

        镜像服务 有效的解决了不同运营商之间互联瓶颈而造成的影响，实现了跨运营商的网络加速。

        带宽优化 自动生成镜像Cache服务器，远程用户访问时可以直接从Cache服务器抓取数据，减轻源站点的负载。

        抗攻击 各个CDN节点智能冗余机制，有效的防御黑客入侵攻击，并且抵制DDOS攻击对网站的影响。

        使用CDN有什么好处？

                使用CDN可以获取一些好处，无论它们是公有CDN还是提供静态内容的私有CDN，你的里程可能会有所不同，具体取决于通过CDN传递的流量以及你产生的流量。

        主要好处是：通过更快的加载静态资源内容来提高站点性能，一些流行的js库。

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

        一、for( )循环

                通过下标，对循环中的代码反复执行，功能强大，可以通过index取得元素。在处理比较复杂的处理的时候较为方便

        二、forEach( )循环

                forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。foreach有的也叫增强for循环，foreach其实是for循环的一个特殊简化版。注意，forEach() 对于空数组是不会执行回调函数的

        三、测试性能

                循环的数越高,forEach的性能越低，如果是顺序表，则for循环访问快，如果是单链表，则forEach可以直接读取节点速度较快

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

        什么是reduxjs/toolkit?

         Redux Toolkit 是我们官方推荐的编写 Redux 逻辑的方法。它围绕 Redux 核心，并包含我们认为对于构建 Redux 应用必不可少的软件包和功能。Redux Toolkit 建立在我们建议的最佳实践中，简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序更加容易

        区别

                1、reduxjs/tookit相对于react-redux来说比较方便，集成了redux-devtools-extension，不需要额外的配置，非常方便

                2、reduxjs/tookit集成immutable-js的功能，不需要安装配置使用，提升了开发效率

                3、reduxjs/tookit集成了redux-thunk的功能

                4、reduxjs/tookit将types、actions、reducers放在一起组成了全新的slices，简化了我们的使用

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

        一、原理

                在类组件和函数组件中，render函数的形式是不同的。

                在类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件。

                在render函数中的jsx语句会被编译成我们熟悉的js代码

        二、触发时机

     render的执行时机主要分成了两部分

                类组件调用 setState 修改状态后会执行render重新渲染

                函数组件通过useState hook修改状态

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

1. ![] == ![] 首先是!的优先级要比 == 高 所以 先执行两边的 ![] 然后单个的[]是true 加上!取反 也就是false了

   然后 第一个 ![] == ![] 也就是等于 false == false 最后返回的是true

2. ![] == [] 然后后边的![] == [] 也是因为!优先级高 所以先把左边的变成false == []

然后又因为 两个值相比较 如果有一方的值是布尔值的话 就会把另一方转成数值

然后 [] 转成数值的话 就是 0 然后因为0 = false 所以最后 也是false == false 最后也返回一个true

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

        1. rem 布局

     rem 是CSS3新增的一个相对单位，它以 HTML 元素的 font-size 为比例：如果给其设置1rem则为html设置的一个size大小，可以成比例

        2. vw/vh 布局

                vw/vh 方案与 rem 方案类似，都是将页面分成一份一份的，只不过 vw/vh 是将页面分为 100 份，1vw = device-width/100

        3. 百分比布局

                百分比布局虽然简单，但是需要特定的宽度，并且参考对象是父元素，在嵌套时会有问题

        4. 响应式布局

        5. px 为主，搭配 vw/vh、媒体查询与 flex 进行布局

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

        1、是通过JavaScript检测浏览器能否处理0.5px的边框，如果可以，给html标签元素添加个class。

        2、伪类+transform：

                把原先元素的border去掉，然后利用:before或者:after重做border，并 transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位。

        3、 viewport + rem：

                同时通过设置对应viewport的rem基准值，这种方式

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

        弹性盒（Flexbox）是一种CSS布局模型，它提供了一种灵活的方式来对容器中的元素进行排列和分布。在弹性盒中，缩放机制是指用于控制项目的缩放行为的属性和特性。

弹性盒中的缩放机制主要通过以下属性来实现：

        1、flex-grow：该属性定义项目在剩余空间中的伸展比例。默认值为0，表示项目不会伸展。如果所有项目的flex-grow值都为0，它们将会按照其原始大小分配空间。如果某个项目的flex-grow值大于0，它会占据剩余空间的一部分，比例为它的flex-grow值与所有具有flex-grow大于0的项目的flex-grow值之和的比例。

        2、flex-shrink：该属性定义项目在空间不足时的缩小比例。默认值为1，表示项目会缩小，使得其他项目可以得到更多空间。如果所有项目的flex-shrink值都为1，它们将会按照其原始大小分配空间。如果某个项目的flex-shrink值大于1，当空间不足时，它会缩小得更多。值为0的项目不会缩小。

        3、flex-basis：该属性定义项目在主轴上的初始大小。默认值为auto，表示项目会根据其内容自动计算大小。可以使用具体的长度值或百分比来指定初始大小。