唐霜的博客

“活到老，学到老”听上去是一件非常容易的是，它告诉你，只要想学习，什么时候都不晚，但是在现实生活中，这种自以为是的哲学，本质上是钳住人思维的一种毒药。人的主要学习时间是在我们普通人常见的读书阶段，大学毕业之后，很难再持续学习。但当我们意识到这一点的时候，已经回不去了。“人最重要的投资，就是学习。”我觉得这句话及其重要，而且不仅适用于“投资自己学习”，也适用于“投资家人、下一代学习”。当然，投资是有风险的。我以前觉得，小孩子嘛，能否学的好不一定靠成绩体现，具有一种浪漫主义色彩的自由学习论。但随着年龄的增长，我们的很多思想都发生了变化。你可以说随波逐流，但我称之为逐渐意识到了前人的智慧。

学习本质上就是一种能力。在我们青年时期，我们的首要任务是学习“如何学习”这项能力。当我们习得这项能力之后，我们便可以用它“学习”其他的知识。因此，我们可以看到以前很多学渣，现在混的很好，因为我们在学校的时候，我们自以为是的认为考试成绩是以自己掌握的多少知识来进行打分，而实际上，我现在发现，考试成绩是以掌握知识与掌握知识的时间比来进行打分，所以哪些拥有100分的同学，应该思考一个问题，如果自己的100分是建立在100天的基础上，那么那些只用了3天临时抱佛脚得到70分的学渣，真的是学渣吗？本质上，我们的考试结果，是“学习效率比”，而学习效率比的本质，就是“学习的能力”。掌握了“如何学习”的能力与掌握了“通过学习获得的知识”相比，前者不仅简单的多，而且有利的多。任何的知识都会忘记，但是一旦掌握了“如何学习”，那么任何忘记的知识都可以快速重新获得，而如果我们把大量的时间用来掌握“通过学习获得的知识”，那么最后我们只能获得一堆很快就会忘记的知识，而不是获得一项终身受用的能力。

如果我们的工作不是做文学研究，就没有必要研读小说的每一个字，而是知道故事的梗概和作者的核心思想即可；如果我们的工作不是建筑设计师，那么就没有必要挖掘每一页照片和梁柱结构的细节，而是只要像浏览杂志一样从各种精美的构图中找到灵感即可；如果我们的工作不是系统工程师，那么就没有必要对每个自然段的来龙去脉理解的那么透彻，而是能够对章节大标题的主要内容和涉及问题有轮廓的理解即可。书尽读不如不读。我们只需要对自己所在专业，或者自己正在从事的工作所需要的知识，进行深读深专，而不应该纠缠于那些用于扩展思路的书籍中的细节。同样，面对开源项目也是这样。

不过，现在最关键的是，我们没有时间来进行如上的操作。除了平时工作时间占据了过长，生活琐事无休无止外，还有一个不得不面对的问题，就是社交媒体和短视频让我不“吸上两口”没法过好这一天。以上这些问题阻碍了我们在随着年龄增长过程中的持续学习过程。“持续学习”和“学习”本质是不同的，“学习”的本质是“学习如何学习”，而“持续学习”的本质是“通过发挥掌握的如何学习的能力，快速掌握目前自己需要的某些既能或想法，以开阔自己在工作或某项事务中的思路，帮助我解决问题”。如果人生没有“学习”，那么就只会停留在离开学校的那一刻，那一刻你什么样，就什么样；但如果人生没有“持续学习”，那么就没法解决问题，生活问题积累越多，人就会崩溃。我小时候经常听到“学习型社会”，意思是人们通过持续学习解决自己的生活问题，从而让社会和谐。但随着经济发展，这种提法被抹掉了，似乎对于某些人而言，矛盾越多，利益越大。

我前不久买了几本书，觉得应该很快可以看完，可今天发现，半本都没读完。人啊，有的时候对自己太自信，是对自己的侮辱。说来说去，还是因为懒，社交媒体短视频“吸”的不亦乐乎，哪还有心思读书。等到疫情来了，阳了，嗯，没时间刷短视频了，时间都用来照顾家人了，至于学习，早丢到九霄云外。人呐，有的时候有时间，觉得自己很富有，直到事情一来，才发现，自己不是富有，自己是蜉蝣。

我在知乎讲react是全量更新脏检查，很多人听不懂，说我在乱说，我也懒得理会。我有一个例子，这个例子里面，我们可以看到react是全量更新，而vue可以做到定点更新（当然，vue是不是实现了另说）。我们来看下结构：

<a>
  <b>
  <c>
    <d>
  <e>

在这个结构里，我希望以直观的形式，去监督某个值变化，来实现<d>的更新，注意，这里<d>是一个node。在react里面，我们的写法可能是这样：

<SomeComponent attr={this.props.tableTips} />

如果想要更新SomeComponent的渲染结果，要么SomeComponent内部做了什么处理，让其自身可以根据某些条件重新渲染，要么必需是当前这个组件重新渲染，让SomeComponent被动重新渲染。但是为了重新渲染<d>而把a, b, c, e都重新渲染一遍，代价太大。有没有什么办法，在不重新渲染当前组件的情况下，重新渲染<d>这个片段？

一种方法是把d再封装一层，作为一个高阶组件，把需要监听的内容传入该封装好的组件，由组件来监听和重新渲染，这样就可以做到局部重新渲染，而不需要整个重新渲染。但是，这种方法也很笨，因为不可能存在一种万能的高阶组件来达到这个目的，所以到处去写这样的组件也不好。另外，高阶组件的使用，割裂了阅读组件结构的顺序，让我们在后期的维护中，不得不跳来跳去看代码。

而vue就可以做到基于模板来优化这一需求。例如：

<some-component attr="tableTips" />

就可以在模板编译时把tableTips作为可动态读取的片段，这样，每次在渲染some-component时，读取到的attr都可能是新的，从而带来重新渲染。

通过这个例子，我们就可以发现，虽然jsx具有非常强的表达力，但它始终基于原生语法，而作为模板语法，当然具有更强的能力。

typescript中只能对class成员进行约束，无法对static方法进行约束，我们通过一些特殊方法来实现。

/**
 * 用于得到某个class的构造函数，例如：
 * class Some {}
 * Constructor<Some> -> Some类型的构造函数，也就是class Some本身
 * 用处：
 * class Some {
 *  static fn<T>(this: Constructor<T>): void; // -> this: Constructor<T> 规定了该静态方法内的this类型，由于类型推导，此处的this被推导为Some本身
 * }
 */
export type Constructor<T> = new (...args: any[]) => T;

通过Constructor这个util，我们可以获得一个class的type，也就是class构造函数本身。所以，当我们在静态方法中进行this约束，或返回this时，可以这样：

class Some {
  static create<T>(this: Constructor<T>): T & { a: number } {
    // @ts-ignore extends 要求特定结构
    return class extends this {
      a: number = 1;
    }
  }
}

通过这样对static方法进行签名，就可以在使用时很好的约束类型。

JS里面，普通的function也可以通过new进行实例化，成为一个对象。而ES6引入的class是个阉割版本，导致class缺失了作为class的特征，class可以理解为封装的function。所以，在JS里面区分一个值是function还是class是比较麻烦的，目前TC39已经在考虑加入[[FunctionKind]]来进行区分。目前，我们可以通过一些办法来区分，如果是在纯浏览器环境下，我们有如下的一些办法：

1. 通过字符串

把function或class与空字符串连接，得到字符串就可以看出来。

1. 通过prototype的discriptor

对于class A而言Object.getOwnPropertyDescriptor(A, 'prototype')的writable为false，而对于function a而言，Object.getOwnPropertyDescriptor(a, 'prototype')的writable为true。

1. 通过arguments

对于class A而言，A.arguments会报错，而对于function a而言，a.arguments为null。

这些方法都抵挡不住现在很多编译工具会把class编译为ES5的function，这导致这些特性都失效，所以能不能用还要看你项目里面的编译是怎么做的。

我们经常遇到这样的情况，我们填写某个表单的时候，需要上传一张图片，但是我们的业务会有这样一个逻辑，我们这个表单会默认拉取一些数据进行填充，用户在这些数据基础上进行修改，这些拉取的数据，有的时候会使用外部数据里面的图片，此时，我们需要把外部数据里面的图片保存到我们自己的服务器。这种情况有两种解决方案，一种是纯后端做，一种是前端来做。我分享一种前端来做的方案。

其实拉取数据进行填充的本质，就是不破坏我们原有的表单交互流程，前后端保持高度一致，避免多态。一般的交互是提交表单的时候提交上传图片，把上传后得到的文件 id 同表单数据一起保存。这个过程是比较顺畅的，前后端理解起来非常简单。但是，如果这里强行改变这个逻辑，为了兼容多态，后端支持传 url 字符串，实际上，这也会给前端带来比较大的处理量。因此，我们的目标是，利用图片 url 转化为本地的 File 再提交到后端，走一个简单的流程，只不过在拉取数据这一步做一个处理。

那么，怎么把外部图片转化为一个浏览器里面的 File 呢？

function getImageFile(src) {
    return new Promise((resolve, reject) => {
      const img = document.createElement('img');
      img.style.position = 'fixed';
      img.style.top = '-10000px';
      img.crossOrigin = 'anonymous';
      img.src = src;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);
        canvas.toBlob((blob) => {
          // @ts-ignore
          // eslint-disable-next-line no-param-reassign
          blob.lastModifiedDate = new Date();
          const name = src.split('/').pop();
          // @ts-ignore
          // eslint-disable-next-line no-param-reassign
          blob.name = name;
          const file = new File([blob], name, { type: blob.type });
          resolve(file);
        });
        document.body.removeChild(img);
      };
      img.onerror = (e) => {
        document.body.removeChild(img);
        reject(e);
      };
      document.body.appendChild(img);
    });
  }

这里用到了以下知识点：

• 由于是跨域的图片，所以不能直接通过 fetch 来得到 blob，于是我们利用 canvas 来加载远程图片，再利用 canvas 的接口来转化数据类型
• canvas 要能够 draw 远程图片，必须加上 crossOrigin = anonymous
• 通过 toBlob 之后得到 blob，再使用 new File([blob]) 就可以把 blob 转化为一个本地的文件，用在提交中
• 最后需要注意，提交文件需要使用 content-type: multipart/form-data 进行提交

通过这个处理，我们就可以在浏览器里面把外部图片转化为内部图片进行使用，这样就节省了后端去做类似回源CDN之类的建设。

在日常开发中，我们常常要自己启动一个server来进行本地调试，但是如果写死端口，就会导致端口冲突，怎么解决呢？

/* eslint-disable @typescript-eslint/no-require-imports */
const net = require('net');

function checkPortUsable(port) {
  return new Promise((resolve, reject) => {
    const server = net.createConnection({ port });
    server.on('connect', () => {
      server.end();
      reject(`Port ${port} is not available!`);
    });
    server.on('error', () => {
      resolve(port);
    });
  });
}

function randomNumByRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function findUsablePort(port, minPort = 10000, maxPort = 65536) {
  const retry = () => {
    const port = randomNumByRange(minPort, maxPort);
    return findUsablePort(port, minPort, maxPort);
  };
  return checkPortUsable(port)
    .then(() => port)
    .catch(retry);
}

module.exports = {
  findUsablePort,
  checkPortUsable,
};

具体使用的时候，调用findUsablePort即可：

findUsablePort(4000).then((port) => app.listen(port))

如果4000可用，就会直接用4000，否则就会使用一个随机端口。