生活已经被各种事情占据，好久没有写文章了，网站也没维护过了，近日真的是心里憋得慌，感觉必须得写下来，一来发泄下，二来，也许哪天再看到还能有啥新的思考或者启发吧，再不行也是一段回忆。

近来经济下行，对生活的冲击是真的很大，特别我这种求稳的。以前有父母照顾着，也不用自己赚钱，虽然生活算不上好，是不会有啥焦虑。但是现在，转眼房子就亏掉了首付，工作上也被腾讯云子公司开员节流了。虽然很快也是找到新的，可能对于很多人来说还不错的工作，但是，第一个和上家肯定是没得比，此外，在工作内容上，前面一个是做审核和封禁系统的，往大了说就是在维护现实中的稳定；而现在的工作，本质是为倒卖广告位服务，本身我也不太喜欢广告，这种服务自然也不会令我认同（尽管公司的氛围和管理上我很认同，并且以前也是会有一些相对实在的内容产出，但是毕竟最终都还是得想办法变现，不然没法存活下去），工作时间上，虽然错峰很好，但是也导致三餐永远不是在正点吃了。但总之，到这里还可以先做着

接下来，就是邮件我很喜欢的饭店（尽管卫生差点，但是便宜量大还好吃，在湖南大概很难迟到这么好的叉烧了）关了门，再到是楼下卖菜的店铺关了门，一时间生活的无力感完全出来了，尽管我不怎么挑吃，但是总归要吃的啊。

以上是物质上的折磨，但只有有朋友陪着，其实一切都能熬过去，可是好巧不巧，早年trove几乎占据了我除学习和工作外的全部。小时候的同学已经很难联系的上，大学同学关系好的本来也不多，并且要么也同样受着折磨，要么沉迷加班。尽管很早之前我就知道如果朋友之间关系是靠游戏为纽带是散得很快的，所以也是在想往游戏外走，尽管他们也陪我走过了疫情时一段我最迷茫的时期，但是要从游戏内走到游戏外还是很难啊。虽然也有几个关系特别好的，但是一个正在忙着搞竞赛；一个虽然被我拉着在玩别的，但我本来也就想随便玩玩但是他却挺上瘾了，并且虽然他人也很好，但是就感觉还是差点意思（在某些方面），感觉在生活和情感方面很难太多的共情；还有一个，我本认为和他时非常好的朋友，但是知道最近我希望他能陪着我才发现是我太想当然了，我才知道和他的关系有相当大的裂痕，也是我写这篇文章的原因；当然，我也还有一些其他朋友，他们也在这里给了我很多建议，但是情感也是复杂的，没有哪个朋友可以代替另一个朋友。

好了，终于进入正题了，不过思路被打断一次（昨天写到这里就到了上班的点了），外加情况又有一些变化（这个后面再说），有点不知道怎么写。总之，这个朋友我很喜欢（喜欢可以有很多种，不要想歪），他身上有很多东西是我很欣赏的，甚至可以说有些羡慕的。在很早之前他把游戏号给我的时候，我就认定我要和他做很好的朋友了。就像以前看到某个朋友的签名：“是我在你身上花的时间使你变得如此珍贵”一样，每天给他号打日常，以及一些有的没的，总之我认为我们的关系是相当好了，所以每次见到他都会想和他多说几句话，但是可能我的方式不太对，实际上着让他并不太舒服。尽管他仍然有和我玩，但是我还是能明显感觉到隔阂，尽管他会照顾我的感受，但是也会躲避和我在一起的时间。直到我情感爆发，我知道他肯定是有什么但是和我说不出来的，不过经过连续几次终于是说出来了，但是也几乎是感觉我们的关系已经到了冰点。

在这两天，我感觉自己就像一团行尸走肉一样，已经完全不知道自己要做啥。久久不能平静

好在，他总能遇到一些还不错的朋友，当然以及一些我朋友，然后我也才能知道，一方面我确实太过想当然，我觉得我和他关系好，觉得他会陪着我，但是并不是他的想法，我没有保持好距离；另一方面，实际上我欠他一个道歉。总之，我尽力按这些去改，然后也和他道歉。接下来就是静静等待了。

目前，他也是终于也是在昨天晚上回了一句话，释然了。随后我们进行了一些交流，当时整体还好，但毕竟作为认识这么久的人，自然是能察觉出异样，更何况实际上他有时候刻意区别对待我是完全能感觉出来的。

当然这中间还发生了很多事，我也还是有很多做的不对的地方，只能说希望最后还能好起来吧。感觉这事情处理不好可能会成为一个心病。

然后是近来回忆杀之后，我试图去找回一些初中时候的好友。可能是因为我的性格，很少有能一起出门玩的朋友，这样算下来，也就几个初中同学关系最好了（当然不是说其他朋友关系不好，只是相比之下，感觉会差点意思，没有那种能除了上课整天泡在一起的朋友了，虽然这个原因是多方面的）。我首先就想到了一个大学前清了好友，虽然人家确实是发了空间提醒（就如果还希望继续交往的就存下qq加回去），但是我当时太傲娇，觉得人家就不应该删我，或者至少私下也和我说。所以尽管我存了他的qq 当时就没加回去。现在想起来真是后悔死。找出他的qq赶紧加上，但是人家似乎已经并没有用qq了。但看介绍似乎层我弟校友了，于是联系我弟看能不能帮我找到一些联系方式。

接下来，我发现我还存在以前的手机号码，但是尝试之后发现他的几个手机号码都已经是不正确的了。不过我还想到了他当年的好基友，上大学时我都还和他见过面，之前在珠海失意时也找过他，不过那时候他忙，建议我找前面那个朋友（实际上我们当时几个关系都很好），我自然也没找到什么安慰，我这次自然没有首先想到找他。打开他的QQ，发现已经时很长时间没用过的痕迹了，心有不甘的同时，打开通讯录一看 我果然存过他的号码，只是这个十几年前的号码还管用吗？我试了下，还真管用。于是我又和他聊了两小时，虽然能看出来太会有一些戒备，但是还是相当热情的。他倒是相当乐观的，当然，他的朋友也很多很多，他也和我分享了很多他其他朋友的故事。总之这次还是用开心的。当然也要到了另一个同学的微信，就是他先知啊连微信都不怎么看，还是得花时间等。

未完待续，希望一切都能好起来吧

好久没写东西了，最近有些emo，来记录一下。

应该说一直一来，在没有啥啥事情做 也没啥玩的时候就会emo。但是自工作后，对未来感觉更加迷茫了。在学校那会儿，唯一要做的就是过好在学校的时光，未来找个好工作，然后就能过上自己想要的生活了。但是时间飞逝，转眼我就度过了初中、高中，甚至大学的时光。转眼我已经到了打造自己生活的时间了。首先的第一份工作，因为初中那会儿看着金山的宣传，让我对珠海有了很多的好感，同时，因为在长沙、深圳玩出门随便去哪坐车都要很长的时间的经历，相比之下，我自己家在一个小城市的市中心，虽然确实不如大城市丰富，但是应有的都有，出行方式通常只需要走路，远的也不过半小时公交基本丢够了，从而在对大城市又很强的排斥。

当这一天终于到来，毕业后的我便追随梦想来到珠海。但是，也只有亲身到达才会有所感受。到达珠海下车后，坐上公交，从海边拐过的时候，那景象，我真感觉我是来对了地方，休息时来这里坐坐可太惬意了。但是很快带入现实的是珠海的大，当时的公司是在金湾区的某处，我在第一辆公交上坐了一个半小时后，终于到达了目的地附近，地图显示还有一小段路需要换成其他公交，于是我准备走过去，可是当我打开地图步行导航后，发现还有十几公里，之前看着短，只不过是被前面的路映衬着短而已。于是无奈的反复确认后搭上后一趟公交然后再走了一小段终于到了。这里还是点名表扬珠海公交，便宜、覆盖范围广，发车频率虽然不能说很高，当时不至于让人等太久，毕竟不是每个线路都有那么大客流的，已经很好了。到达公司后，我便很快面对一个更加现实的问题——住宿。当然，公司提供了住宿，公司的住宿黄金说好不好 说坏不坏的，但是把就手上时不时会被大概是广东特有的虫子咬出很多红点。但是到这里也不过是普通的生活的感觉吧，工作压力不算大，开了个宽带，下班后玩玩游戏，混得一天是一天了。

然后第二年，跟我同一天入职的室友突然离职，加上公司新领导上任开始想尽办法再工资上进行剥削，我便终于开始思考人生和未来，也是工作后，第一次emo时间，同时还是最严重的一次。有时候就怀疑人生：同样是城市大，但是地铁不比这香；家里虽然累点，但是工资差不多，并且每天能回家啊；房价这么贵，我想想我的工资，因为缺少前期调研随口谈的（着甚至可能是我一生的败笔了），工资这么低，我怕是到老也没有个归宿。。。。有朋友来珠海，甚至同在金湾，但是仍然需要很长时间的路程以至不了了之。那一夜，我基本没睡着，可是我依然没有看到任何出路。。好在再学校时认识的朋友陪我度过了那段时间，并在一定程度上激励着我学习。然后在那一年年底，在多方面因素的影响下，我终于离开了那家公司。但是我首先是找了一个市区的工作了。但是生活依旧没有那么惬意，去海边散步的情景只有梦里才有。不过当时为了尽快找到下家也是没太做纠结，想法上是先在这家做着好就继续做，不好就继续在市区找（如果是在金湾的话 找市区的，一天只能面一个，还得在路上折腾死）。

出于疫情反复，在公司里住宿受气等多方面因素进一步推动下，于是我终于回到了长沙。这样离家更近了，同时我也是因为找到了更好的工作。在这之后很长一段时间我都是开心的。加上无论是现实里还是晚上认识的朋友，都有能说话的。直到过年在老家一直被我哥的小孩打扰。不过这段风波倒是过去了。生活很快又回归了正轨。

当时最近因为一些原因，又跟网上认识的一个朋友在一些方面闹掰了，突然少了个可以瞎吹水的人了，又感觉比较emo了。emo时间一直有，当时在学校基本很快就过了，工作后的emo时间，感觉真是影响时间好长啊

未完待续。。。

为了之后网站的更新，我着手做了一个自己的ui库。再之前测试打包上传到NPM然后再从其他项目中安装引入时，它似乎运行良好，所以我也就没太在意了。

可是，最近我更新了vue3版本之后，并且在另一个项目中实际使用时，它开始报错了，初步一看，似乎是因为我外面没有包提供Provide告知组件显示成什么样子的组件导致的，可是我有设置默认值啊。难道是vue-property-decorator的锅导致默认值没有拿到？于是回组件开发那边去掉外面包裹的组件进行尝试，发现是可以获取默认值的。

实在是没想到是怎么回事，于是我想既然你就是要有个Provide，那我这边也给你写那个组件好了。可是，当我自信的按下ctrl+s然后在浏览器上按下F5之后，页面彻底没了显示，同时控制台显示了一个这样的警告：

Invalid VNode type: Symbol()

对于这个问题，我毫无头绪，只能上网去找，可是找到的几个情况都跟我这个不一样，所以并不能解决问题。于是我把代码恢复到了之前的状态，准备详细查看，然后我从一大堆error中找到了这样一条不起眼的警告：

inject() can only be used inside setup() or functional components.

好家伙，这就去看vue-property-decorator那边Inject的实现：

export function Inject(
  options: InjectOptions = Object.create(null),
): VueDecorator {
  return createDecorator((componentOptions, key) => {
    const originalSetup = componentOptions.setup
    componentOptions.setup = (props, ctx) => {
      const result = originalSetup?.(props, ctx)
      const injectedValue = inject(options.from || key, options.default)
      return {
        ...result,
        [key]: injectedValue,
      }
    }
  })
}

嗯，确实是用setup做的啊，并没有什么问题。思来想去老久，没有想到啥答案。唯一能想到的是文档中提到了一句：

如果使用字符串 key 或非类型化 symbols，则需要显式声明注入值的类型：

const foo = inject<string>('foo') // string | undefined`

但是我这样修改之后，问题仍然没法解决。

过了一天之后，想到那么vue是怎么判断我是否是在setup中调用的呢，会不会因为是因为vue3现在还不完善的bug？正好整个警告的点上是有堆栈信息的，所以我也就直接点击进去打了个断点一看，它的代码如下：

function inject(key, defaultValue, treatDefaultAsFactory = false) {
    // fallback to `currentRenderingInstance` so that this can be called in
    // a functional component
    const instance = currentInstance || currentRenderingInstance;
    if (instance) {
       //...
    }
    else if ((process.env.NODE_ENV !== 'production')) {
        warn(`inject() can only be used inside setup() or functional components.`);
    }
}

好了，首先确定了这个判断肯定是在vue调用setup时对currentInstance赋值，调用render时对currentRenderingInstance赋值，然后通过这两个变量可以获取到当前从属的是哪个组件。可是问题来了啊，为什么这个值会变成空的呢？回前几步继续调试看看。似乎没啥问题，每个组件都正常赋值了，包括这个组件也一样。那好，我多跟踪几步看是啥时候丢的。

可是跟踪了一圈好像没有其他地方会导致currentInstance变为空啊。似乎又没头绪你，然后我再调试了一次。嗯，等等，怎么还跳了个文件呢？再一看上面打开的文件才发现，好家伙，我们的组件创建都是在项目所属的文件夹下的node_modules中，可是一到inject这里却跳到了node_modules/@thestarweb/ui/node_modules中，去看了下，这个文件真实存在。

嗯，破案了。同一个模块在不同的文件中，因为闭包，或者说模块独立性的问题，他们的变量当然是独立的。那怎么解呢？为什么npm会给我安装两个同样的模块呢。个人觉得npm可能是为了防止冲突，特别是版本冲突，所以，每个模块的运行依赖都会独立安装（这也是个麻烦事，所以cnpm在这里会用很多的快捷方式，而不是完全独立安装一份新的，但是我用的还是npm装的，不是说cnpm不好，而是这样可能会把问题掩盖过去，然后就一直没修复）。那么我要怎么操作才能告诉npm，安装我这个库就必须安装vue，并且这个vue跟项目还是得共享同一个呢？那就找找现成的别人的写法咯，比如ElementUI的package.json文件，然后就会发现有peerDependencies这么一个东西，它就是告诉npm，依赖这个包的项目必须要包含的依赖，并且这个依赖会在项目一级。这样就完事了？提交代码，github-action开始自动给我打包发布，然后我收到了运行出错的邮件，显示错误内容如下：

Error: node_modules/vue-class-component/dist/vue-class-component.d.ts(1,39): error TS2307: Cannot find module 'vue' or its corresponding type declarations.

嗯peerDependencies的依赖并不会主动安装啊，那么的话，就只能在devDependencies中也加入这个依赖，这样这个依赖就必定会安装了，ElementUI也是这么做的。虽然感觉还是有点怪怪的，但是至少，现在我这个库终于是真实可用的了。

因为堂姐提起珠海的事情，毕业也有机会，于是我到了珠海。原本有同学跟我报了同一家企业的，但是最后还是选择了其他地方。于是最终，我独自来了珠海。因为种种原因我没有从事本专业的工作，而是被安排做前端，但是显然我能做。

那个公司在金湾区，说实话，在来之前我从未想过我根本就不是在珠海工作一样。从城轨下车，然后打个的？一看费油100+实在是打扰了，于是老老实实坐上公交，经历一个半小时多以后，我到达换成地点，看着地图上资深一小段了 于是我打算步行前往，然后发现这一小端是在前面一大段的映衬下才显得短的，实际上它是非常长的。换上下一趟公交大约20分钟之后，我终于到了。之后说到市区玩的，也感觉我根本就不是在珠海，而是在珠海附近的一个县。

在那之后，基本上就是过得不好不坏，想着过完3年再说。可是很不巧，公司上任一个新领导，想搞点政绩，先动了一波绩效标准，然后又来一手请假的限制。于是开始有人离职，不过一次也就一两个。我当时也只是先这领导也太**了吧，然后想着准备是要做3年内就走的准备，可是年底问题就全部暴露出来了。在公司上班的，有相当一部分是外地的，过年总得回家啊，可是回家不仅票难买 并且由于公司位置的原因，可以赶得上的车又少了，不请假是不可能的，于是开始集体离职了，自然，我也走了。当然了，听说现在那边也意识到问题重新调整了政策。

当然，我这中间留了一些时间。出来之后，毕竟是过年前，找个更好的岂不是一件美事？然后注册招聘软件把意向地址改到了珠海市中心。然后很快就有公司联系我了。因为疫情原因，我这边面试之后就匆匆离开珠海也没做更多的考察了。回去之后有几个好机会，但是最后还是来了这边。

这边说实话，在技术上进步的空间不是很大，但是看在公司提供的住宿上还是留了下来（注：这里已经折掉了一段我的工资，本来我要求更多的工资的）。可是转正后没多久公司就安排宿舍调整，而原本的那套被作为女生宿舍了。而这边的宿舍，顶楼，面北，没装修。甚至很多小事都解决不好。而老总给出的方案是要我们自己可以出钱添置东西或者出去租房。对于这个结果，正常来说没啥问题，但是问题就在于这里已经相当于抵了我一定的工资了，而公司也不打算把这部分还给我，那么也就双是到这里就只能走人了。

我挺喜欢珠海这边的环境的，但是珠海市区的房价实在是跟工资不成比例。也只能就此告别了。

最近开始在学习React，在此之前只对vue有一定研究，虽然说框架的思路是相近的，但是实际上还是有一些差异的，所以在这记录一下。

既然要学习React，那么首先是打开它的官网看文档咯。打开React的文档之后，首先看到的是熟悉jsx的写法。想之前刚刚工作第一次接触vue的时候，看到jsx的时候就封蒙——为啥这样的东西还能在浏览器中执行？vue虽然平时都是通过模板，但是同样可以使用render函数，实际上在vue的项目中会把模板语法编译成render函数，并且在render中通过Babel插件可以实现jsx的写法。这个jsx实际上并不是js的东西，只不过会在打包过程中被相关插件（目前普遍用的Babel）转换成浏览器可以自行的代码，类似于createElement这种方式。而在浏览器中之所以能调试并且看到jsx的写法运行，那也是在source map的帮助下找到了执行语句被编译之前的样子。以前无论是js还是css等文件，在网络传输的时候，都可以删掉空格和换行符来减少体积，到后来甚至直接将长长的变量名字替换成只有一个字符的名字。但是这样一来，这份js代码虽然执行起来没有任何区别，甚至可能有更高的执行效率，但是对人来说已经完全不具备可读性了，这就如同被编译成二进制的C语言程序一样。庆幸的是出现了source map，通过它可以将这份被压缩的代码与原始的代码联系起来，这样就可以调试了。虽然不是所有浏览器都支持，但是万幸的是，这个标准是不影响在浏览器中执行的情况的，仅仅是在调试的时候才会需要这个东西，并且如今哪个开发人员会没有谷歌浏览器呢？随着前端技术的迅速发展，打包技术的出现，这一切几乎是翻天覆地的变化。这甚至意味着，可以甚至可以通过c的语法写一段代码，并将其打包成一段实现相同功能的js代码，然后浏览器执行的还是js代码，但是通过source map可以看到c的那段程序在执行，对付一个小小jsx当然也不是什么难事。

接下来的部分似乎没有啥问题，一直往下走，组件这里，可以看到React的组件可以是函数声明，也可以是类声明。函数声明的方式非常简洁，虽然vue没有，但是这并不难理解。类的声明方式是ES6语法，并且类从React.Component继承，使用构造函数的时候，记得调用父类构造函数。相比之下，vue的组件是一个对象，里面分类存储着参数信息（props）、数据（data）、方法（methods)和生命周期钩子等，当生成组件的时候，vue会对应处理各个部分，比如根据参数信息读取参数或设置默认值、方法使用bind(this)进行绑定，并添加到this上，用的时候都是通过this访问。而在React中参数会被作为类的参数传入，由React.Component的构造函数处理到this.props上，而自身状态可以根据实际情况放在this或者this.state上。但是vue中更新自身状态直接设置就好了，而React则需要调用setState才能追踪数据变化。原因在于vue使用了Object.defineProperty做数据劫持（vue3中将会使用反射，这更方便，不过其实我有点担心反射的性能），给data中字段的数据设置值的时候，会调用对应的set方法实现检测，同时，也正是如此，vue可以做到更加精细的更新。

接下来就是声明周期了，vue的生命周期钩子特别多，创建时会依次调用beforeCreate、created、beforeMount、mounted四个钩子，分别在组件创建和挂载前后触发。销毁时则有beforeDestroy和destroyed的两个钩子，更新时beforeUpdate和updated两个钩子，这些都是在几个关键的事件前后的钩子。此外，还有几个其他类型的钩子。而在React中，构造函数本身是一个很好的声明周期钩子，他对应着vue的beforeCreate和created。一般在组件挂在前的事情可以在组件创建做完，所以React中只有componentDidMount与vue的mounted对应（实际上是存在componentWillMount的，但是大概是没啥用所以准备取消了）。同样，销毁完的组件也没有任何可以访问的数据，所以React也只提供了componentWillUnmount与vue的beforeDestroy对应。在组件更新时，钩子有shouldComponentUpdate和componentDidUpdate，其中shouldComponentUpdate主要用于判断组件是否需要更新（虽然也有componentWillUpdate，但是同样即将过时。。。）。

然后再说说插槽，React支持插槽，但是在使用的时候还是有些区别的：不像vue插槽有专门的$solt，React中的插槽会被作为参数children传入，使用时使用this.props.children访问。匿名插槽在传入子组件的时候和vue一样处理，对于需要使用具名插槽的时候，则需要以js对象的格式写在子元素内部，同时用对象的方式访问this.props.children。

ref引用在React中也有很大区别。首先，ref引用需要React.createRef()来创建，同时，他是给原生dom组件用的。如果要访问子组件，React通常使用参数传入一个方法，然后子组件通过这个方法传入自身或相关方法给父组件保存后才可使用了。

好了，文档里面看到需要注意的基本都看了，接下来就是看实际项目了，不难发现ui用的是antd，然后查下它的文档，当然这些ui库都是差不多的，没有特别需要留意的地方，不过表格跟之前用的库还是有些区别，但是也不难。

然后看到了另一个东西——mobx，这个初一看是个状态管理，那就类似vuex。当然它确实是个状态管理，但是由于React本身是没有做数据劫持，mobx却是可以实现这一点，所以，在这里面可以实现诸如计算属性之类的操作。当然，，mobx通常配合装饰器语法使用，这又是个新概念，但是这显然是在java中的注解语法中获得了灵感（之前碰到的箭头函数，虽然有点像PHP中数组键值对的写法，但是显然灵感来自lambda表达式，格式和C#的lambda表达式完全一致，且java中也引入了非常相似的lambda表达式语法）。当然，有看到mobx做了一些顺序上的优化和其他处理，使得mobx性能更好，但是可能会带来一些问题，目前暂时没看明白具体有啥影响，但是碰到问题的话，这可能会是一个排查的点。

除了mobx，React还有个状态管理叫做Redux，因为暂时用不上没细看是否是有做数据劫持，不过这个状态管理的理念上，存储的状态是个快照，所以不应该直接改变状态，如果需要改变状态，就需要action。这类似于vuex的Mutation操作state，所有操作全部对应一个方法，通过参数进行区分。当然这是一个大致的使用，实际使用是可能会发现更多问题并需要注意更多细节。

参考链接

React文档：https://zh-hans.reactjs.org/docs/
具名插槽（React）：https://blog.csdn.net/u013611033/article/details/105566201