龙龙972-CSDN博客

原创前端面试题大全

props和state相同点和不同点？render方法在哪些情况下会执行？生命周期中的shouldComponentUpdate有什么作用？说说React中的虚拟dom？在虚拟dom计算的时候diff和key之间有什么关系？4. react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

2023-08-18 16:13:17 118 1

CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络堵塞，提高用户访问响应速度和命中率。使用CDN可以获取一些好处，无论它们是公有CDN还是提供静态内容的私有CDN，你的里程可能会有所不同，具体取决于通过CDN传递的流量以及你产生的流量。Cache技术在本地缓存用户访问过的Web页面和对象，实现相同对象的访问无须占用主干的出口带宽，并提高用户访问因特网页面的相应时间的需求；四、使用CDN有什么好处？

2023-08-21 07:35:04 96

原创什么是闭包，应用场景是什么?

1、闭包指的是函数内部的函数，它有权取访问另一个函数的内部的变量，即使这个内部的函数被返回了，或者被调用了，他的访问权限仍然存在。2、可以利用闭包模拟私有属性，实现数据隐藏和封装，比如防抖和节流函数封装使用了闭包，但要避免滥用闭包导致内存泄漏。，正常情况下，函数执行完成，内部变量会销毁（销毁：释放内存空间），内部函数没有执行完成，外部函数变量不会被销毁。：函数嵌套函数，内部的函数就是。

2023-08-21 07:34:54 82 1

原创为什么for循环比forEach性能高？

性能上：对于数组arraylist来说，是顺序表，使用for循环可以进行顺序访问，速度比较快；对于linedlist来说，是单链表，使用for循环每次都要从第一个元素读取next域来读取，速度非常慢；对于 arraylist，是顺序表，使用 for 循环可以顺序访问，速度较快；对于 linkedlist，是单链表，使用 for 循环每次都要从第一个元素读取 next 域来读取，速度非常慢；for循环就是通过下标，对循环中的代码反复执行，功能强大，可以通过index取得元素。

2023-08-21 07:34:42 104 1

原创谈谈你是如何做移动端适配的？

比如有的设备宽度是375px，那么html初始font-size就是37.5px，如果设备宽度是300px，那么font-size就是30px。因为内容都是rem基于font-size的倍数，所以不同宽度的设备上都是等比显示的。那么一般我们会以设备宽度的1/10作为初试html的font-size大小，当然这个值是动态的，在不同设备上得到的值不同。只要我们在不同的设备上设置一个合适的初始值，当设备发生变化font-size就会自动等比适配大小，从而在不同的设备上表现统一。注意：媒体监听不是等比缩放！

2023-08-21 07:34:29 249 1

原创弹性盒中的缩放机制是怎样的？

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。他的默认值为auto，也就是项目的本来大小。弹性盒中的项目设置flex-grow属性定义项目的放大比例，默认值为0，值越大，放大越厉害，且不支持负值；而flex-shrink属性定义项目的缩小比例，默认值为1，数值越大，缩小越厉害，同样不支持负值；注意：它可以设为跟width或height属性一样的值，比如给具体的像素值，则项目将占据固定空间。

2023-08-21 07:34:15 42 1

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

另外，使用工具库如 redux-actions 或 redux-toolkit 也可以简化定义和使用 action 的过程，它们提供了相应的函数来自动生成 action 创建函数和对应的 action-type 常量。在 Redux 中，防止定义的 action-type 常量重复的一种常见做法是使用单独的模块来定义这些常量，并且在使用它们的地方引入。将 action-type 的常量集中管理在一个文件中，可以避免重复定义和拼写错误的问题，并且可以方便地在多个文件中共享这些常量。

2023-08-21 07:33:43 62 1

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

什么是reduxjs/toolkit?Redux Toolkit 是我们官方推荐的编写 Redux 逻辑的方法。它围绕 Redux 核心，并包含我们认为对于构建 Redux 应用必不可少的软件包和功能。Redux Toolkit 建立在我们建议的最佳实践中，简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序更加容易。React-redux是官方react UI绑定层，允许React组件从redux存储中读取数据，并将操作分派到存储以更新的状态。

2023-08-21 07:33:35 146 1

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

在render过程中，React 将新调用的 render函数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比较，更新 DOM树。所以，一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染。点击按钮，则调用setState方法，无论count发生变化辩护，控制台都会输出Foo render，证明render执行了。在render中，我们会编写。

2023-08-21 07:33:25 80 1

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

异步action：原则上redux并没有提供异步action的处理方案，异步的action需要依赖第三方的中间件解决（如redux-thunk），dispatch了一个异步action（本质上是dispatch的一个函数）之后，目标state并不会立即响应，而是要看异步函数内部的逻辑，来决定state什么时候响应。

2023-08-18 19:17:27 47 1

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

Redux本身是一个同步的状态管理库，它的核心概念包括store、action和reducer，用于管理和维护应用的状态。然而，虽然Redux本身是同步的，但在处理复杂的应用场景时，可能需要执行异步操作，例如发起网络请求、处理定时器等。每个中间件可以选择执行额外的逻辑，然后将action传递给下一个中间件，或者直接传递给reducer。当异步操作完成后，你可以决定将不同的action派发给store，通常是一个表示异步操作结果的成功或失败的action。最后，返回一个新的函数，用于处理action。

2023-08-18 19:14:40 118 1

原创谈谈你对immutable.js的理解？

Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。

2023-08-18 19:07:19 70 1

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

3 有多个子节点的时候才会是array ,只有在多个节点的时候才可以直接调用map方法，react资深提供了一个react.children.map()方法，可以安全遍历子节点对象。因为在react 中 props.children 不一定是数组，1当前组件没有子节点数据类型就是undefined，2有一个子节点数据类型就是object。

2023-08-18 18:51:23 45 1

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

1、componentWillMount中可能需要做的事(一些数据初始化的操作就应该放在这个钩子中处理)，constructor与componentDidMount也能做，甚至做的更好，此方法被废弃。使用场景：若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps。固定高度的div，定时新增一行，实现在新增的时候，使目前观看的行高度不变。返回一个状态对象或者null，用来修改state的值。：在更新前拿到快照（可以拿到更新前的数据）在更新DOM之前调用。

2023-08-18 16:12:26 45 1

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

当同一层级的某个节点添加了对于其他同级节点唯一的key属性，当它在当前层级的位置发生了变化后。react diff算法通过新旧节点比较后，如果发现了key值相同的新旧节点，就会执行移动操作（然后依然按原策略深入节点内部的差异对比更新），而不会执行原策略的删除旧节点，创建新节点的操作。每次数据更新后，重新计算虚拟Dom，并和上一次生成的虚拟dom进行对比，对发生变化的部分作批量更新。原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。

2023-08-18 16:06:51 43 1

原创 shouldComponentUpdate有什么作用？

注意：我们从父组件Parent向子组件Child传递的是基本类型的数据，若传递的是引用类型的数据，我们就需要在shouldComponentUpdate函数中进行深层比较。但这种方式是非常影响效率，且会损害性能的。shouldComponentUpdate方法接收两个参数nextProps和nextState，可以将this.props与nextProps以及this.state与nextState进行比较，并返回 false 以告知 React 可以跳过更新。

2023-08-18 15:57:17 105 1

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

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

2023-08-18 15:04:10 44 1

weixin_68911063的博客