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

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

• 使用 ahooks 中的 useRequest 轻松管理React中的网络请求
• 使用 ahooks - useRequest 轻松实现乐观更新
• React 优化：在 ahooks - useRequest 中利用 swr 优化网络请求

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

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

这是一个不太常见的需求，因为博主本人所在公司是做教育相关产品的，故而有此需求，通过录制学生端pad屏幕，进行屏幕广播，本文主要介绍其中需要注意的一些关键点，详细代码可以在文末的 Github 仓库中查看。

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

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

修改package.json

有了前面的章节的学习，我们已经基本了解了 react 及组件等概念，但是我们之前都是直接在 html 中使用的 react，接下来，我们将通过 create-react-app 脚手架，来创建一个真正的 react 项目，开始深入学习 react 的其他知识。

从零开始学习React：了解当前React常用技术，编写第一个React组件
从零开始学习React：了解组件的三大属性
从零开始学习React：react中事件处理与柯里化

从零开始学习React：了解当前React常用技术，编写第一个React组件
从零开始学习React：了解组件的三大属性

上一节我们简单介绍了React的相关技术栈，以及如何在一个 html 文件中使用 React，创建一个React 组件并渲染到Html 中。

本节我们来介绍在 React 中 一个组件比较重要的三大属性

React 与 Vue 可以说是现阶段最热门的前端UI框架了，最近开始学习 React，准备开一个新坑：从零开始学习React，主要是学习时的一些思考与记录，如有谬误，烦请斧正。由于前端技术的快速迭代，我会在适当位置标注版本信息，以免出现货不对板。

1 Maven 与 Maven 私服

对于 Maven 大家应该都还不算太陌生，虽然作为 Android 开发我们都是用 gradle 来进行项目构建、依赖管理等工作，但是我们还是离不开 Maven 的中心仓库 Maven Central ，例如在我们的根 build.gradle 文件中就可以看到这样的代码：

上一篇文章我们介绍了如何在 kotlin 优雅的封装匿名内部类（DSL、高阶函数），其中我还算详细的介绍了在 Kotlin 中如何使用 DSL，本文可以看作是对上一篇文章中 DSL 的一个实战。

源码：junerver/SpannableStringDslExtension
欢迎 star & PR

匿名内部类在 Java 中是经常用到的一个特性，例如在 Android 开发中的各种 Listener，使用时也很简单，比如：

1
2
3
4
5
6
7
8
9
10
11
12

//lambda
button.setOnClickListener(v -> {
  //do some thing
});
//匿名内部类
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //do some thing
    }
});

在 Compose 中使用协程

Kotlin 中协程有多好用，想必不用我多说了。方便的构建、简洁的切换协程语法、await函数与join函数，尤其是在 lifecycle 扩展出现之后，在 Activity 与 Fragment 中可以通过类似 lifecycleScope.launch { } 这样的语法更方便的使用协程。

之前我们介绍过，Compose 是 FP 风格的，UI是通过一个个Composable函数组合在一起形成的，自然不能用lifecycleScope.launch { }，那么在 Compose 中我们该如何使用协程呢？

新建一个 compose 项目

开始前，请下载最新版本的 Android Studio Arctic Fox，然后使用 Empty Compose Activity 模板创建应用。

我们先看看在 app/build.gradle 中是如何配置使用 compose 的。

Android Gradle Plugin（后简称为AGP），在 7.0 版本之后与 Gradle 版本版本号保持同步（大喜，不需要再去查 gradle 与 AGP 的版本号对应了）。

本文记录了在AS升级到 Android Studio Bumblebee | 2021.1.1 版本后，项目默认创建使用 AGP 7.1.0 的一些注意事项。

先看一个在 Gradle 6.7.1+AGP 4.2 时代（后简称为AGP 6.0）最常见的项目配置：

本文普适性比较低，仅限于需要在项目里使用多个变体（variant）的开发者。对于gradle打包多变体可以参考我之前写的文章Gradle —— 使用 Gradle 打包多个变体（variant）

太长不看：项目地址：junerver/flavor_cli

本文用于记录我在项目中集成 Flutter 遇到的种种问题，作者纯 Flutter 小白，所以可能会有大量错误，请大佬指出。

按照官网的手动集成步骤一步一步完成，但是在运行打开 FlutterActivity 时出现了了如下错误：

1
2
3
4
5

E/flutter: [ERROR:flutter/runtime/dart_vm_data.cc(18)] VM snapshot invalid and could not be inferred from settings.
E/flutter: [ERROR:flutter/runtime/dart_vm.cc(250)] Could not setup VM data to bootstrap the VM from.
E/flutter: [ERROR:flutter/runtime/dart_vm_lifecycle.cc(84)] Could not create Dart VM instance.
A/flutter: [FATAL:flutter/shell/common/shell.cc(274)] Check failed: vm. Must be able to initialize the VM.
    

百度该错误定位到的问题解释有两种：

• Flutter 集成到Android项目中遇到的坑
• Flutter与Android混合编码配置笔记

简断截说，上代码！

举例：

1
2
3
4
5
6
7
8
9
10
11

fun login(name:String,pass:String){
	HttpMethods.webService.login(name,pass){
		 override fun onSuccess(bean: LoginBean) {
		 	connect(bean.token)
		 }
		 override fun onError(e: Exception) {
		 }
 }
fun connect(token:String){
	......//调用方法，从回调函数获取连接状态
}

错误日志如下：

java.lang.NoSuchMethodError: No static method metafactory(Ljava/lang/invoke/MethodHandles$Lookup;Ljava/lang/String;Ljava/lang/invoke/MethodType;Ljava/lang/invoke/MethodType;Ljava/lang/invoke/MethodHandle;Ljava/lang/invoke/MethodType;)Ljava/lang/invoke/CallSite; in class Ljava/lang/invoke/LambdaMetafactory; or its super classes (declaration of ‘java.lang.invoke.LambdaMetafactory’ appears in /apex/com.android.runtime/javalib/core-oj.jar)

原因：
新版本的 Retrofit 使用到了JAVA8 的Lambda表达式，项目中需要使用JAVA1.8，否则无法正常使用。

点击File -> Project Structure->Modules -> Properties 设置Source Compatibility和 Target Compatibility两项为 JDK8就可以了

《农神食其子》描绘的是农神「克洛诺斯」吞噬他的神子的画面。农神因为惧怕其子女未来推翻自己作为神王的统治地位，便吞噬了他的五个子女。

抛开故事本身，其实大多数父亲也都有「食子」情节。随着儿子的成长，在家庭中开始不断寻求地位的变化，要求与父母平等的对话，这时候父亲的地位是不断受到挑战的，「食子」情节也就此埋下。