https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

（嫌弃）Form 方式自己组装发送

// 因为涉及到文件上传是单独分开的接口，使用form表单实现
// todo 服务器要拉取当前信息对应的所有附件信息
// 上传 formData <https://blog.csdn.net/TetaiSon/article/details/112677857>
// 自己构建 form data 设定 request 方法 post form
// 关键是知道 upload 的 file 就是一个 Blob list
let formData = new FormData();

Object.keys(newRecord).forEach((key) => {
  if (key !== 'upload') {
    formData.append(key, newRecord[key]);
  } else {
    // file 单独处理
    newRecord.upload?.forEach((file) => {
      formData.append('uploadFiles', file.originFileObj as any);
    });
  }
});

file.originFileObj 是 ANTD 封装的关键，另外，通过append 构造 form 数组。此外你要实现上传的逻辑。相比来说还是下面这种方法简洁。

继续阅读

umi + antd-pro 精简化流程

深度使用 antd pro 和 umi 的组合之后，我想自己对这个框架进行控制，脚手架搭建出来的那些乱七八糟的就不要了。在精简过程中，有一些小技巧，故记录在此。

安装 umi

npx @umijs/create-umi-app

安装插件

想在菜单中用字符串指定 icon 需要安装 umi-plugin-antd-icon-config 这个插件进行转换。

修改配置

config/config.ts

import routes from './routes';

import { defineConfig } from 'umi';
export default defineConfig({
  // https://github.com/umijs/umi-plugin-antd-icon-config
  plugins: ['umi-plugin-antd-icon-config'],
  nodeModulesTransform: {
    type: 'none',
  },
  routes,

  fastRefresh: {},
  dva: {
    hmr: true,
    immer: true,
  },
});

继续阅读

独立开发的阶段性体会

注册一个公司

不管规模多大，公司是必不可少的。自然人能够开发的东西是单机工具类产品。假如想整合更多的资源，需要一个法人身份，开公司是唯一的选择。

多途径输出

总结的形式可以是笔记、可以是视频，多途径输出自己的经验，帮助更多的人。

减少一切非必要成本

这里非必要成本包括公司财务的开支，服务器的开支，在项目初期尽可能减到最低配置。保持无负担低成本启动，可以让你不用那么焦虑，保持清醒的头脑聚焦到关键的核心产品上。

从上至下规划产品

从上至下规划产品，不要陷入技术细节。要知道，除了核心功能，其他大部分的功能都是可以通过技术手段实现。产品的方向是最重要的。其中首要的是要明确市场。通过量化使用者的数量，乘以每个用户可以给你带来的效益，得出整体的规模。然后看目前的市场情况，看从中能分到多大的蛋糕。

继续阅读

React 状态机使用感受

上手 react antd 之后，按照官方推荐的套娃框架 umi 和 antd pro 配合搭建了目前的项目。其中 umi 又可以使用 dva 状态管理框架进行数据流管理。

一开始我的认为是这个东西比较麻烦使用起来不太顺手，并且解决不了什么问题。但是现实是在我的项目里有很多组件共用的数据，不用状态管理会让代码显得非常冗余。学习了 dva 之后发现套娃框架非常适合上手，也精简了不少代码。

状态管理的核心是拆分状态。一开始我综合了知乎的一些回答，认为若组件之间有大量的共享数据，那么就可以使用状态机管理数据可以精简非常多的代码。

哦又是this——浅谈 React 事件绑定

在使用 React JSX 事件绑定中有个最大的问题是它不会帮你处理 this 的指向问题。我刚刚上手的时候有些疑惑，看了教程之后豁然开朗。

React 事件绑定的需要和显示的修改对应事件处理函数的 this 的值。这主要是因为 Babel 开启了严格模式。若这个函数 this 指向没有改变，直接赋值给 onClick，那么函数体内的 this 仍是 undefined 。为此需要使用 bind 函数来修改函数体内的 this 指向。比如下面这段代码：

import React, { Component } from "react";

class test extends Component {
  test() {}
  render() {
    return <div onClick="this.test.bind(this)"></div>;
  }
}

export default test;

对于一个类组件，this 指向的是类的实例，this.test 方法会沿着原型链找到类中定义的 test 方法，然后将这个类方法中的 this 替换为当前实例对象。这样一来， test 方法中的 this 就可以当前实例对象的值。

另一种方法是将 test 写出箭头函数的形式。这里有两个含义。首先 test = func 的形式，test 就是一个实例属性，但是这样仍然没有改变这个直接调用时函数内部的 this 的指向。但是假如写成箭头函数的形式，箭头函数中的 this 会使用实例对象的 this，如下所示。

import React, { Component } from "react";

class test extends Component {
  test = () => {};
  render() {
    return <div onClick="this.test.bind(this)"></div>;
  }
}

export default test;

对应视频教程

bind https://www.bilibili.com/video/BV1wy4y1D7JT?p=16

箭头函数 https://www.bilibili.com/video/BV1wy4y1D7JT?p=18

模块化工程杂感

为了更好的分解大规模的代码，包（package）的概念就产生了。包可以隔离命名空间，消除函数变量的命名冲突。一般的做法是，相同包下的文件都会放在在一个文件夹下。针对这个习惯，Python 在文件夹下定义__init__的方法来组织下面的小文件，JavaScript 的模块系统基本也是这个思路。

和这两者不同， Golang 不在单独在文件夹下指定一个导出文件，而是直接使用关键字 package 来指定，同时摒弃了文件导入这个概念，包为导入的最小单位。这样一来，同一个包内的各个文件可以直接使用而无需再次引入。而包外部的代码想要使用包内代码必须是显示的调用。这和它们家 Angular 的模块是一个思路。而导出文件的作用被大小写导出的内容所取代。