日常·总结--前端

最新推荐文章于 2024-08-04 19:29:42 发布

吃乌梅的柚子

最新推荐文章于 2024-08-04 19:29:42 发布

阅读量569

点赞数 13

文章标签：前端 javascript 开发语言 react.js

本文链接：https://blog.csdn.net/wang050128/article/details/140720280

版权

Real diff 算法是怎么运作的？从tree层到component层到element层分别讲解 Real-DOM Diff算法，通常称为Virtual DOM Diff算法，是React使用的一种高效的算法，用于比较两个虚拟DOM树（Virtual
DOM
Tree）之间的差异，并最小化对实际DOM的更新，从而提高性能。这个算法分为三个层次：Tree层、Component层、Element层。
1. Tree层：在Tree层，Real-DOM Diff算法比较两个虚拟DOM树的根节点。它首先检查两个根节点是否具有相同的类型（例如，两者都是div元素），如果类型相同，则进一步比较其属性。如果类型和属性都相同，React会认为这两个根节点是相同的，不需要进行任何更新。如果类型不同或属性不同，React将认为需要替换整个根节点，从而触发实际DOM的更新。
2. Component层：在Component层，React比较两个虚拟DOM树中的组件（Component）。React会递归地遍历组件的子节点，并比较它们之间的差异。如果两个组件的类型相同，React会继续比较它们的属性和子组件。如果属性相同，但子组件不同，React会递归比较子组件。如果属性不同，React将认为需要更新该组件及其子组件。这样，React会在尽可能深的层次上查找差异，以最小化实际DOM的更新。
3. Element层：在Element层，React比较两个虚拟DOM树中的叶子元素（Element）。React会比较元素的类型、属性和文本内容。如果这些都相同，React将认为两个元素是相同的，不需要更新。如果有差异，React将更新实际DOM以反映这些差异。
  Real-DOM
  Diff算法通过这三个层次的比较，可以高效地找到需要更新的部分，并最小化实际DOM的变更。它还可以在Diff过程中生成一系列的DOM操作指令（例如增加节点、删除节点、更新节点属性等），然后将这些指令批量执行，从而进一步提高性能。
  总的来说，Real-DOM Diff算法是React的核心之一，它使React能够高效地管理和更新DOM，提供了快速响应用户交互的能力，同时尽可能减少了不必要的DOM操作，提高了性能。
React 生命周期中有哪些坑？为什么要移除will相关生命周期？在React生命周期中，有几个常见的坑需要注意：
```
1.不正确使用componentDidMount和componentDidUpdate：应该尽量避免在这里进行复杂的操作，可以考虑使用异步操作或放在其他生命周期中处理
2.避免频繁使用setState：如果频繁调用setState可能导致性能问题
3.不要直接修改this.state：应该避免直接修改组件状态的方式，而是使用setState函数来更新状态。


 溢出will相关的生命周期函数得主要原因是：
1.React团队认为这些函数的命名容易误导开发者，并且可能导致一些问题
2.在17版本中标记will相关的生命周期函数为过时
3.弃用will相关的生命周期函数是为了提升开发者的开发体验和避免潜在的问题
```

3. 调和阶段setState干了什么？

在React中，setState 是用来更新组件的状态（state）的方法之一。当调用 setState 时，React 将触发组件的重新渲染，以反映新的状态。React会将新的状态与旧的状态合并，而不是完全替换它。
在React的生命周期中，setState 调用的时机对于组件的更新非常重要。通常，setState 调用会在组件的更新阶段之后触发，而不会立即生效。React会将多个 setState 调用合并成一个更新，以提高性能。
React 的组件更新过程大致如下：

组件接收到新的 props 或调用了 setState。
React 会计划进行一次更新。
React 在下一个“调和阶段”（Reconciliation Phase）中比较虚拟DOM树的差异，以找出需要更新的部分。
React 更新真实DOM以反映新的虚拟DOM。
组件的生命周期方法被调用（例如，componentDidUpdate）。
在上述过程中，setState 的调用触发了更新，但实际的DOM更新在下一个调和阶段中完成。
这种异步更新的机制是为了提高性能，因为它可以合并多个状态更新，减少不必要的DOM操作。但需要注意，setState 调用并不会立即改变组件的状态，因此如果你想在状态更新后执行某些操作，应该在 componentDidUpdate 生命周期方法中进行。

4. 说说css3的新特性有哪些？

CSS3（Cascading Style Sheets 3）引入了许多新特性，以增强网页设计的灵活性和功能。以下是一些CSS3的新特性：

选择器的增强：CSS3引入了众多新的选择器，如通用兄弟选择器（~）、属性选择器（[attr]）、伪类选择器（:nth-child）、伪元素选择器（::before和::after）等。这些选择器提供更多的精确控制和灵活性。
盒子模型：CSS3引入了box-sizing属性，允许开发者控制盒子模型的计算方式，包括content-box和border-box。
圆角边框：使用border-radius属性，可以轻松创建圆角边框，而不再需要使用背景图片或其他技巧。
阴影效果：引入了box-shadow属性，可以为元素添加投影效果。
渐变：CSS3支持线性渐变（linear-gradient）和径向渐变（radial-gradient），使背景颜色和图片渐变变得更加容易。
多列布局：column-count和column-gap等属性允许创建多列布局，使文本流更具吸引力。
媒体查询：媒体查询允许根据不同的设备、屏幕尺寸和特性来应用不同的CSS样式，从而实现响应式设计。
动画和过渡：CSS3引入了@keyframes规则和transition属性，用于创建动画和过渡效果，而不需要JavaScript。
变换（Transforms）：CSS3的transform属性允许对元素进行旋转、缩放、倾斜和平移操作。
过渡（Transitions）：transition属性允许在状态改变时平滑地过渡，以实现流畅的效果。
2D和3D转换：CSS3支持二维和三维的元素变换，包括旋转、缩放、移动和透视。
字体处理：引入了@font-face规则，允许使用自定义字体。
多重背景图片：可以为元素添加多个背景图像，通过逗号分隔它们。
伪类选择器：CSS3引入了众多伪类选择器，如:nth-child、:not等，用于选择DOM元素的不同状态或位置。
Grid布局：CSS Grid布局是一个强大的网格系统，用于创建复杂的布局结构。
这些特性使CSS更加强大和灵活，使开发者能够更轻松地实现各种设计和布局效果，同时提高了响应性和性能。不同浏览器对这些特性的支持程度可能有所不同，因此在使用时需要考虑兼容性。

5. 说说redux的工作流程

Redux是一种用于管理JavaScript应用程序状态的库。它的工作流程可以总结为以下几个步骤：

Action创建：应用的各种操作和事件都会被抽象成一个个叫做"action"的普通JavaScript对象。这些对象描述了发生的事件，通常包括一个type属性来表示事件的类型，以及可选的其他数据。
Dispatch：当应用中的某个部分需要更新状态时，它会创建一个相关的action对象，然后将该对象传递给Redux的store。这是通过调用store.dispatch(action)来完成的。
Reducer处理：Redux的store将接收到的action对象传递给一个叫做"reducer"的纯函数。Reducer会根据action的类型来更新应用的状态。它接收先前的状态和action，然后返回一个新的状态。这一过程是纯函数，不会修改原始状态，而是返回一个新的状态副本。
Store更新：一旦Reducer返回了新的状态，Redux的store将更新应用的状态。
通知订阅者：Redux支持订阅者模式，因此一旦状态发生变化，所有已注册的监听器（或称为订阅者）都会被通知。这使得应用的各个部分可以监听状态的改变，以做出相应的响应。
View更新：React通常与Redux一起使用，以便将状态映射到UI组件上。当状态发生变化时，React会重新渲染相关的组件，从而更新用户界面。
Redux的工作流程强调了"单一数据源"（Single Source of Truth）的理念，即整个应用的状态被存储在一个单一的状态树中，这使得状态的管理变得可预测和可维护。通过分离状态的修改和UI的呈现，Redux提供了一种可维护和可测试的状态管理方法，特别适用于大型和复杂的应用程序。

6. React合成事件的原理，有什么好处和优势？

React合成事件是React框架提供的一种事件处理机制，用于处理DOM事件。合成事件是一种在原生浏览器事件系统之上构建的抽象，它有以下原理、好处和优势：
原理:

事件委托：React利用事件委托的原理，将所有事件监听器挂载到顶层容器（通常是document），而不是每个元素上。这样可以减少DOM元素上的事件监听器数量，提高性能。
事件池：React使用事件池来管理事件对象，这意味着事件对象在事件处理函数执行完毕后会被重用，而不是立即销毁。这减少了垃圾回收的压力，提高了性能。
好处和优势:
性能优化：React合成事件的事件委托和事件池机制有助于减少内存和性能开销。通过减少事件监听器数量和减少垃圾回收，提高了应用程序的性能。
跨浏览器兼容性：React合成事件屏蔽了不同浏览器之间的差异，使开发者不必担心浏览器兼容性问题。React会处理不同浏览器的事件差异，以确保一致的行为。
事件委托：React的事件委托机制允许你在组件树中处理事件，而不必在每个组件上都添加事件监听器。这样可以更容易管理事件处理逻辑，减少重复的代码。
性能监测和调试：React提供了开发者工具，可以用于监测和调试合成事件。你可以查看事件的详细信息，包括事件类型、事件目标和事件处理函数，以便更容易调试和分析应用程序的行为。
总的来说，React合成事件提供了一种高性能、一致性和易于调试的事件处理机制，使开发者可以更专注于应用程序的逻辑，而不必过多关注浏览器差异和性能优化。这有助于提高React应用程序的开发效率和用户体验。

7. 为什么 react 元素会有一个$$type属性？

React元素（React elements）通常是用React.createElement()或JSX语法创建的，它们是描述虚拟DOM树的轻量对象。React元素对象中的$$type属性是内部React实现的一个私有属性，用于标识元素的类型。这个属性的名称以$$开头，表明它是一个私有属性，不应该被应用程序代码直接访问或修改。
React使用 $t y p e 属性来表示元素的类型，通常是一个字符串，表示 H TM L 元素的标签名（如 d i v 、 p 等）或 R e a c t 组件的类型（如自定义组件）。这有助于 R e a c t 在虚拟 D OM 的比较过程中快速确定元素的类型，以便进行高效的更新和渲染。应用程序代码通常不需要访问或使用$ type属性，因为它是React内部的实现细节。开发者应该专注于使用React提供的公共API来创建、更新和渲染元素，而不必担心 $t y p e 属性。在 R e a c t 的官方文档中，$ type属性是私有的，并没有被正式记录在文档中，因此不建议开发者在自己的应用程序代码中使用它。如果你需要获取元素的类型，可以使用type属性或element.type来访问。

8. React有哪些优化性能的手段？

React提供了多种性能优化的手段，以确保应用程序在大型和复杂的场景下也能保持高性能。以下是一些React性能优化的常见手段：

使用合成事件：React的合成事件系统能够提高性能，因为它使用事件委托，将事件监听器挂载在顶层容器上，而不是每个DOM元素上。这减少了事件监听器的数量，从而减小了内存和性能开销。
使用组件级别的shouldComponentUpdate或React.memo：通过shouldComponentUpdate方法或React.memo函数，可以控制组件的更新过程。这允许你避免不必要的重新渲染，只有在状态或属性发生实际变化时才重新渲染组件。
使用React的虚拟DOM：React使用虚拟DOM来比较前后两个状态树，从而最小化对实际DOM的操作。这减少了DOM操作的次数，提高了性能。
使用列表和键（Keys）：在渲染列表时，使用唯一的键来标识每个列表项，以帮助React识别添加、删除或重新排序的操作。这有助于React更有效地管理列表的更新。
避免深层次的嵌套：过多的嵌套组件可能会导致性能问题。尽量保持组件层次扁平，只嵌套必要的组件。
使用React的Context API：Context API允许跨组件层次传递数据，而不必一层层地通过属性传递。这有助于避免不必要的属性传递，提高了代码的可维护性。
使用懒加载和代码拆分：将应用程序代码拆分成小块，按需加载，以减小初始加载时间。React懒加载的React.lazy()和Suspense功能可用于按需加载组件。
使用生命周期方法或副作用钩子：合理使用componentDidMount、componentDidUpdate和componentWillUnmount等生命周期方法，以及useEffect等副作用钩子，以执行异步操作、订阅和取消订阅等操作。
使用生产模式：在生产环境中，确保使用React的生产模式版本，以去除开发模式下的额外检查和警告，提高性能。
性能监测和分析工具：使用性能监测工具，如React DevTools、Chrome DevTools的性能面板等，来识别和解决性能问题。
这些是一些通用的React性能优化手段，但具体的优化方法可能取决于应用程序的结构和需求。在实际开发中，可以使用这些方法来提高React应用的性能并确保良好的用户体验。

9. 说说你对fiber架构的理解？解决了什么问题？

React Fiber（又称React 16 Fiber）是React框架的重大改进，引入了一种新的协调算法，旨在解决React渲染和调度的性能问题。Fiber架构主要解决了以下几个问题：

渲染中断和调度优先级：传统的React调度算法是递归的，当组件树很深或组件数量很多时，可能导致渲染操作阻塞主线程，引起页面卡顿。React Fiber引入了可中断的渲染，将渲染过程分解为多个小任务，每个任务都有一个优先级。这样可以更好地控制渲染的优先级，允许浏览器在渲染期间响应用户交互。
增量更新：传统的React在更新时会进行完整的虚拟DOM比较，然后更新整个组件树。React Fiber引入了增量更新的能力，使得React可以只更新发生变化的部分，从而减少不必要的工作，提高性能。
并行处理：React Fiber引入了并行处理的概念，允许React在多个任务之间切换，从而更充分地利用多核CPU。这可以加速渲染操作，特别是在处理大型应用程序或复杂组件树时。
可终止和可恢复的渲染：Fiber允许React在渲染任务中间被终止，而不会破坏整个渲染过程。这对于处理大型列表或复杂UI场景非常有用。一旦浏览器有时间，React可以继续之前被中断的渲染任务。
更好的动画支持：React Fiber提供了更好的动画支持，可以更精确地控制动画和布局过程。这有助于创建流畅的用户体验。
自定义渲染器：Fiber的架构允许开发者创建自定义渲染器，以适应不同的平台和环境，如React Native、VR应用等。
总的来说，React Fiber的目标是改进React的渲染性能，使其更适用于大型和复杂的应用程序，提供更好的用户体验，同时提高了React的可扩展性，以适应各种不同的应用场景。这一架构的引入使得React更灵活、高效和强大。

10. 说说你对redux中间件的理解？常用的中间件有哪些？实现原理？

Redux中间件是一种用于扩展Redux的功能的机制，它允许你在Redux的dispatch过程中添加自定义的逻辑。中间件在Redux应用中的常见用途包括异步操作、日志记录、路由导航、状态持久化等。通过中间件，你可以在action被派发到reducer之前或之后执行一些额外的操作，以满足不同的需求。
Redux中间件的主要原理是基于函数的洋葱模型（Onion Model），它允许你在Redux流程的不同阶段添加自定义逻辑，这些逻辑会按顺序执行。Redux中间件通常由一个函数构成，该函数返回一个函数，这个返回的函数接受store.dispatch和store.getState等参数，然后返回一个新的dispatch函数。这个新的dispatch函数可以拦截、修改、延迟或增强action派发的过程。
常用的Redux中间件有：

redux-thunk：允许你派发函数而不仅仅是普通的action对象，这使得处理异步操作变得容易。当你需要执行异步操作时，可以返回一个函数，该函数接收dispatch和getState作为参数，然后可以在异步操作完成后再次派发action。
redux-saga：基于ES6生成器的中间件，用于处理复杂的异步操作、副作用和并发流。它允许你以声明性的方式管理和监视action的流，处理各种复杂的异步任务。
redux-logger：用于在控制台中记录Redux操作和状态的中间件，用于开发和调试过程。
redux-persist：用于将Redux状态持久化到本地存储，以便应用程序在重新加载时保持状态。
redux-observable：基于RxJS的中间件，用于处理异步操作和副作用。它允许你使用RxJS的强大功能来管理和监视action流。
Redux中间件的实现原理是基于函数的装饰器模式，它通过包装store.dispatch方法，来拦截和处理action。中间件的核心是一个函数，该函数接受store.dispatch作为参数，并返回一个新的函数，这个新函数会在派发action时执行额外的逻辑。这使得中间件可以在不改变Redux核心逻辑的情况下，添加各种自定义功能。

11. 如何使用css实现一个三角形

在CSS中，实现一个三角形通常依赖于边框（border）技巧。由于CSS中的边框在相交时会形成一个斜角，我们可以利用这个特性来创建一个三角形


<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        .triangle {  
            width: 0;  
            height: 0;  
            border-left: 50px solid transparent; /* 左边框 */  
            border-right: 50px solid transparent; /* 右边框 */  
            border-bottom: 100px solid black; /* 下边框 */  
        }  
    </style>  
</head>  
<body>  
  
<div class="triangle"></div>  
  
</body>  
</html>

在这个例子中，.triangle 类定义了一个宽度和高度都为0的元素，然后通过设置边框来创建三角形。具体来说：

border-left 和 border-right 被设置为50px宽且透明（transparent），它们实际上并不会显示，但它们的存在确保了三角形的左右两侧宽度。
border-bottom 被设置为100px宽且颜色为黑色（black），这个边框就是三角形的底部。
由于左右边框是透明的，而底部边框是实色的，所以最终效果就是一个向下指向的黑色三角形。

如果你想要一个向上、向左或向右的三角形，你可以调整边框的设置

.triangle-up {  
    width: 0;  
    height: 0;  
    border-left: 50px solid transparent;  
    border-right: 50px solid transparent;  
    border-top: 100px solid black; /* 将底部边框改为顶部边框 */  
}

12.短轮询、长轮询和 WebSocket 间的区别？

短轮询、长轮询（Comet），和 WebSocket 是用于实现实时通信的不同技术和协议，它们在工作原理和应用场景上有一些重要区别。

短轮询（Short Polling）：
o 工作原理：客户端定期向服务器发送HTTP请求，询问是否有新数据可用。
o 应用场景：适用于需要实时数据更新，但对延迟和网络带宽要求不高的应用。通常会产生频繁的HTTP请求。
o 优点：简单，适用于大多数浏览器和服务器。不需要特殊的协议支持。
o 缺点：产生较多的网络流量，可能会导致高延迟。
长轮询（Long Polling）：
o 工作原理：客户端向服务器发送一个HTTP请求，服务器保持请求打开，直到有新数据可用时才响应，然后客户端会立即发送下一个请求。
o 应用场景：适用于需要较低延迟但不能支持WebSocket的应用。减少了HTTP请求次数，但仍然会有一些延迟。
o 优点：较短轮询来说，减少了不必要的HTTP请求。
o 缺点：服务器需要保持连接打开，浏览器需要等待响应，可能会导致资源占用和连接限制。
WebSocket：
o 工作原理：WebSocket是一种双向通信协议，允许服务器主动向客户端发送数据，而不需要客户端发起请求。通信始终是活跃的连接。
o 应用场景：适用于需要实时、低延迟通信的应用，如聊天应用、实时游戏等。
o 优点：实时、低延迟，减少了不必要的HTTP请求。双向通信使服务器可以主动推送数据。
o 缺点：需要浏览器和服务器支持WebSocket协议，可能需要额外的配置和安全考虑。
总结，短轮询、长轮询和WebSocket都是用于实现实时通信的技术，但它们在性能、延迟、复杂性和应用场景上有不同的权衡。选择哪种技术取决于你的应用需求和支持情况。WebSocket通常是最佳选择，因为它提供了双向通信和低延迟，但如果无法使用WebSocket，则长轮询或短轮询可能是备选方案。

13. 前端跨域的解决方式？

前端跨域是由于浏览器的同源策略（Same-Origin Policy）引起的，为了保护用户安全，浏览器会限制不同源（协议、域名、端口不同）之间的资源请求。如果你需要在前端处理跨域请求，有以下一些解决方案：

JSONP（JSON with Padding）：
JSONP是一种跨域请求的方法，它通过动态添加script标签来获取数据。服务器返回的数据包装在回调函数中，然后在页面中执行该回调函数，以获取数据。
优点：简单易用，可以在不支持CORS的老浏览器上使用。
缺点：不支持POST请求，存在安全风险，只能用于获取数据。
CORS（跨域资源共享）：
CORS是一种官方的跨域解决方案，需要服务器设置响应头中的Access-Control-Allow-Origin等相关字段，以允许特定域名的请求。
优点：安全且强大，支持各种HTTP方法，适用于现代浏览器。
缺点：需要服务器端支持，不适用于旧版本浏览器。
代理服务器：
前端可以使用自己的服务器作为代理，将跨域请求发送给自己的服务器，然后由服务器代为向目标服务器请求数据，最后将数据传递给前端。这种方式可以绕过浏览器的同源策略。
优点：适用于所有浏览器，可以处理复杂的跨域请求。
缺点：需要自己的服务器，并且可能会增加服务器负担。
跨文档消息传递（Window.postMessage）：
使用postMessage API可以在不同窗口或iframe之间进行跨域通信。前端可以将消息发送到另一个窗口，然后在接收窗口中处理消息。
优点：安全，适用于多窗口通信。
缺点：需要对方窗口的协助。
JSON Web Tokens（JWT）：
JWT是一种用于在不同域之间进行安全身份验证和授权的标准。它可以在不同域之间传递数据，并验证数据的真实性。
优点：安全，适用于身份验证和授权。
选择哪种跨域解决方案取决于你的应用需求和目标，以及你的控制权和能力。通常，CORS是最常见和最强大的解决方案，但其他方法也有其用途，根据具体情况选择最适合的方案。

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

@reduxjs/toolkit是一个Redux官方推荐的工具集，它的主要目的是简化和加速Redux开发流程，提供了一组工具和约定，以减少样板代码和提高开发效率。下面是我对@reduxjs/toolkit的理解以及它与react-redux之间的区别：
@reduxjs/toolkit的特点和理解：

Redux简化：@reduxjs/toolkit减少了编写Redux的样板代码的工作，包括定义action和reducer，以及配置store。它提供了一个更简洁的方式来创建和组织Redux相关的代码。
包含Redux工具：@reduxjs/toolkit内置了许多有用的Redux工具，如createSlice用于创建Redux模块、configureStore用于配置Redux store，以及createAsyncThunk用于处理异步操作。
不需要手动处理不变性：@reduxjs/toolkit内部使用了Immer库，允许你编写可变的Redux reducer代码，而不需要手动处理深层复制和不变性。这简化了Reducer的编写。
默认配置：@reduxjs/toolkit为你提供了一个合理的默认配置，减少了配置和样板代码的需要。你可以根据需要自定义配置。
强调最佳实践：@reduxjs/toolkit鼓励使用最佳实践，如组织代码、分割reducers、使用异步action等。
区别：
• @reduxjs/toolkit是Redux的辅助工具集，用于简化和加速Redux开发，但它仍然是Redux的一部分。它并不是独立于Redux的状态管理库。
• react-redux是React应用程序中与Redux集成的库，它提供了React组件和Redux store之间的连接机制，允许你将Redux store中的状态传递给React组件，以及将Redux action派发给Redux store。react-redux是与React紧密集成的，而@reduxjs/toolkit与Redux本身更相关。
• @reduxjs/toolkit通常用于简化Redux的配置和开发过程，而react-redux用于在React应用中连接React组件与Redux store。这两者通常一起使用，但它们有不同的目的和关注点。

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

React的render方法是React组件用于渲染UI的核心方法，它定义了组件的输出内容。render方法的原理如下：

定义UI结构：在组件类中定义render方法，该方法返回一个描述组件UI结构的React元素（通常是JSX）。这个UI结构描述了组件的外观和结构。
虚拟DOM创建：当React组件的状态或属性发生变化时，React会重新调用render方法。这会生成一个新的虚拟DOM树，描述了组件的最新状态和UI结构。
虚拟DOM比较：React将新的虚拟DOM树与之前的虚拟DOM树进行比较，以确定需要进行哪些实际的DOM更新操作。
DOM更新：React会根据虚拟DOM的差异，进行实际的DOM更新操作，以使DOM树与虚拟DOM树保持一致。
render方法会在以下情况下触发：
组件挂载：当组件首次挂载到DOM时，render方法会被调用以渲染初始UI。
组件更新：当组件的状态或属性发生变化时，render方法会被再次调用，以生成新的UI以反映这些变化。
强制更新：可以使用this.forceUpdate()方法来强制触发render方法，即使没有状态或属性的变化。
父组件更新：如果一个组件的父组件发生了更新，它的render方法也会被调用，以确保它的UI与父组件的变化保持一致。
需要注意的是，React的render方法是纯函数，它不应该有副作用，也不应该直接修改DOM。它的作用是描述组件的UI结构，而不是实际操作DOM。React负责将虚拟DOM的描述与实际DOM同步。

16. Redux中同步 action 与异步 action最大的区别？

Redux中的同步action和异步action的最大区别在于它们处理动作（actions）的方式和触发时间：

同步Action：
o 同步action是指立即执行的操作，不涉及任何异步操作。
o 同步action的动作创建函数（action creator）会立即返回一个包含动作类型和数据的action对象，通常使用dispatch函数触发。
o 同步action用于处理立即执行的操作，例如用户点击按钮、输入框变化等。
o 由于同步action是立即执行的，所以它们通常用于处理简单的状态变更，不需要等待异步操作的结果。
示例：

const increment = () => ({
 type: 'INCREMENT',
});
dispatch(increment()); // 触发同步action

异步Action：
o 异步action是指涉及异步操作的动作，需要等待异步操作的结果，例如网络请求或定时任务。
o 异步action的动作创建函数通常会返回一个函数，而不是一个包含动作对象的函数。这个返回的函数通常接受dispatch和getState作为参数，允许在异步操作完成后触发一个或多个同步action。
o 异步action用于处理需要等待异步操作结果的情况，例如从服务器获取数据后更新应用状态。
示例：

const fetchData = () => (dispatch, getState) => {
 dispatch({ type: 'FETCH_DATA_REQUEST' });
 // 异步操作，例如发起网络请求
 api.fetchData().then(
  (data) => {
     dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
  },
  (error) => {
     dispatch({ type: 'FETCH_DATA_FAILURE', error });
  }
);
};
dispatch(fetchData()); // 触发异步action

总之，同步action用于立即触发状态变更，而异步action用于处理需要等待异步操作结果的情况。在Redux中，通常使用异步action来处理网络请求、定时任务等涉及异步操作的情况，以确保应用程序状态的一致性。同步action通常用于处理用户的交互操作和状态变更，它们不需要等待异步结果。

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

在React中，如果你尝试在props.children上使用map函数进行遍历，通常不会收到异常。但是，可能会出现一些问题，这取决于props.children的内容以及你如何处理它们。
如果你的props.children包含单个React元素或组件，map函数将无法直接使用，因为它期望一个数组来进行映射操作。如果你只有一个子元素，你可以将其包装在一个数组中，然后使用map函数遍历，如下所示：

import React from 'react';

function MyComponent(props) {
 const childrenArray = React.Children.toArray(props.children);

 return (
   <div>
    {childrenArray.map((child, index) => (
       <div key={index}>
        {child}
       </div>
    ))}
   </div>
);
}

在上面的示例中，React.Children.toArray(props.children) 将props.children转换为一个数组，然后你可以使用map函数来遍历子元素。
另一种常见情况是props.children包含多个子元素，每个子元素都有自己的类型。在这种情况下，你可以使用React.Children.map来处理props.children，它会为你处理各种类型的子元素，如下所示：

import React from 'react';

function MyComponent(props) {
 return (
   <div>
    {React.Children.map(props.children, (child, index) => {
       return (
         <div key={index}>
          {child}
         </div>
      );
    })}
   </div>
);
}

使用React.Children.map可以避免一些潜在的异常，因为它会处理各种类型的子元素，包括字符串、数字和React元素。如果props.children包含非React元素，直接使用map函数可能会导致异常。
需要注意的是，遍历props.children时要为每个子元素指定一个唯一的key属性，以帮助React进行有效的更新和重渲染。

18. React 组件之间如何通信？

在React中，组件之间可以通过多种方式进行通信，这取决于组件之间的关系和需求。以下是一些常见的方法：

Props传递：这是React中最基本的组件通信方式。你可以通过将数据作为props传递给子组件来实现通信。父组件可以向子组件传递数据，然后子组件可以访问这些数据并进行渲染。

// 父组件
function ParentComponent() {
 const data = "这是父组件传递的数据";
 return <ChildComponent data={data} />;
}

// 子组件
function ChildComponent(props) {
 return <div>{props.data}</div>;
}

回调函数：父组件可以将函数作为props传递给子组件，以便子组件可以调用这些函数来通知父组件发生了某些事件。

// 父组件
function ParentComponent() {
 const handleChildClick = () => {
   // 处理子组件点击事件
};

 return <ChildComponent onClick={handleChildClick} />;
}

// 子组件
function ChildComponent(props) {
 return <button onClick={props.onClick}>点击我</button>;
}

上下文（Context）：React的上下文机制允许你在组件层次结构中的祖先组件和后代组件之间共享数据，而不必手动传递props。这对于全局状态管理非常有用。
状态管理库：对于大型应用程序，你可以使用状态管理库（如Redux、Mobx、或React的useContext和useReducer）来管理应用的状态，以便多个组件可以访问和修改共享的状态。
事件总线：你可以创建一个事件总线对象，允许组件订阅和触发事件，以便它们可以相互通信。这在某些特定情况下很有用，但要小心不要滥用它，以避免代码变得难以维护。
这些方法可以根据你的应用程序需求来选择和组合使用。通常，使用props传递数据是最常见的方式，但在某些情况下，使用上下文或状态管理库可能更合适。

19. 说说你对受控组件和非受控组件的理解？应用场景？

在React中，受控组件（Controlled Components）和非受控组件（Uncontrolled Components）是两种处理表单元素和用户输入的不同方式。
受控组件（Controlled Components）：

定义：受控组件是一种通过React的状态（state）来控制用户输入的组件。这意味着组件的值和状态受React的控制，通常通过value属性来绑定表单元素的值，以及通过事件处理程序来处理用户输入。
应用场景：受控组件适用于需要在React状态中进行数据处理、验证和响应的情况。它们允许你以一种可预测的方式管理表单数据，对输入数据进行验证和转换，并实现复杂的表单交互逻辑。受控组件通常用于需要对用户输入进行处理的情况，例如表单提交前的数据验证、实时输入搜索和实时反馈。
非受控组件（Uncontrolled Components）：
定义：非受控组件是一种不使用React状态（state）来控制用户输入的组件。它们允许表单元素的值直接由DOM自身管理，而不受React的干预。通常，你通过ref来访问表单元素的值。
应用场景：非受控组件适用于不需要对用户输入进行React状态管理的情况，或者需要与第三方库或既有代码集成的情况。它们可能更容易实现，但在处理复杂的表单逻辑时可能更难维护，因为你需要手动处理数据验证和转换，以及编写自定义逻辑来处理用户输入。
选择受控组件还是非受控组件取决于具体情况。一般来说，对于大多数React应用，受控组件是首选，因为它们提供了更好的数据流控制和React状态管理。然而，非受控组件可能在某些情况下更方便，尤其是当与第三方库或既有代码交互时。
总的来说，受控组件和非受控组件是React中处理表单元素和用户输入的两种不同策略，你可以根据具体需求选择合适的方法。

20. 说说javascript内存泄漏的几种情况？

JavaScript内存泄漏是指应用程序中的内存不再被使用，但没有被正确释放，导致内存占用不断增加，最终可能导致应用程序性能下降或崩溃。以下是一些常见的导致JavaScript内存泄漏的情况：

未被释放的引用：当一个对象仍然存在对其他对象的引用，即使你不再需要这个对象，它也不会被垃圾回收。这种情况通常发生在事件处理程序、闭包或全局变量中。

function leakMemory() {
  const element = document.getElementById('myElement');
 element.addEventListener('click', () => {
   // element仍然存在于内存，尽管它已不再需要
  });
}

定时器未清理：如果你创建了定时器（setTimeout、setInterval）但没有清理它们，它们会一直运行，即使不再需要。这会导致函数和相关数据一直存在于内存中。

function createMemoryLeak() {
  setInterval(() => {
	    // 未清理的定时器
	  }, 1000);
}

DOM引用未清理：在JavaScript中，如果你保留对DOM元素的引用，而这些元素被删除或替换，那么对这些引用的引用仍然存在于内存中，导致内存泄漏。

	function createDomMemoryLeak() {
  const element = document.createElement('div');
  document.body.appendChild(element);
  // element被删除，但仍然有对它的引用
}

4.循环引用：循环引用是指两个或多个对象相互引用，而没有其他引用指向它们，垃圾回收器无法检测到它们不再被使用。这通常发生在对象之间的互相引用，比如父子关系或闭包。

function createCircularReference() {
	  const obj1 = {};
  const obj2 = {};
	  obj1.child = obj2;
	  obj2.parent = obj1;
}

内存泄漏工具不足：有时，内存泄漏可能是由于工具或框架本身的问题，例如浏览器或第三方库的内存泄漏。
解决JavaScript内存泄漏的方法包括及时释放不再需要的引用、手动清理定时器和事件处理程序、避免循环引用、使用内存泄漏检测工具和定期检查和分析内存占用。

吃乌梅的柚子

关注

13
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
日常·总结--前端

Redux中间件通常由一个函数构成，该函数返回一个函数，这个返回的函数接受store.dispatch和store.getState等参数，然后返回一个新的dispatch函数。Redux中间件是一种用于扩展Redux的功能的机制，它允许你在Redux的dispatch过程中添加自定义的逻辑。React会将新的状态与旧的状态合并，而不是完全替换它。React Fiber（又称React 16 Fiber）是React框架的重大改进，引入了一种新的协调算法，旨在解决React渲染和调度的性能问题。
复制链接

扫一扫