i_阿文-CSDN博客

原创实现一个带下拉框的输入框的可复用组件SearchInput

以上步骤展示了如何构建一个可复用的SearchInput组件，该组件在输入框或下拉框的内容变化时，能够向父组件报告这些变化。接下来，在父组件中使用SearchInput并定义一个处理函数来接受来自SearchInput的变化。首先，我们需要创建一个React组件，并在其中定义状态来管理输入框的值和下拉框的选择。

2024-08-14 21:09:41 274

原创单页面应用跟多页面应用的区别？

单页面（SPA, Single Page Application）与多页面（MPA, Multiple Page Application）在多个方面存在显著差异，以下是它们之间的主要区别：

2024-08-14 11:13:07 298

Hooks必须在函数组件的顶部调用，即直接位于函数组件的函数体内部，而不能在条件语句、循环语句或嵌套函数中调用。Hooks必须在React组件函数中使用，而不能在普通的JavaScript函数中使用。Hooks在React中的使用确实存在一些限制，这些限制主要是为了确保Hooks的调用顺序一致，从而保持组件状态的正确性。Hooks不能在循环中使用，因为循环中的闭包函数会共享相同的状态。虽然在事件处理函数中可以使用状态或其它Hooks，但Hooks本身不能在事件处理函数中调用。Hooks不能在类组件中使用。

2024-08-13 18:12:40 146

原创 React中的状态管理

然而，随着应用规模的扩大，组件之间的状态共享和通信变得复杂，这时及需要引入更高级的状态管理方案。useReducer是一个更复杂的替代useState的Hook，它返回dispatch函数来分发actions，并允许你编写一个reducer函数来根据当前状态和action来更新状态。MobX是一个简单、可扩展的状态管理库，它通过使用透明的函数式响应式编程（TFRP）使得状态管理变得简单和直观。Recoil是Facebook开发的一个用于React的状态管理库，它旨在解决大型应用中状态管理的复杂性。

2024-08-13 17:53:00 155

原创自定义hooks是如何共享数据的？

自定义Hooks在React中主要用于封装可重用的逻辑，这些逻辑可以包括状态管理、副作用处理等。虽然自定义Hooks本身不直接提供数据共享的机制，但它们可以通过多种方式与其他React特性结合使用，以实现数据的共享。

2024-08-08 20:00:36 284

原创网站加载100张图片，同一时间发出四个请求，有一个提前返回，剩余填补

在网站加载100张图片并同时控制最多只发出四个请求的场景中，当一个请求提前返回时，你需要确保剩余的图片请求能够填补这个‘空位’，以保持并发数始终是四（直到所有图片都被请求）。这通常涉及到一种队列管理机制，用于追踪哪些图片已经被请求，哪些还在队列中等待。

2024-08-07 23:11:53 210

原创微任务与宏任务的区别是什么？

在前端开发中，JavaScript运行时环境通常将任务分为两类：微任务（Microtasks）和红任务（Macrotasks），这是为了管理和执行异步代码。当浏览器执行完一个宏任务后，会检查微任务队列是否有待处理的微任务。如果有，则会优先执行微任务队列中的所有微任务，然后在执行下一个宏任务。微任务会在当前宏任务的末尾执行，而宏任务会在当前执行栈执行完毕后执行。注意，微任务总是在下一个宏任务之前执行，所以它们的优先级较高。微任务会在当前宏任务执行结束后，下一个宏任务执行之前执行。

2024-06-24 10:43:14 296