- 博客(34)
- 收藏
- 关注
RSS订阅原创 ahooks之useRequest
简述一下，可以不看下面的内容：就是为了方便写请求的，和在useEffect中请求异曲同工。useRequest封装了数据请求的逻辑，包括发送请求、处理 loading 状态、错误处理等，使得在组件中发起数据请求变得更加简单和直观。useRequest提供了丰富的配置选项，可以满足不同场景下的需求。比如可以配置请求方法、请求参数、成功回调、失败回调等，从而灵活地控制数据请求的行为。useRequest。
2024-03-05 10:43:57
1346
原创 react组件间通讯方式（组件传值）
组件间传值有多种方式，包括使用 props、Context API、回调函数、自定义 Hook、事件总线等。
2024-02-28 16:32:53
1899
原创 react受控组件和非受控组件（此外也称约束组件）
React 中的受控组件和非受控组件是指表单元素（如 input、textarea、select 等）的两种不同管理方式。它们之间的主要区别在于状态的管理方式。
2024-02-28 15:24:39
641
原创 ECMAScript 6之Map
Map是 JavaScript 中的一种数据结构，它可以用于存储键值对，并且键可以是任意类型的值。与普通对象相比，Map提供了更多的灵活性和扩展性。以下是MapMapMapMapMapMapset()get()has()delete()MapsizeMapMapMapMapfor...offorEach()MapMapWeakMapMap类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
2024-01-12 17:00:03
921
原创 ECMAScript 6 之 set
ES6 中的 Set 是一种数据结构，它允许你存储唯一的值，不允许重复。Set 可以用于存储各种类型的值，包括原始类型和对象引用。
2024-01-11 17:35:34
909
原创 webpack之输出(output)
可以通过配置output选项，告知 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个entry起点，但只能指定一个output配置。
2024-01-11 11:52:47
891
原创 webpack之entry
本文根据官方文档讲解，大部分内容可以去官网看。指示 webpack 应该使用哪个模块，来作为构建其内部依赖图（之后的章节会讲依赖图，记得关注我哦的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。具体来说，entry选项告诉 Webpack 应该从哪个 JavaScript 文件开始构建应用程序。Webpack 会读取指定的入口文件，并递归地查找和解析该文件所依赖的其他模块或文件，直到构建出整个应用程序的依赖图。（就是理解为打包的入口，从哪里开始打包）
2024-01-11 11:22:56
1603
原创 webpack之介绍
综上所述，Webpack是一个强大的静态模块打包工具，它能够处理模块之间的依赖关系，并生成最终的静态资源文件。它支持各种类型的文件，如JavaScript、CSS、图片等，并且具有强大的插件系统，可以扩展其功能。模块化：Webpack支持使用模块化的方式来组织代码，可以将复杂的应用程序拆分成小模块，并管理它们之间的依赖关系。例如，可以使用插件来优化代码、处理样式、提取公共模块等。资源优化：Webpack可以优化静态资源，如压缩JavaScript、CSS、图片等，以减少文件大小，提高加载速度。
2023-12-22 17:29:21
636
原创 react Api之forwardRef
forwardRef API 是一个用于转发（forwarding）ref 的功能。它允许你在组件之间传递 ref，以便能够直接访问子组件的 DOM 元素或组件实例。剩余部分请参考我之前的文章useref这篇。
2023-12-22 17:20:51
381
原创 react Api之createContext
在上述示例中，MyContext 成为了一个可供父组件和子组件使用的上下文对象。父组件 ParentComponent 使用 Provider 组件将值 'Hello from Context' 提供给后代组件。通过使用 createContext 和 Provider/Consumer 组件，React 的上下文功能可以实现跨组件传递数据，方便地共享数据而不需要手动逐层传递 props。上下文可以让您在组件树中共享数据，而不必手动通过 props 层层传递。
2023-12-13 18:04:00
799
原创 react内置组件之＜StrictMode＞＜/StrictMode＞
组件时，React 会记录哪些生命周期方法已经废弃，以及哪些方法可能会导致副作用。它还会检测不安全的生命周期方法，并在控制台输出相关警告。组件包裹应用程序或组件可以启用一些额外的检查和警告。它可以帮助你捕获可能的错误、发现过时的 API 和行为，并提醒你进行一些潜在的优化。组件会对应用程序的性能产生一些额外的开销，因此不建议在生产环境中使用。在发布应用程序之前，请务必将。是 React 提供的一个组件，用于帮助开发者在开发过程中检测潜在的问题，并修复一些常见的警告。组件来帮助你识别潜在问题并进行调试。
2023-12-11 15:31:06
923
1
原创 react内置组件之＜Profiler＞＜/Profiler＞
回调函数，以便在性能分析时记录日志、发送指标数据或触发其他操作。通过观察实际持续时间、基准持续时间和交互等信息，你可以确定哪些组件需要进行性能优化，以提高 React 应用程序的性能和用户体验。是 React 提供的一个内置组件，用于帮助你检测并分析 React 应用中的性能瓶颈。它可以帮助你了解组件渲染所花费的时间，并提供有关哪些组件需要进行优化的信息。回调函数就会被触发，并提供有关渲染性能的相关信息。组件包裹在应用程序的根组件上，并传入一个。每当被包裹的组件树发生更新时，在上面的例子中，我们将。
2023-12-11 15:25:53
901
原创 react Hooks之useId
当我们在编写React组件时，有时需要为元素生成唯一的ID。这种情况经常出现在表单元素、标签和用于无障碍性的目的上。React提供了一个名为useId的自定义Hook，它可以帮助我们生成唯一的ID。
2023-12-08 11:55:41
740
原创 reactHooks之useDeferredValue
包裹某个状态值时，React 会将对该状态值的更新操作进行延迟。这意味着，如果这个状态值在短时间内多次变化，React 只会取最后一次更新的值，从而避免不必要的渲染。需要搭配 React 18 中的 concurrent mode 使用，因为它是与并发模式相关的新特性。: 这是需要延迟更新的状态值。在交互式用户界面中，有时候用户的操作会触发大量的状态更新，这可能会导致界面卡顿或不流畅。（可选）: 这是一个配置对象，用于调整延迟更新的行为。的更新会被延迟，直到用户停止输入 200 毫秒之后，
2023-12-08 11:48:17
669
1
原创 react Hooks之useDebugValue
当我们使用 React 开发工具查看组件的状态时，React DevTools 会从组件和其所有子组件中收集信息并显示在 DevTools 界面上。中，我们将计数器的值暴露给 React 开发工具，如果计数器的值大于 5，则显示 "Count is greater than 5"；它的作用是将自定义 Hook 中的某些值暴露给 React 开发工具（例如 React DevTools）以便于调试。大于 5，那么字符串将会显示为 "Count is greater than 5"。，用于管理计数器的值。
2023-12-08 11:38:20
670
原创 react Hooks之useLayoutEffect和useInsertionEffect
在介绍这两个hooks之前。让我们先对比一下useEffect、useLayoutEffect、useInsertionEffectuseEffectuseEffectuseEffect。
2023-12-07 16:35:04
1514
原创 react Hooks之useEffect
只写一个回调函数而没有指定依赖数组，那么每次组件渲染后都会触发这个回调函数。这个依赖数组未空数组，表示加载该页面时，只执行一次，如果你学过vue，那么你可理解为他相当于vue的create阶段。的回调函数中返回一个清理函数，可以在组件卸载前执行一些清理工作，如取消订阅、清除定时器等。通过返回一个清理函数，我们可以在组件卸载时执行一些清理操作，比如取消网络请求、清除定时器等。的回调函数中执行副作用操作，例如发送网络请求、订阅事件、手动管理组件的生命周期等。：可以根据传入的依赖数组，在特定的依赖变化时触发。
2023-12-07 16:02:21
583
原创 reactHooks之useContext
上下文是 React 中用于在组件树中共享数据的一种机制。通过创建上下文对象，你可以将数据传递给整个组件树中的多个组件，而不需要一级一级地手动传递。1、作用：用于在函数组件中获取和使用上下文（Context）。包裹在应用的顶层，以便在整个组件树中共享上下文数据。，你可以在函数组件中更方便地共享和使用数据。，首先你需要创建一个上下文对象。方法来创建一个上下文对象，并指定默认值。在需要使用上下文数据的子组件中，我们使用。Hook 来获取上下文中的数据。上下文中的数据，并将其渲染到组件中。来包裹子组件，并通过。
2023-12-07 14:29:00
660
原创 前端页面展示world文档
buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型。// 两个参数，一个是文件可以是Blod,ArrayBuffer等具体可百度,一个是要渲染的的dom。this.$refs.file, // HTMLElement 渲染文档内容的元素,<div ref="file"> </div> //页面中的dom。插件的名字叫docx-preview。// 需要后端返回这些类型的文件数据。
2023-07-25 10:53:14
947
原创 vue2和vue3中compontent文件夹下的组件做全局引入
1.在compontents中的index.js文件夹下写入如下代码。1.在compontents中的index.js文件夹下写入如下代码。2在main.js中导入。2在main.js中导入。v2,v3都直接使用即可。
2023-07-21 18:02:46
998
原创 TypeScript学习第一天
"StrictNullChecks":true 检查undefined和null类型。"strict"：true, 是否开启严格模式检查类型 可检查所有。"noImplicitAny":true 判断隐式any类型。数组：type[ ] 或 Array<type>// type用的被继承的类型&{}自己添加的类型。// interface用的extend进行扩展。类型别名和接口有什么不同呢？any类型 适用于任何。字符串：string。布尔：boolean。
2023-05-15 10:30:01
143
1
原创 ts之泛型
定义一个函数或者类时，在定义时还无法确定它的参数或返回值时什么类型，这时可以用any或unknown 来解决，当然也可以使用泛型定占位。在定义时只占位，不确定类型，在调用时才给定类型。定义一个实例化的函数 什么样的类，不确定，一定要传过来的是类。
2022-10-20 11:14:45
137
原创 TypeScript之接口
接口主要负责定义一个类的解构，类要实现此接口后，对类只有包含接口中定义的所有属性和方法才能定义成功。接口的多态，同一个方法，传入不同的参数，它所对应的操作不同称为多态【参数不同】同一个方法，返回不同的结果，称为多态【对象不同 ==> 父类的此方法】通俗的讲:在面向对象中，它就是用来给类定义规则的。定义的接口不是用来规范类的，而是用来定义类型的。在js中继承也是单继承，只能继承一个父亲。但是实现接口，可以是多个，多个以逗号隔开。为了方便 也可以不继承，写成这种模式。
2022-10-19 22:05:39
381
原创 vue.2.0中 通过请求拦截器完成统一设置
当我们在登陆后，想在其他页面获取数据，我们需要用token来请求，那么我们该怎么做才可以在我们的所有发送的请求投中加入token呢？这样以来，我们就将token传到了每个跳转的网页中，都可以获取到响应的数据了。首先，我们要获取到vuex中存储的token，所以，我们要提取出来。我门需要在http.js中axios中的请求拦截器中添加。在http请求中 我们在拦截其中设置。
2022-10-11 11:47:15
390
原创 vue2.0中的退出登录问题
在vue项目中，我们想要退出登陆，那么，通过之前的权限设定，我们需要将vuex、**storage中的token都清理，并且返回到登陆页面。
2022-10-11 10:05:59
2907
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人