React 项目的初始化搭建

由于手动搭建 React 环境过于麻烦，要的依赖相当多，需要花费大量时间在配置上，所以就直接使用 React 官方提供的 create-react-app 脚手架工具。

脚手架的使用有两种方法，一种是先用 npm 或 yarn 全局安装 create-react-app 然后再create-react-app my_app，另一种是使用npx create-react-app my_app这样就不用提前安装好 create-react-app 工具。

Github 仓库地址：https://github.com/yydrowz3/notebook_app

之前在图书馆里找到了一本 React.js 实战，本来也正好在学习，就想着先借回来看看。

Icarus主题使用了Bulma这个CSS框架，所以写文章的时候可以利用Bulma来实现一些神奇的效果

大量参考了这篇文章

由于很久没有写博客了，很多Markdown的写法已经忘得差不多了。再加上最近又发现自己记忆力下降非常严重，学习新的东西不做点笔记实在是不行了，做笔记的话看了一下还是直接用md写比较方便，毕竟md用熟了以后玩GitHub的时候也能稍微写点像模像样的README。

所以在这里记录一下方便我以后要用了但想不起来时有地方找。

需要事件绑定的原因

首先说明一下，React生成出来的事件，里面的this并不是指向自身的，这是Javascript语法的规定，是不可避免的。

比如<button onClick={this.plus}>plus</button>中，plus上的this其实是绑在了window上的，也就是事件响应时的上下文，并不是当前的组件实例。说简单点，就是当触发该事件时，是在浏览器的总的一个环境里的，所以这时事件里如果用到this的话，this指向的其实是window。

但是这样会使得事件的使用和处理变得相当麻烦，所以这时就需要将事件内的this指针转移到事件的作用域上。

简单看一下bind()函数

调用 bind() 会创建一个新的函数，当这个新函数被调用时，函数内部的this会被置为参数提供的值。

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

var example = {
    value: 114514,
    getValue: function() {
        return this.value;	//这里使用了this
    }
}

var unbindThis = example.getvalue;
console.log(unbindThis()); // 调用的对象是window，所以里面的this.value => window.value
// output: undefined

var bindThis = unbindThis.bind(example);
console.log(bindThis()); // 但是bind之后，会将this的值置为example提供的值
// output: 114514

最近在学Vim，确实是一个非常好用的编辑器，因为所有的操作都是通过键盘来实现的。
以前使用其他编辑器的时候经常会不断使用鼠标来完成一些操作，这就导致了右手一直在键盘和鼠标之间挪动，而且每次从鼠标挪回键盘时都会出现右手不知道放在键盘哪个位置的情况，所以就要么使劲摸j键上面的那个点，要么就是眼睛看一下键盘。虽然都不是什么大问题，但是频繁的变化真的会打乱思维。所以现在决定要好好学一下Vim。

正因为Vim的操作都可以通过键盘实现，所以Vim的快捷键非常多，在初学的过程中就记了很多基本的快捷键，现在在博客上分享一下，也方便我以后想用的时候速查。

Normal Mode

指针移动

基础移动

hjkl -> 左下上右

横向移动

w -> 移到下一个单词的开头，以空格和特殊字符划分
W -> 移到下一个单词的开头，以空格划分
b -> 上一个…
B -> 上一个…

e -> 移到下一个单词的结尾，以空格和特殊字符划分
Ee -> 移到下一个单词的结尾，以空格划分
ge -> 上一个…
gE -> 上一个…

f + … -> 移到本行下一个输入的字符上
F + … -> 移到本行上一个输入的字符上
t + … -> 移到本行下一个输入的字符前
T + … -> 移到本行上一个输入的字符前

(f + …)搜索后
; -> 重复搜索下一个
, -> 重复搜索上一个

0 -> 移到当前行第一个字符
^ -> 移到当前行第一个非空白字符
$ -> 移到当前行最后一个字符
g_ -> 移到当前行最后一个非空白字符

一直觉得之前的博客不太满意，不管是UI还是整体的风格，总感觉看着太单调了。
最近没什么事就想着把博客重新搞一下，在这里记录一下更新博客的过程。

其实想换的时候还是想了一下要不要换个Word Press之类的用用，但是又想到自己假期的时候接触了一下前端的东西，自己还是挺感兴趣的，HTML、CSS、JS，虽然不至于学得很精通，但是自己玩玩还是可以的。所以就想着还是用这种纯前端的博客吧。毕竟没有后台源码看起来也相对简单一点。

购买云服务器

要搞这种纯前端的博客，其实根本用不到服务器，一个对象存储基本上就够了。

但是我对Linux比较感兴趣，自己电脑配置不高，上虚拟机太耗资源了，而且用起来不太方便，特别是我这种一会笔记本上玩玩，一会又台式机上玩玩的，所以还是买个云服务器，只要有网就直接ssh连上去玩就行。

这个不知道从哪个群里下来的 txt 文件已经在我的桌面上呆了快半年了，强迫症看着难受，但是说删了吧，看看里面的内容，虽然乱但是还是能看出点东西的，所以就想着先扔到博客上吧，这样看着也方便。

再次声明一下，这是二爹写的，我只是从群里搞来的。

  简化篇

【Aqours】 恋になりたい AQUARIUM ,HAPPY PARTY TRAIN
【缪斯】 Snow halation

【天晴れ!原宿 / Appare 】 キミだけのワンダーランド
【FES☆TIVE 】 OIDEMASE!!極楽
【ベイビーレイズ JAPAN 】 夜明け Brand New Days
【真っ白なキャンバス 】 Shout
雷蛇（only the railgun）
哈姆太郎
天体驱动 (Astrogation)
电波蛇（over the future）
【ポポロコネクト】 勇気がたりない,ねむたいパンク
【プランクスターズ 】 MACH DRIVE TIME
【偶想 drop】 Go su,Level, Painfully violent
【Nilkly 】 Rainy dance,Asthma，The Edge of Goodbye,GIGABITE

最近开始学习并试着用 vim 了，因为这个编辑器完全可以按照自己的想法配置，对于配置的过程我还是比较有兴趣的。

因为每次换设备都要重新配置太麻烦了，在这里存一下我的 NeoVim 的配置文件，下次需要到别的电脑上用 vim 的时候直接来这里找配置就行了。

只是一些基础的设置，编辑器的基本外观还有改的键位等，插件什么的还没有完全适应，所以插件部分等之后再修改。

主文件

首先是 ～/.config/nvim/init.vim
这是 nvim 的配置文件，但是我想把配置分成三个部分，基础、键位、插件。这个文件主要就是看前两行怎么引入其他文件

由于在 2021 年还在使用 128G 硬盘的笔记本实在头疼，决定给这台老古董换一下硬盘。其实去年就想换了，因为每次用着用着就提示硬盘容量不足，然后到处清理，导致正在做的事思路一下子被打断，就在考虑换一下硬盘。可惜拖延症本症是在是行动力不足，就拖到了现在。。。

换硬盘这件事还是做了不少功课的，一开始还在想能不能换，搜了很多发现我这台笔电是最后一个可以换硬盘的版本，后面出的机器硬盘都焊在板子上了，这点还是比较幸运的。

然后就是看硬盘了，官方的硬盘标价太离谱了，搜了一下能换哪种硬盘。还好虽然接口不同，但是淘宝上有卖转接头，而且看了很多大佬换硬盘都是用的这种方式，也没什么严重的问题。于是我就决定也这样搞。

最终敲定硬盘买的是 Samsung 的 970EvoPlus，因为本来的硬盘就是三星的颗粒，理论上稳定性兼容性什么的会好一点，而且看了大部分的教程用的都是这块硬盘。（其实是 970Evo，去年想换的时候看了一下这块硬盘停产了，然后又有人说什么 970EvoPlus 有问题，会不识别什么的，于是就放弃换了。）
最近就好好研究了一下这玩意，其实之前那些人说的没错，确实是会有这个问题，但是那都是 2019 年的事了，其实那只是当时的固件有问题才导致的，而且只要刷一下固件，更新一下就能解决问题。看的视频的那时候三星还没有给出解决方案，20 年年初才放出的新固件。所以还是被过时教程坑了一把，担心了很多没有的事。现在出厂的硬盘都是默认是新的固件，完全不会有不能用的问题。

时隔三个月（上次更换了电池）再次拆开背板，这样的工业设计确实没话说。