2022年3-6月工作总结

React

这段时间使用 hooks 的写法进行开发。

useEffect 的使用容易出现竞态和死循环的问题，所以慎用，有的时候可以使用 useMemo 的方式去代替 useEffect 的一些赋值问题。

Hooks 和 Class Component 使用感受

非常非常主观的感受，终于明白了之前说的如果对 hooks 不熟悉就不要轻易使用 hooks 的要求。

hooks 依赖好用，但是需要逻辑清晰。如果一个超大组件使用很多 useEffect 是非常非常容易陷入死循环，又或者非常非常容易写出连锁依赖的代码。class component 就能够有效的避免这个问题。所以为什么会有大组件，拆的细一些不是更好维护嘛。

hooks 和 class component 的最大区别是生命周期。

React hooks 和 Class Component 的性能哪一个更好？ - 知乎

Typescript

泛型不是万能药

有的时候可能不需要泛型。

前情提要：我想要写一个通用函数，传参是一个函数，返回值是 Promise<函数结果>，具体的 Promise 返回数据就想要使用函数时显式传入泛型。

但是，函数内部没有使用到这个泛型，所以其实最后的返回结果应该是由传入的函数返回值来决定。

最后的解决方式： Promise<unknown>

箭头函数使用泛型

const foo = <T,>(x: T): T => x;

const foo = <T extends {}>(x: T): T => x;

const foo = <T extends Record<string, unknown>>(x: T): T => x;

const foo: <T>(x: T) => T = x => x;

const identity = <T,>(arg: T): T => {
    console.log(arg);
    return arg;
};

const renderAuthorize = <T>(Authorized: T): ((currentAuthority: CurrentAuthorityType) => T) => (
  currentAuthority: CurrentAuthorityType,
): T => {
    return;
};

Array.reduce 使用 ts

// 生成 对象
const obj = arr.reduce((optionResult, optionItem) => {
  return {
    ...optionResult,
    [optionItem.idx]: [optionItem.value],
  };
}, {}),

// 返回结果为 数组
const newArr = arr.reduce(
  (optionList: Option[], option: Option) => {
    if (surplusOptionIdx.includes(option.idx)) {
      optionList.push(option);
    }
    return optionList;
  },
  []
);

总结与反思

CR

1. 常量使用 enum 的方式，枚举值和后端统一使用 string 的形式定义。

   // 之前使用枚举方式需要先定义 constant 然后再进行 ValueOf 转换一下
   // 这样做的原因是 
   import { ValueOf } from 'type-fest';
   
   import {
     LeaveUnitItem,
   } from './constant';
   
   export type LeaveUnit = ValueOf<typeof LeaveUnitItem>;
   

2. 生成新的数组方式使用 slice，可以使用 slice 去替代 splice 的删除或插入操作。

参考链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

const newArr = [...oldArr.slice(0, index), ...oldArr.slice(index)];
// 等价于
const newArr = [...oldArr];
newArr.splice(index, 1);

// 在数组倒数第二的位置插入元素 
const newArr = [...oldArr.slice(0, -1), newItem, ...oldArr.slice(-1)];
// 等价于
const newArr = [...oldArr];
newArr.splice(-1, index, 0);

3. 避免使用 <br /> 划分段落，改用 <p> 标签。

参考链接：https://stackoverflow.com/questions/1726073/is-it-sometimes-bad-to-use-br/1726103#1726103

4. 判断输入值是否是全空格可以使用 String.prototype.trim() 方法替换正则表达式的校验。
5. setState() 中不要写太复杂的逻辑，注意可读性。
6. throw 代替 return Promise.reject() 的方式，Promise.reject 的潜在问题是，如果你忘了 return, 后面的代码还是会执行。
7. 组件除了自身不增加额外的导出。
8. 逻辑判断能够使用三元表达式的就不要用多余的 if。
9. 命名问题，要用正向的思维去设置命名，有些命名明显可以使用一个词去代替两个词，如 notDisable => enable。
10. 可以使用库解决的问题就不要再造轮子。如 moment 有很强大的时间处理 api。

moment 使用

参考链接：https://momentjs.com/docs/

1. 获取时分

const hourAndMinute = moment(date, 'HH-mm');

2. 获取某个时间段开始或最后一天/月

// 6 月最后一天
const date = moment().month(6).endOf('month');

// 7 月第一天
const date = moment().month(7).startOf('month');

// 获取当前季度第一天
const date = moment().startOf('quarter');

formily

formily 使用详见 formily 踩坑实记

碎碎念

想要写一些自身感受的总结，就好像大家都可以看的日记。

这三个月一直在写需求，各种规则的重构，然后 6 月来了个大整合把 1-4 月的需求整合到一起 🥲，还好3、4月代码调整了方案和风格（倒也不是说调整了风格，而是更能做自己了），6 月整合的时候反而工作量不是很大，但是 1-2 月的工作内容表单联动很多，且写法和 6 月的方案有差异，确实辛苦 🐑 姐了。