缓存设计（TanStack 加载器、TanStack 查询、SWR 等） 自动路由 prefetching Suspense-like 的路由过渡 异步路由元素和错误边界 类型安全的 JSON-first...Redux Toolkit 还包括一个强大的数据获取和缓存功能，我们将其称为 "RTK Query"。它作为一个独立的入口点包含在软件包中。它是可选的，但可以消除手动编写数据获取逻辑的需求。...使用结构共享对查询结果进行记忆化 如果你对这个列表不感到压力，那可能意味着你已经解决了所有服务器状态问题，并且值得获得奖励。...RTK Query 是 Redux Toolkit 包中包含的一个可选附加组件，它的功能是构建在 Redux Toolkit 的其他 API 之上的。...UI 层一起使用 API 端点是预先定义的，包括如何从参数生成查询参数和将响应转换为缓存的方式 RTK Query 还可以生成封装整个数据获取过程的 React hooks，为组件提供数据和 isLoading
我假设你已经知道React的基础知识，因此不会涉及“不要改变道具或状态”这样的陷阱。 坏习惯 本节中的每个标题都是你应该避免的坏习惯! 我将使用一个典型的待办事项列表应用程序示例来说明我的一些观点。...在我们的待办事项列表应用程序的上下文中，你肯定应该使用一个reducer来管理待办事项数组，无论是通过useReducer还是Redux。...这在很大程度上可以归结为常识，并观察您每天使用的应用程序中哪些工作，哪些不工作。 以下是一些简单的可用性最佳实践，你今天就可以实现: 确保可点击的元素显示为可点击的。...将你的光标移动到一个可点击的元素上应该会稍微改变元素的颜色，并使光标变成一个“指向手”，也就是CSS中的指针。将鼠标悬停在一个引导按钮上，看看这些最佳实践的运行情况。 不要隐藏重要的UI元素。...将CSS的范围限定在单个组件上，可以将组件重用为共享样式的主要方法，并防止样式意外应用到错误元素上的问题。
Redux Toolkit - RTK Query RTK Query[7] 是 Redux Toolkit 生态系统的一部分，提供了全面的解决方案，用于管理服务器状态。...它简化了进行 API 请求、缓存数据以及以可预测和高效的方式更新状态的过程。RTK Query 与 Redux 无缝集成，非常适合在状态管理中使用 Redux 的应用程序。...拖拽 在一些功能复杂的页面中，页面元素拖拽也是一种比较麻烦的功能点，而浏览器原生其实为我们提供了API，但是如果对组件使用draggable是一件繁琐的事情。...它提供了一种简单且可定制的方式来实现重新排序、重新排列或组织用户界面中的元素的拖放功能。 react-dnd[38]这是一个老牌的Dnd库。.../zustand/getting-started/introduction [7] RTK Query: https://redux-toolkit.js.org/rtk-query/overview
它返回单个React元素，它是本机DOM组件的表示形式。如果需要渲染多个HTML元素，则必须将它们组合在一个封闭的标记内。此函数必须保持纯净，即，它必须返回相同的结果每次被调用。...用Redux开发的应用程序易于测试，并且可以在表现出一致行为的不同环境中运行。 37. Redux遵循的三个原则是什么？ 单一事实来源：整个应用程序的状态存储在单个存储中的对象/状态树中。...单一状态树使跟踪随时间变化以及调试或检查应用程序变得更加容易。 39.列出Redux的组件。 Redux由以下组件组成： 行动–这是一个描述发生了什么的对象。...减速器–一个确定状态如何变化的地方。 商店–整个应用程序的状态/对象树保存在商店中。 查看–仅显示商店提供的数据。 40.显示数据如何流过Redux？ 等你来回答。...话题 常规路由 反应路由 涉及的页面 每个视图对应一个新文件 仅涉及单个HTML页面 网址变更 HTTP请求发送到服务器，并接收相应的HTML页面 仅历史记录属性被更改 感觉 用户实际上为每个视图浏览不同的页面
1、AI创作音乐——Suno https://app.suno.ai/ AI音乐生成软件Suno发布V3版本，仅需要简单的描述，就可以生成2min长度、广播质量级别的音乐。...Suno创作音乐的小技巧： 1、如果你想参考某个现有歌曲的节奏，可以在这个网站查询歌曲的BPM和Key，作为提示词写进去。...生成过程中仅2个专家处于活跃状态 结合了Joint Attention和Mamba技术 ⚡️ 支持 256K 上下文长度 单个 A100 80GB 最多可容纳 140K 上下文 与 Mixtral...8x7B 相比，长上下文的吞吐量提高了 3 倍 Jamba结合了Mamba结构化状态空间（SSM）技术和传统的Transformer架构的元素，弥补了纯SSM模型固有的局限。...技术栈：NextJs TailwindCss Headless UI MongoDB Redux - Toolkit - RTK Query JWT Docker/Vercel 8、动画算法与数据结构
，但即使在IPM失真很小的情况下，重复图案也会令人困惑，因此在提出的方法中，我们决定删除这些信息量较小的元素，并通过分割的方法来提高匹配的准确性。...，只使用没有车道元素的路段，应用中更大的分段将道路标记合并到单个簇中。...实验环境为600m×400m，总行程为4.7km (b） 使用道路标记循环检测生成路线图 (c） 仅使用里程计绘制的路线图 使用随机林分类 评估用于选择构成子地图的元素的随机林的结果。...随机森林分类器的相似矩阵。标线和十字路口是道路标线和人行横道的缩写。行表示实际的类，列表示随机林分类器的结果。 通过分类结果比较子地图滤波的精度改进效果。...总结 在本文中，我们提出了一种SLAM算法，该算法仅使用一个摄像头传感器，并利用对光线和环境变化具有鲁棒性的道路标记信息，SLAM算法的准确性可以通过分类和消除使用随机森林在各种道路标记之间增加环路检测模糊度的元素来提高
Redux 是 React 生态系统中的革命性技术。它使我们能够在全局范围内存储不可变数据，并解决了在组件树中 prop-drilling 的问题。...React Query 我已经在自己的多数个人和工作项目中使用 React Query 几个月了。这个库有一个非常简单的 API 和几个 hooks，用于管理查询（获取数据）和突变（更改数据）。...我使用常规 JS、React Hooks 和 axios 实现了一个从服务器获取的简单 TODO 列表。...、缓存和过时内容无效化。...不管它们谁会在不久的将来成为事实规范，从它们中重构都要比 Redux 那堆乱麻要简单许多。
技术资讯 Node.js v18 发布[2] Node.js 的每个 LTS 的版本代号都是以化学元素命名，按照首字母 A-Z 的顺序，这次的版本代号为 Hydrogen，翻译成中文是 "氢"。...不仅如此，还可以将 Figma 或者 Sketch 中的设计稿转换成你想要的框架组件代码，使用 Builder.io 进行拖拽来构建 UI 并编排代码。...为什么要使用 Redux Toolkit[9] Redux 官方发布的这篇博客讲解了 Redux Toolkit 的 Why 和 How，并强烈推荐使用。...等库作者 DEX 周刊[14]：关于产品、设计、前端、软件等内容的精华资讯邮件列表 参考资料 [1] 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly: https...Toolkit: https://redux.js.org/introduction/why-rtk-is-redux-today [10] JavaScript 测试教程: https://wanago.io
这也是为什么渲染列表时为什么要使用唯一的 key。 6....使用 Redux 或者 Mobx 等状态管理库 使用订阅发布模式 11. React 父组件如何调用子组件中的方法？...方法组件中的优化手段 1、使用 useMemo 2、使用 useCallBack 其他方式 1、在列表需要频繁变动时，使用唯一 id 作为 key，而不是数组下标。...为什么 JSX 中的组件名要以大写字母开头？ 因为 React 要知道当前渲染的是组件还是 HTML 元素。 18. Redux 是什么？...对store管理不同 Redux将所有共享的数据集中在一个大的store中，统一管理 Mobx按模块将状态划出多个独立的store进行管理 3.
在95名开发者参加的测试中，45名使用了 Copilot 的开发者用时比没有使用 Copilot 的开发者少了55％。...对于主要在服务器上管理状态的系统，像 React Query 和 RTK Query 这样的工具已经获得了一些动力，而 GraphQL 仍然是灵活查询后端数据服务的好方法。...对于某些用例，Zustand 和 Jotai 等替代品可能值得一试，而 recoil 可能是一个很好的选择，如果您的 UI 需要进行数千或数十万个元素的原子更新。...但是我们习惯于在应用程序中生成的 ID 中泄漏信息。这可能会导致各种安全问题和用户隐私侵犯。...作者还介绍了GraphQL，它是一种新的数据查询语言，可用于构建更灵活和高效的API。 文章提到了移动应用程序开发方面的新兴技术，如React Native和Ionic。
它是基于 Redux 的一个很棒的 API，极大地改善了开发者使用 Redux 的体验。...如果你已经在使用 Redux，并且想要在 Redux 中添加集成状态管理的数据请求功能，建议你看看 RTK Query，它将数据请求的功能更巧妙的集成到 Redux 中。...Query：https://redux-toolkit.js.org/rtk-query/overview ---- 路由 如果你使用的是像 Next.js 或 Gatsby.js 这样的 React...这已经足以使用 Jest 执行所谓的 Snapshot Tests 了：一旦运行测试，就会创建 React 组件中渲染的 DOM 元素的快照。...RTL 支持让渲染组件模拟 HTML 元素上的事件成，配合 Jest 进行 DOM 节点的断言。
Redux这个框架的好处在于能够统一在自己定义的reducer函数里面去进行数据处理，在View层中只需要通过事件去处触发一些action就可以改变地应的数据，这样能够使数据处理和dom渲染更好地分离，...(列表页两个列表的切换) 这样写除了保证在父元素那一层知晓数据(key值）不同需要重新渲染之外，也保证了React底层渲染知道这是两组不同的数据。...针对React的这个数据比较的深比较deepCompare，要点有2个： 尽量使传入的数据扁平化一点 比较的时候做一些限制，避免溢出栈 先上一下列表页的代码，如下图。...$$typeof // 类型 _owner // 父组件 _self: // 仅开发模式出现 _source: // 仅开发模式出现 _store // 仅开发模式出现 key // 组件的key属性值...针对列表页这种情况，我们觉得可以暂时不做，由于包裹的元素不多，可以先重复渲染，然后再交由子元素自己再去判断。
嗨， 大家好，我是徐小夕，之前和大家分享了很多可视化 + 零代码相关的技术实现和前端工程化的最佳实践， 最近研究 nextjs 也开源了一款基于 nextjs + antd5.0 的开源中后台系统（持续迭代中...）： 从零打造一款基于Nextjs+antd5.0的中后台管理系统 今天继续和大家分享一位技术小伙伴 自荐 的非常有意思的开源电商平台——c-shopping。...Desktop、Tablet、Phone等多种设备， 目前github star 超过1000+， 技术栈如下： NextJs TailwindCss Headless UI MongoDB（数据存储） Redux...- Toolkit - RTK Query JWT Docker github地址：https://github.com/huanghanzhilian/c-shopping 接下来我就来和大家分享一下它的细节...项目细节演示 移动端效果： 商品详情： 购物车： 订单列表： 管理端部分界面演示： 项目结构 + 技术功能亮点 用户端： 登录 JWT认证 注册 首页（分类navBar、banner
在 App 国际机票查询列表页的相关业务模块，基于 Clean Architecture 整洁架构之道的思想，进行了一次技术大重构。...Rules - 单个业务实体，可以是具有方法的对象，也可以是一组数据结构和函数 不同层代表软件系统中不同领域，外层是机制(mechanisms)，内层是策略(policies)。...2.1 业务场景 App 国际机票查询预订流程中，列表页负责展示符合用户搜索条件的航班列表，并将用户带入中间页（舱位选择），其业务场景有以下特点： 代码量庞大 - 逻辑层70000行以上 依赖服务多 -...ViewModel层由多个React Component组合嵌套而成，这些勾选框，侧边栏，筛选项列表,按钮等界面元素按照如你所见的布局关系被 JSX 声明式表达为一棵组件树，所见即所得。...为了摆脱基于界面元素在布局关系上编写状态逻辑，我们放弃 Component 和 Hook 方案。为了前端模块化和整体分形的项目结构，我们放弃 Redux 方案。
高阶函数的组合 高阶函数使我们可以显式地使用程序设计元素描述过程（函数）的抽象，并能像操作其它元素一样去操作它们。这让我们可以对函数进行组合，将多个简单子函数组合成一个处理复杂任务的函数。...如果将列表看做是一把展开的扇子，列表中的每个元素看做每根扇骨，则 reduce 的过程也即扇子从左到右不断折叠（归约、累积）的过程。当扇子完全合上，一次折叠也即完成。...不同之处在于，redux 中的列表 stream，是一个随时间不断生成的无限长的 action 动作列表，而 reduce 中的列表是一个普通的 list。...不同点： reduce：接收一个有限长度的普通列表作为参数，对列表中的元素从前往后依次累积，并输出最终的累积结果。...从冷、热信号的角度看，reduce 的输入相当于冷信号，累积器需要主动拉取（pull）输入列表中的元素进行累积；而Redux的输入（事件流）相当于热信号，需要外部主动调用 dispatch(action
key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。...这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。 React Redux 34. MVC框架的主要问题是什么？...使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为。 37. Redux遵循的三个原则是什么？ 单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。...虽然 用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。...主题 常规路由 React 路由 参与的页面 每个视图对应一个新文件 只涉及单个HTML页面 URL 更改 HTTP 请求被发送到服务器并且接收相应的 HTML 页面 仅更改历史记录属性 体验 用户实际在每个视图的不同页面切换
组件是高度具体的并且通常孤立的代码片段。每个组件最好只处理一件事情，通过参数和上下文共享数据。例如，你可能有单个头部组件，仅用来渲染导航链接。...当状态中的数据发生改变时，组件会再次渲染，来更新这些变更。你要理解这几个基础概念。 学习这些概念时，毫无疑问你将遇到条件渲染和从列表中渲染多个组件。此时，你应该创建一个简单的 React 应用。...它比 Redux 容易多，也可以使用 Hooks（现在你应该熟悉它了）。 它使获取数据变得简单，可以在实际应用中做一些尝试。...当应用程序变得复杂时，要对单个组件进行良好的单元测试以确保正确性，而不是假设它们按预期的方式运行。 3.3 高级 React 概念 React 官方文档也区分了高级概念与主要概念。...总结 希望这个列表对你有用，无论你是刚开始学习 React，还是想巩固 React 知识面。 React 一直由 Facebook 开发着，集成了多年的特性和功能，迷人且易用。
默认的 redux-saga 导出（在代码中为 createSagaMiddleware）是创建中间件实例的工厂。...这使我们可以将 saga 和 reducers 并置在使用它们的组件附近。这也使它们易于管理，因为它们仅包含与附近文件相关的代码。 在例子中，exampleSaga只是执行一次并终止的普通函数。...我们将在以后的教程中探讨生成器的用法。...第5步：创建 Saga 中间件实例 /src/configure-store.js const sagaMiddleware = createSagaMiddleware(); 执行我们代码中的 redux-saga...createStore 仅接受单个 store enhancer，因此需要 applyMiddleware。我们将为多个中间件使用一个中间件数组。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
