Junerver

发表于 分类于 ，

写在前面

本文中提及的 use开头的函数，都出自与我的 ComposeHooks 项目，它提供了一系列 React Hooks 风格的状态封装函数，可以帮你更好的使用 Compose，无需关心复杂的状态管理，专心于业务与UI组件。

这是系列文章的第8篇，前文：

阅读全文 »

发表于 更新于 分类于

写在前面

本文中提及的 use开头的函数，都出自与我的 ComposeHooks 项目，它提供了一系列 React Hooks 风格的状态封装函数，可以帮你更好的使用 Compose，无需关心复杂的状态管理，专心于业务与UI组件。

这是系列文章的第7篇，前文：

阅读全文 »

发表于 更新于 分类于 ，

写在前面

本文中提及的 use开头的函数，都出自与我的 ComposeHooks 项目，它提供了一系列 React Hooks 风格的状态封装函数，可以帮你更好的使用 Compose，无需关心复杂的状态管理，专心于业务与UI组件。

这是系列文章的第6篇，前文：

阅读全文 »

发表于 更新于 分类于 ，

写在前面

本文中提及的 use开头的函数，都出自与我的 ComposeHooks 项目，它提供了一系列 React Hooks 风格的状态封装函数，可以帮你更好的使用 Compose，无需关复杂的状态管理，专心于业务与UI组件。

这是系列文章的第五篇，前文：

阅读全文 »

发表于 更新于 分类于 ，

写在前面

本文中提及的use开头的函数，都出自与我的 ComposeHooks 项目，它提供了一系列 React Hooks 风格的状态封装函数，可以帮你更好的使用 Compose，无需关系复杂的状态管理，专心于业务与UI组件。

这是系列文章的第四篇，前文：

阅读全文 »

发表于 分类于 ，

咋一看标题你可能会觉得这有什么好研究的，请仔细看我的描述：在父组件中调用子组件的函数！

众所周知，如果我们希望让子组件调用父组件的函数，可以如下方式：

那么问题来了，父组件如何调用子组件的函数呢？

阅读全文 »

发表于 更新于 分类于 ，

”总所周知“，在 Compose 中有个思想叫做状态提升，在之前的文章Compose学习笔记2 - LaunchedEffect、状态与 状态管理中我们曾提及过。

状态提升的目的是为了让我们的组件尽可能的”无状态“，无状态的优点：

  • 可复用，组件只负责组件的职责，不持有或者少持有状态
  • 可测试，组件不持有状态，更接近于纯函数，相同输入必然有相同输出

状态提升的想法很好，但是实践的时候可能并不美妙。

阅读全文 »

发表于 更新于 分类于 ，

还记得： 使用 ahooks 中的 useRequest 轻松管理React中的网络请求 这篇文章么？

现在我将 ahooks 带到了 Compose 开发中！

在Compose项目中，你是如何进行网络请求，管理状态的？ViewModel？还是 LaunchedEffect 配合 State？

他们看起来都不够优雅，我们真的需要在 Compose 中创建这么多VM么？

还有更优雅的方式么？

来了解一下 junerver/ComposeHooks 吧，也许它会让你在 Compose 开发中更加得心应手，更多的专注于组件而非复杂的状态管理。

阅读全文 »

发表于 更新于 分类于 ，

我正在参加「掘金·启航计划」

关注 Kotlin 的大多数开发中可能都是 Android 开发者吧，大家基本也都是慢慢从 Java 逐步迁移到 Kotlin。

得益于 Kotlin 与 Java 之间良好的互通性，有的时候可能我们写代码还是比较随性的，尤其是依旧按照自己过去写 Java 的编程习惯，书写 Kotlin 代码。

但实际上 Kotlin 与 Java 之间编码风格还是有很大的差异的，你的代码可能还是 Java 的咖啡味。现在请你“暂时”忘记 Java 编码规范，放下成见，看一下 Kotlin 有哪些有趣之处。

阅读全文 »

发表于 更新于 分类于 ，

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

关于 ahooks

2022年的今天，在 React 中使用 Hook 已经是常规的不能再常规的操作了，我们会大量的通过组合 React 提供的 Hook，创建属于自己业务的专属自定义 Hook，亦或是各种工具 Hook。

阿里前端团队出品的 ahooks 正是这样一套 Hook 工具集，里面提供数十个常用的 Hook，可以极大的方便我们的日常开发。

今天我们要着重介绍的。就是 ahooks 项目中最为重量级的一个 hook ，useRequest。

阅读全文 »

发表于 更新于 分类于 ，

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

这是我关于 ahooks - useRequest 系列文章的第三篇，前两篇请查看：

通过前两篇文章我们已经基本了解了关于服务端状态管理的概念，也通过 useRequest 体验了一系列有趣的功能，认识到了其强大之处。

本文我们将继续介绍 useRequest 的进阶用法，主要是：swr 。

阅读全文 »

发表于 更新于 分类于 ，

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

在之前的文章：从零开始学习React-5：状态与状态管理，我们简单的介绍目前最流行的状态管理库 redux。今天我们介绍由 redux 团队推出的，可以更高效、更方便使用 redux 的另一个工具：Redux-Toolkit（简称：RTK）

阅读全文 »

发表于 更新于 分类于 ，

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

在应用里集成第三方登录是比较常见的需求，尤其是微信登录，但是由于微信官方文档许久没有维护，直接上手还是会走一些弯路，本文将介绍当前移动端集成微信登录的方法。

阅读全文 »

发表于 更新于 分类于 ，

theme: devui-blue

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

通过前面的几篇文章，我们已经大致的了解了 React 中的一些概念，也通过 cra 脚手架创建了一个正式的项目，接下来我们将使用 Antd 组件库开发一些简单的用例。并通过这个例子进一步了解 React 函数式组件、HOOK 、状态管理等概念。

在这个系列文章的第一章，我们就介绍过了 React 的状态，以及一种状态管理思想：状态提升，但是在面对一些复杂场景，状态提升就显得有些麻烦了，多个不同层级的组件状态，提升到共有的顶层组件，然后通过 props 在组件之间传递，一来代码量上提升很多，二来如果涉及修改，就会比较麻烦。

有的中间组件可能并不需要使用这些状态，或者函数，但是为了传递到目标组件还是需要在 props 中进行声明，显得非常的笨重。我写了一个 TodoList 的小例子，来说明这种尴尬的情况。

阅读全文 »

发表于 更新于 分类于 ，

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

这是我关于 ahooks - useRequest 系列文章的第二篇，其他两篇请查看：

在上一篇文章：使用 ahooks 中的 useRequest 轻松管理React中的网络请求 ，我们介绍了 useRequest 这个 Hook 的使用以及配置。

本文我们主要介绍如何通过 useRequest 实现乐观更新。

阅读全文 »

发表于 更新于 分类于 ，

React-router-dom 6 总结

通过Routes标签创建路由表

1
2
3
4
5
6
<Routes>
  {/* index 表示当前路由的默认路由 */}
  <Route index element={<Navigate to="/projects" replace />} />
  <Route path="/projects" element={<ProjectListScreen />} />
  <Route path="/projects/:projectId/*" element={<ProjectScreen />} />
</Routes>

路由指定组件的参数从 component 换成了 element，过去的 component 传递的是组件名，现在需要传递的是 JSX 标签，这点需要注意。

在 <Route> 标签中，可以通过申明 index 属性，来进行默认导航，上面的示例就是将根路由默认导航到 /projects，<Navigate> 标签申明 replace 属性，可以实现路由栈替换，避免路由表可以无限回退。

阅读全文 »

发表于 更新于 分类于 ，

Antd 使用学习

Antd 使用学习1. 配置antd 配合 craco2. 使用Antd1. Antd 使用第一课 Form 表单扩展知识：2. Table 表格的使用：3. Select 与 Input4. Dropdown 与 Menu5. Typegraphy.Text 用于显示一段文字6. Button7. Popover8. List，List.Item，List.Item.Meta9. Modal 模态弹窗10. Spin 显示加载动画效果

1. 配置antd 配合 craco

  1. 安装craco yarn add @craco/craco，并修改 package.json 文件
  2. 安装craco-less yarn add craco-less
  3. 安装bable-plugin-import yarn add babel-plugin-import 用于按需映入css or less

修改package.json

阅读全文 »
0%