普通网友-CSDN博客

原创如何使⽤Redux与React进⾏状态管理？

reducers是⼀些纯函数，它接收先前的state和action，并且返回新的state[^4^]。每个reducer接收当前state和⼀个action，然后返回⼀个新的state。如果需要，可以使⽤redux-persist将Redux store的状态保存到本地存储中，并在需。总的来说，通过以上步骤和注意事项，可以在React应⽤中有效地使⽤Redux进⾏状态管理。可以结合Redux Toolkit等⼯具来简化Redux的开发和使⽤过程[^1^][^2^]。store中[^4^]。

2024-09-23 12:12:51 399

原创 React Router是什么？你如何使⽤它来实现单⻚⾯应⽤的路由？

它允许开发者在不刷新整个⻚⾯的情况下进⾏交互式的⽤⼾体验，是React⽣态系统中⾮常受欢迎的第三⽅库之⼀。React Router不仅提供简单的URL路由管理功能，还帮助开发者构建复杂的SPA，包括定义⻚⾯之间的导航关系、处理⻚⾯参数传递、实现路由守卫和权限控制、进⾏代码分割和懒加载优化，甚至⽀持服。React Router功能强⼤且灵活，通过合理配置和使⽤，可以⽅便地实现单⻚⾯应⽤的路由管理。在你的React组件中，你需要引⼊React Router的组件，如。注意：在上⾯的例⼦中，我还引⼊了。

2024-09-23 12:08:56 460

原创如何使⽤React的Context API来实现跨组件的状态共享？

通过以上步骤，你可以在React应⽤中使⽤Context API来实现跨组件的状态共享。请注意，使⽤Context API时要⼩⼼避免过度使⽤和滥⽤，因为它可能导致组件之间的耦合度增加，影响代码的可维护性。在⼦组件中使⽤更新函数：在需要更新状态的⼦组件中，你可以通过Context获取到更新函数，并调⽤它来更新状态。更新Context值：如果需要更新共享状态，可以在提供Context值的组件中添加⼀个函数来处理状。消费Context值：在需要访问共享状态的组件中，你可以使⽤。组件来提供Context值。

2024-09-23 12:04:49 392

原创解释React中的“受控组件”与“⾮受控组件”的概念及使⽤场景

综上所述，受控组件和⾮受控组件各有其优缺点和使⽤场景。在选择使⽤哪种组件时，需要根据具体的应⽤需求和业务场景来决定。概念：受控组件是由React组件完全控制的表单元素。使⽤场景：当需要操作其他组件的值或当受控组件的控制⼒过强导致某些简单场景难以实现时，可。使⽤场景：⼤部分使⽤场景都推荐使⽤受控组件来实现表单，因为它提供了更⼤的灵活性和控制。表单提交时，组件的状态会被⽤于进⼀步处理（如提交到服务器）。元素的值，同时更新状态的函数也负责更新表单元素的值。态，⽽是通过引⽤（ref）来访问表单元素的值和状态。

2024-09-23 11:59:10 271

原创 React 命令式组件：Modal

我通过 createRoot 的能力，为 Modal 组件添加了命令式控制的能力，让其可以摆脱 jsx 和 state 的限制，在使用方式上更加灵活，提高了简单场景下的开发效率。同理，Toast、Message、Notification 等组件也可以通过这种方式实现。程序员玫玫：堪称2024最强的前端面试场景题，已帮助512人成功拿到offer。

2024-09-23 11:47:24 466

原创 Vue3源码学习2——响应式（computed、watch）

的修改但是就目前的代码实现，如果我们在effect中做两次DOM操作，则会陷入死循环。

2024-09-23 11:43:49 1036

原创 TypeScript技术系列8：深入理解枚举类型

在TypeScript中，枚举（Enum）是一种用于定义命名常量集的类型。与其他语言一样，枚举类型在构建可靠、可读性高的代码时起着重要作用，尤其是在需要处理一组相关常量的场景中。与普通的JavaScript不同，TypeScript提供了对枚举的直接支持，这使得开发者可以轻松地组织和管理这些常量。文末有已成功帮助500多人拿到前端offer的文章！！枚举不仅能增强代码的可读性，还能提供类型检查、提高代码的安全性。它们在处理特定值集合时非常有用，例如一周的天数、方向、状态等场景。

2024-09-23 11:35:46 731

原创 Typescript 中的 type 和 interface 有什么区别？？？

/ 使用 interface// 使用 type在这个例子中，interface和type都可以定义一个对象类型，并且在使用上几乎没有区别。interface的适用场景：定义对象类型，尤其是面向对象的设计模式。类的约束，接口扩展和实现（implements）。需要声明合并的场景（如第三方库中的类型定义）。type的适用场景：联合类型、交叉类型等复杂类型定义。基本类型和元组类型别名。需要表达多个类型组合时更灵活。特性interfacetype定义对象类型。

2024-09-23 11:34:14 751

原创一文搞懂JS类型判断的四种方法

在JavaScript中，类型判断是一个非常基础但也十分重要的知识点。不同的类型判断方法适用于不同的场景，掌握这些方法可以帮助我们更好地理解和使用JavaScript。本文将详细介绍typeofinstanceof以及这四种常用的类型判断方法，并通过实例代码帮助大家加深理解。文末有已成功帮助500多人拿到前端offer的文章！！typeof适合用于检查基本数据类型，但对于null和对象类型的判断不够准确。instanceof用于检查对象的构造函数，适用于引用类型的判断。

2024-09-23 11:32:10 1028

原创描述React中的key属性的作⽤，为什么它对于列表渲染很重要？

保持组件状态：当元素具有key属性时，React会尽量复⽤其组件实例，这样即使在列表重新排序时，也可以保持组件的内部状态，如输⼊框中的⽂本内容等[^1^][^2^][^3^][^4^]。唯⼀标识：在动态数组渲染时，key为每个元素提供了唯⼀标识，帮助React区分各个元素，以便正确地添加、更新或删除元素[^1^][^2^][^3^][^4^]。使⽤稳定且唯⼀的值：通常建议使⽤数据中的id或其他唯⼀标识符作为key，这样可以确保key的唯⼀性和稳定性[^2^][^3^][^4^]。

2024-09-21 12:31:13 338

原创如何使⽤React的列表渲染来渲染数组中的元素？

函数会返回⼀个新的数组，其中包含对原始数组每个元素调⽤提供的函数后的结果。在React中，当列表项的顺序可能会改变时，为列表项提供⼀个唯⼀的。属性是⾮常重要的，这有助于React识别哪些项改变了、被添加或被删除了。函数来遍历数组，并为数组中的每个元素渲染⼀个React组件或元素。数组作为属性，并渲染⼀个包含该数组中所有数字的列表。在React中，你可以使⽤JavaScript的。属性，该属性是⼀个数字数组。函数遍历这个数组，并为每个数字返回⼀个。组件渲染了⼀个包含标题和。组件接收numbers。

2024-09-21 12:29:22 396

原创如何在React中实现条件渲染？

在React中，你可以使⽤JavaScript的条件（三元）运算符或逻辑与运算符来根据组件的状态或属性来实现条件渲染。然⽽，在渲染逻辑较复杂时，你可以在组件的⽅法或⽣命周期⽅法中使⽤。对于更复杂的条件渲染逻辑，你可能需要使⽤⾼阶组件（HOC）或渲染属性（render props）模式。当你想根据某个条件渲染⼀个组件时，并且该条件不满⾜时你不想渲染任何东西，你可以使⽤逻辑与运算符（在React中，条件渲染通常使⽤条件（三元）运算符或逻辑与运算符来实现。对于更复杂的逻辑，你可以考虑使⽤⾼阶组件或渲染属性模式。

2024-09-21 12:26:36 424

原创如何使⽤React的useEffect Hook来模拟componentDidMount和componentDidUpdate？

传递依赖项数组，因此它会在每次渲染后执⾏，包括组件挂载和每次更新。如果你想在组件更新时执⾏某些操作，但不在挂载时执⾏，你需要将某些状态或props值作为依赖项传递给依赖项数组。然⽽，在⼤多数情况下，你不需要这样做，因为。会在组件挂载和每次更新后执⾏。Hook 是⼀个强⼤的⼯具，它允许你在函数组件中执⾏副作⽤操作，包括。⾏），你可以使⽤⼀个空数组作为依赖项。（即在组件更新后执⾏，但不在挂载时执。，因为默认情况下它就是这样⼯作的。只在组件挂载时执⾏，你可以将。默认就会在挂载和更新后执⾏。

2024-09-21 12:21:06 383

原创北京360前端开发一面

这个不用我多说，每次面试基本都要先介绍自己的。LESS 和 SASS 都是非常有用的 CSS 预处理器，它们提供了许多强大的功能，如变量、嵌套、混合、函数等，使得 CSS 的编写更加高效和可维护。选择哪个预处理器主要取决于个人或团队的偏好以及项目的具体需求。如果你熟悉 JavaScript，可能更倾向于使用 LESS；如果你喜欢简洁的语法，可能会更喜欢 SASS（尤其是 SCSS）。无论选择哪一个，都可以显著提高前端开发的效率和代码质量。

2024-09-21 12:15:33 1415

原创使用 TypeScript 构建一个 Todo List 项目

我们首先需要定义一个Todo接口，用来表示任务的结构。TypeScript 的静态类型系统在这里能帮助我们确保所有任务对象的一致性。id: number;通过这个简单的项目，我们学习了如何在 TypeScript 中定义类型、使用类和接口、以及进行 DOM 操作。TypeScript 的静态类型检查使得代码更加可预测，减少了潜在的错误。下一步学习建议框架结合：你可以尝试将 TypeScript 与前端框架（如 React、Vue）结合，进一步提升项目的复杂度。深入概念。

2024-09-21 12:08:02 1077

原创页面中 “瀑布流布局” 的实现

瀑布流布局是一种常见的网页布局方式，通常用于展示大量图片或卡片。与传统的网格布局不同，瀑布流布局允许元素在垂直方向上自由排列，从而充分利用屏幕空间，提高用户浏览体验。像我们常用的小红书，浏览视频和文章的首页就是采用了类似瀑布流布局的设置。通过上述步骤，我们可以轻松地在网页中实现一个基本的瀑布流布局。这种布局方式不仅提高了页面的视觉吸引力，还能有效地提升用户的浏览体验。当然，实际应用中可能还需要考虑更多因素，比如响应式设计、图片懒加载等，以适应不同设备和提高性能。

2024-09-21 12:03:43 735

原创使用高阶组件封装路由拦截逻辑

用户在编辑表单时，经常编辑一半中途切换页面，我们需要进行路由拦截，对用户进行询问，是否需要保存当前信息。文末有已成功帮助500多人拿到前端offer的文章！！React中实现路由拦截使用useBlocker就可以了。本文将使用高阶组件对路由拦截进行封装来扩展功能。最基本的路由拦截，默认拦截弹窗自定义控制是否需要拦截自定义弹窗取消和确定事件自定义弹窗样式后面有代码仓库地址我们只要控制useBlocker里面函数的返回值就可以控制是否拦截，true拦截，false不拦截。使用。

2024-09-21 11:59:46 447

原创使用 Vibration API 进行网页振动效果

Vibration API 允许网页通过调用设备的振动功能来提供触觉反馈。这个 API 主要用于移动设备，因为大多数桌面设备不支持振动功能。

2024-09-21 11:56:17 415

原创什么是React Hooks？你使用过哪些Hooks，并解释它们的作用？

React Hooks是React 16.8版本中引⼊的新特性，它允许你在不编写class的情况下使⽤state以及其他的React特性。Hooks提供了⼀种新的函数式编程的⽅式来使⽤React组件的状态和⽣命周期性。以上都是React Hooks中常⽤的⼀些，它们使得函数组件具备了与类组件相同甚⾄更强⼤的功能，同时保持了函数组件的简洁和可读性。作⽤：在函数组件中访问和使⽤React的Context。这在处理更复杂的状态逻辑时特别有⽤。作⽤：在函数组件中执⾏副作⽤操作（如数据获取、订阅或⼿动更改DOM）。

2024-09-20 11:38:00 369

原创描述React的组件⽣命周期⽅法，并解释它们在何时被调⽤。

React的组件⽣命周期⽅法分为三个阶段：挂载阶段（Mounting）、更新阶段（Updating）和卸载阶段（Unmounting）。⽤途：返回true时组件更新，返回false则不更新，是React性能优化中重要的⼀环。调⽤时机：在创建或更新阶段调⽤，或在props、state和render⽅法前调⽤。调⽤时机：在最近⼀次渲染输出（提交到DOM节点）之前调⽤，⾸次渲染不会执⾏。⽤途：⽤于在DOM更新后进⾏⽹络请求等需要依赖DOM的操作。调⽤时机：在组件更新之前调⽤，可以控制组件是否进⾏更新。

2024-09-20 11:32:07 911

原创如何使用React的state来管理组件的内部状态？

是⼀个特殊的对象，它⽤于存储组件的私有数据（即内部状态），这些数据可能会在组件的⽣命周期内发⽣变化。React提供了⼏种⽅式来创建和管理组件的。在函数组件中，你可以使⽤React Hooks（如。来访问和更新组件的状态。注意，我们使⽤了⼀个箭头函数来定义。的状态和⼀个⽤于更新该状态的函数。件内部定义的，所以它可以直接访问。在函数内部正确地指向组件实例。使⽤的是类组件还是函数组件。是⼀个类组件，它有⼀个名为。在类组件中，你可以通过。是⼀个函数组件，它使⽤。⽅法会被调⽤，并使⽤。⽅法会被调⽤，并使⽤。

2024-09-20 11:28:10 447

原创如何在React组件中实现⽗⼦组件之间的通信？

当然，对于更复杂的组件结构，你可能还需要使⽤到如Redux、MobX等状态管理库，或者使⽤React的Context API来实现跨组件通信。在React中，⽗⼦组件之间的通信通常通过props（属性）和回调函数来实现。⼦组件通常通过传递回调函数作为props给⼦组件，然后在⼦组件中调⽤这个回调函数来发送数据。在⽗组件中，你可以通过向⼦组件传递props来发送数据。或函数参数（在函数组件中，通过解构赋值）来访问这些数据。⽗组件向⼦组件传递数据（通过props）子组件向父组件发送数据（通过回调函数）

2024-09-20 11:25:02 309

原创什么是React的虚拟DOM？它如何⼯作以提⾼性能？

React的虚拟DOM（Virtual DOM）是React框架中的⼀个核⼼概念，它是⼀个轻量级的JavaScript对象树，⽤于描述真实DOM的结构和属性。综上所述，React的虚拟DOM通过在内存中构建和操作JavaScript对象树，避免了直接操作真实DOM带来的性能问题，并通过diff算法和最⼩DOM操作集等技术⼿段，提⾼了⻚⾯渲染的性能和效率。使⽤diff算法：React的diff算法是⼀种⾼效的算法，它可以在短时间内计算出虚拟DOM树之间的差异，进⼀步提⾼了渲染性能。发⽣变化时重新渲染；

2024-09-20 11:20:02 394

原创 JavaScript 中 var、let、const 的变量提升与作用域机制

通过本文，我们回顾了JavaScript变量提升var声明的变量会在作用域顶部声明，而let和const声明的变量也会被提升，但受限于TDZ，确保在赋值前无法访问。作用域JavaScript中的作用域包括全局作用域、函数作用域、块级作用域和词法作用域，帮助控制变量的生命周期和可访问范围。理解这些规则有助于我们编写更高质量的代码，避免不必要的错误，使代码更加模块化、易维护。inne。

2024-09-20 10:58:41 940

原创重温react：从搭建企业级项目开始

以上的配置是主要框架的配置，一些细节方面的可能需要你根据自己的需求进行配置处理，比如：axios、swiper等一些需要东西。

2024-09-20 10:58:04 436

原创面试官：前端用任意方式绘制一个三角形，添加一个点击事件，仅点击三角形内部才能触发

面试官：用任意方式绘制一个三角形，添加一个点击事件，仅点击三角形内部才能触发听到前半段心想: 古老八股文听到后半段: 似乎跟我想的不太对？说到绘制一个三角形，可能不少人大脑里能直接蹦出来个答案，用css的border绘制，简单又方便，但众所周知，点击一个元素的小样，不准用css。

2024-09-20 10:57:24 364

原创组件懒加载导致的生命周期钩子触发顺序变化

异步子组件的 activated 并没有触发，这是因为子组件加载时父组件已经加载完成，此时并不知道是否是页面初次加载（因为子组件也可能是 v-if 等加载的）。如果页面已经加载过了，因为内存已经缓存子组件，所以此时异步子组件就变成了同步子组件，再次路由跳转到 parent2 的时候生命周期就和 parent1 逻辑一样了。正常页面生命周期钩子触发的顺序是: 父组件beforeCreated -> 父组件created -> 子组件beforeCreated -> 子组件created ->

2024-09-20 10:56:40 143

原创如何使⽤props在React组件之间传递数据？

将数据传递给⼦组件，⽽⼦组件则可以在其内部使⽤这些数据。这是⼀种⾮常常⻅且强⼤的数据传递机制，使得React组件之间能够灵活地通信和共享数据。（在类组件中）或直接作为函数参数（在函数组件中）来访问传递进来的数据。使⽤⼦组件：确保在⽗组件中正确渲染⼦组件，并传递所需的数据作为属性。定义⽗组件：在⽗组件中，你可以在渲染⼦组件时，通过属性（即。是⽗组件向⼦组件传递数据的⼀种机制。在函数组件中，你可以使⽤解构赋值来直接从。（属性）是组件之间传递数据的主要⽅式。定义⼦组件：在⼦组件中，你可以通过。

2024-09-19 11:17:16 611

原创描述React中的函数组件和类组件之间的区别

函数组件：没有⾃⼰的内部状态（state），但在React 16.8版本之后引⼊的Hooks（如useState。类组件：除了使⽤⾃定义Hooks外，还可以使⽤⾼阶组件（HOC）和render props等⽅式实现逻辑复⽤。函数组件：采⽤函数式编程思想，使⽤纯JavaScript函数定义。总结来说，函数组件和类组件各有其优缺点，选择使⽤哪种组件类型取决于具体的需求和场景。类组件：适⽤于具有复杂状态逻辑和⽣命周期⽅法的组件。函数组件使⽤Hooks（如。函数组件：适⽤于简单、⽆状态的、纯展⽰型的组件。

2024-09-19 11:13:02 707

原创一文搞懂设计模式中的单例模式

设计模式是一种用来解决常见问题的模板。单例模式就是其中的一种，它确保一个类只有一个实例，并提供一个全局访问点来获取这个实例。本文将会通过两个示例，来帮助你理解单例模式的概念及其在JavaScript中的实现。举个例子，假设你在开发一款游戏，游戏中有一个分数管理器，用来记录玩家的分数。这个分数管理器应该是唯一的，因为每个玩家只能有一个分数，而这个分数需要在多个地方被访问和修改。此时，如果我们每次需要分数管理器的时候都去创建一个新的对象，那么就会产生多个分数管理器实例，这显然是不符合逻辑的。

2024-09-19 10:52:28 744

原创用js实现promise

Promise代表了一个尚未完成但预期将来会完成的异步操作的结果。Pending（等待中）：初始状态，既不是成功，也不是失败状态。Fulfilled（已成功）：意味着操作成功完成。Rejected（已失败）：意味着操作失败。并且状态一旦改变就不能再更改了。

2024-09-19 10:51:44 321

原创 Vue 中 v-for 进阶指南：in 与 of 的区别与使用场景

in在JavaScript中，for...of是遍历可迭代对象的标准语法。类似地，在Vue.js中，v-for结合of可以遍历一切可迭代对象，如数组、字符串、SetMap等。尽管of并没有广泛应用于Vue.js文档中的例子，但它在处理特定数据结构时非常有效。ofv-for是Vue.js中非常强大和常用的指令，而理解in和of的差异能够帮助你更灵活地处理不同的数据结构。无论是遍历数组、对象，还是其他复杂数据结构，正确选择in或of都能让代码更加高效、易读。在你下次需要使用v-for。

2024-09-19 10:50:52 715

原创前端 iconfont 两种使用方式

更改图标大小和颜色通过 CSS 可以轻松更改图标的大小和颜色。.icon {/* 图标大小 *//* 图标颜色 */2.悬停效果你可以添加悬停效果来增强用户体验。/* 悬停时的颜色 */更改图标大小和颜色通过 CSS 可以轻松更改图标的大小和颜色。.icon {/* 图标宽度 *//* 图标高度 *//* 图标颜色 */2.悬停效果你可以添加悬停效果来增强用户体验。/* 悬停时的颜色 */

2024-09-19 10:50:11 387

原创聊聊事件模型

如上，当希望为同一个元素绑定多个同类型事件的时候(上面的这个 btn 元素绑定2个点击事件)，是不被允许的，后绑定的事件会覆盖之前的事件。事件冒泡是一种从下往上的传播方式，由最具体的元素(触发节点)然后逐渐向上传播到最不具体的那个节点，也就是 DOM 中最高层的父节点。元素上发生，然后逐级向上传播事件捕获与事件冒泡相反，事件最开始由不太具体的节点最早接受事件,而最具体的节点(触发节点)最后接受事件。，返回一个代表当前执行阶段的整数值。都是在冒泡阶段响应了事件，由于冒泡的特性，裹在里层的p 率先做出响应。

2024-09-19 10:48:58 774

空空如也

空空如也