vault backup: 2022-03-29 23:45:56

.obsidian/app.json

@@ -0,0 +1,6 @@
+{
+  "legacyEditor": false,
+  "livePreview": true,
+  "promptDelete": false,
+  "alwaysUpdateLinks": true
+}

.obsidian/appearance.json

@@ -0,0 +1,3 @@
+{
+  "baseFontSize": 16
+}

.obsidian/community-plugins.json

@@ -0,0 +1,3 @@
+[
+  "obsidian-git"
+]

.obsidian/core-plugins.json

@@ -0,0 +1,15 @@
+[
+  "file-explorer",
+  "global-search",
+  "switcher",
+  "graph",
+  "backlink",
+  "page-preview",
+  "note-composer",
+  "command-palette",
+  "editor-status",
+  "markdown-importer",
+  "word-count",
+  "open-with-default-app",
+  "file-recovery"
+]

.obsidian/graph.json

@@ -0,0 +1,22 @@
+{
+  "collapse-filter": true,
+  "search": "",
+  "showTags": false,
+  "showAttachments": false,
+  "hideUnresolved": false,
+  "showOrphans": true,
+  "collapse-color-groups": true,
+  "colorGroups": [],
+  "collapse-display": true,
+  "showArrow": false,
+  "textFadeMultiplier": 0,
+  "nodeSizeMultiplier": 1,
+  "lineSizeMultiplier": 1,
+  "collapse-forces": true,
+  "centerStrength": 0.518713248970312,
+  "repelStrength": 10,
+  "linkStrength": 1,
+  "linkDistance": 250,
+  "scale": 1,
+  "close": false
+}

.obsidian/hotkeys.json

@@ -0,0 +1 @@
+{}

.obsidian/plugins/obsidian-git/data.json

@@ -0,0 +1,20 @@
+{
+  "commitMessage": "vault backup: {{date}}",
+  "autoCommitMessage": "vault backup: {{date}}",
+  "commitDateFormat": "YYYY-MM-DD HH:mm:ss",
+  "autoSaveInterval": 1,
+  "autoPullInterval": 0,
+  "autoPullOnBoot": false,
+  "disablePush": false,
+  "pullBeforePush": true,
+  "disablePopups": false,
+  "listChangedFilesInMessageBody": false,
+  "showStatusBar": true,
+  "updateSubmodules": false,
+  "syncMethod": "merge",
+  "gitPath": "",
+  "customMessageOnAutoBackup": false,
+  "autoBackupAfterFileChange": false,
+  "treeStructure": false,
+  "refreshSourceControl": true
+}

.obsidian/plugins/obsidian-git/manifest.json

@@ -0,0 +1,8 @@
+{
+    "id": "obsidian-git",
+    "name": "Obsidian Git",
+    "description": "Backup your vault with git.",
+    "isDesktopOnly": true,
+    "js": "main.js",
+    "version": "1.24.1"
+}

.obsidian/plugins/obsidian-git/styles.css

@@ -0,0 +1,413 @@
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.loading > svg {
+  animation: 2s linear infinite loading;
+  transform-origin: 50% 50%;
+  display: inline-block;
+}
+
+.obsidian-git-center {
+  margin: auto;
+  width: 50%;
+}
+
+.tooltip.mod-left {
+  overflow-wrap: break-word;
+}
+
+.tooltip.mod-right {
+  overflow-wrap: break-word;
+}
+
+.obsidian-git-shortcuts {
+  margin: 10px;
+}
+
+.diff-err {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.diff-err-sign {
+  font-size: 2em;
+}
+
+.workspace-leaf-content[data-type="diff-view"] .d2h-d-none {
+  display: none;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-wrapper {
+  text-align: left;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-header {
+  background-color: var(--background-primary);
+  border-bottom: 1px solid var(--interactive-accent);
+  font-family: var(--font-monospace);
+  height: 35px;
+  padding: 5px 10px;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-header,
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-stats {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-stats {
+  font-size: 14px;
+  margin-left: auto;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-lines-added {
+  border: 1px solid #b4e2b4;
+  border-radius: 5px 0 0 5px;
+  color: #399839;
+  padding: 2px;
+  text-align: right;
+  vertical-align: middle;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-lines-deleted {
+  border: 1px solid #e9aeae;
+  border-radius: 0 5px 5px 0;
+  color: #c33;
+  margin-left: 1px;
+  padding: 2px;
+  text-align: left;
+  vertical-align: middle;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-name-wrapper {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 15px;
+  width: 100%;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-name {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-wrapper {
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 3px;
+  margin-bottom: 1em;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-collapse {
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 3px;
+  cursor: pointer;
+  display: none;
+  font-size: 12px;
+  justify-content: flex-end;
+  padding: 4px 8px;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-collapse.d2h-selected {
+  background-color: #c8e1ff;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-collapse-input {
+  margin: 0 4px 0 0;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-diff-table {
+  border-collapse: collapse;
+  font-family: Menlo, Consolas, monospace;
+  font-size: 13px;
+  width: 100%;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-files-diff {
+  width: 100%;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-diff {
+  overflow-y: hidden;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-side-diff {
+  display: inline-block;
+  margin-bottom: -8px;
+  margin-right: -4px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  width: 50%;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-line {
+  padding: 0 8em;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-line,
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-side-line {
+  display: inline-block;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  width: 100%;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-side-line {
+  padding: 0 4.5em;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-line-ctn {
+  word-wrap: normal;
+  background: none;
+  display: inline-block;
+  padding: 0;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  vertical-align: middle;
+  white-space: pre;
+  width: 100%;
+}
+.theme-light .workspace-leaf-content[data-type="diff-view"] .d2h-code-line del,
+.theme-light
+  .workspace-leaf-content[data-type="diff-view"]
+  .d2h-code-side-line
+  del {
+  background-color: #ffb6ba;
+}
+.theme-dark .workspace-leaf-content[data-type="diff-view"] .d2h-code-line del,
+.theme-dark
+  .workspace-leaf-content[data-type="diff-view"]
+  .d2h-code-side-line
+  del {
+  background-color: #8d232881;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-line del,
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-line ins,
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-side-line del,
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-side-line ins {
+  border-radius: 0.2em;
+  display: inline-block;
+  margin-top: -1px;
+  text-decoration: none;
+  vertical-align: middle;
+}
+.theme-light .workspace-leaf-content[data-type="diff-view"] .d2h-code-line ins,
+.theme-light
+  .workspace-leaf-content[data-type="diff-view"]
+  .d2h-code-side-line
+  ins {
+  background-color: #97f295;
+  text-align: left;
+}
+.theme-dark .workspace-leaf-content[data-type="diff-view"] .d2h-code-line ins,
+.theme-dark
+  .workspace-leaf-content[data-type="diff-view"]
+  .d2h-code-side-line
+  ins {
+  background-color: #1d921996;
+  text-align: left;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-line-prefix {
+  word-wrap: normal;
+  background: none;
+  display: inline;
+  padding: 0;
+  white-space: pre;
+}
+.workspace-leaf-content[data-type="diff-view"] .line-num1 {
+  float: left;
+}
+.workspace-leaf-content[data-type="diff-view"] .line-num1,
+.workspace-leaf-content[data-type="diff-view"] .line-num2 {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0 0.5em;
+  text-overflow: ellipsis;
+  width: 3.5em;
+}
+.workspace-leaf-content[data-type="diff-view"] .line-num2 {
+  float: right;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-linenumber {
+  background-color: var(--background-primary);
+  border: solid var(--background-modifier-border);
+  border-width: 0 1px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  text-align: right;
+  width: 7.5em;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-linenumber:after {
+  content: "\200b";
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-side-linenumber {
+  background-color: var(--background-primary);
+  border: solid var(--background-modifier-border);
+  border-width: 0 1px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  padding: 0 0.5em;
+  position: absolute;
+  text-align: right;
+  text-overflow: ellipsis;
+  width: 4em;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-side-linenumber:after {
+  content: "\200b";
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-side-emptyplaceholder,
+.workspace-leaf-content[data-type="diff-view"] .d2h-emptyplaceholder {
+  background-color: var(--background-primary);
+  border-color: var(--background-modifier-border);
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-line-prefix,
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-linenumber,
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-side-linenumber,
+.workspace-leaf-content[data-type="diff-view"] .d2h-emptyplaceholder {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-linenumber,
+.workspace-leaf-content[data-type="diff-view"] .d2h-code-side-linenumber {
+  direction: rtl;
+}
+.theme-light .workspace-leaf-content[data-type="diff-view"] .d2h-del {
+  background-color: #fee8e9;
+  border-color: #e9aeae;
+}
+.theme-light .workspace-leaf-content[data-type="diff-view"] .d2h-ins {
+  background-color: #dfd;
+  border-color: #b4e2b4;
+}
+.theme-dark .workspace-leaf-content[data-type="diff-view"] .d2h-del {
+  background-color: #521b1d83;
+  border-color: #691d1d73;
+}
+.theme-dark .workspace-leaf-content[data-type="diff-view"] .d2h-ins {
+  background-color: rgba(30, 71, 30, 0.5);
+  border-color: #13501381;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-info {
+  background-color: var(--background-primary);
+  border-color: var(--background-modifier-border);
+  color: var(--text-normal);
+}
+.theme-light
+  .workspace-leaf-content[data-type="diff-view"]
+  .d2h-file-diff
+  .d2h-del.d2h-change {
+  background-color: #fdf2d0;
+}
+.theme-dark
+  .workspace-leaf-content[data-type="diff-view"]
+  .d2h-file-diff
+  .d2h-del.d2h-change {
+  background-color: #55492480;
+}
+.theme-light
+  .workspace-leaf-content[data-type="diff-view"]
+  .d2h-file-diff
+  .d2h-ins.d2h-change {
+  background-color: #ded;
+}
+.theme-dark
+  .workspace-leaf-content[data-type="diff-view"]
+  .d2h-file-diff
+  .d2h-ins.d2h-change {
+  background-color: rgba(37, 78, 37, 0.418);
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-list-wrapper {
+  margin-bottom: 10px;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-list-wrapper a {
+  color: #3572b0;
+  text-decoration: none;
+}
+.workspace-leaf-content[data-type="diff-view"]
+  .d2h-file-list-wrapper
+  a:visited {
+  color: #3572b0;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-list-header {
+  text-align: left;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-list-title {
+  font-weight: 700;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-list-line {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  text-align: left;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-list {
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-list > li {
+  border-bottom: 1px solid var(--background-modifier-border);
+  margin: 0;
+  padding: 5px 10px;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-list > li:last-child {
+  border-bottom: none;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-file-switch {
+  cursor: pointer;
+  display: none;
+  font-size: 10px;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-icon {
+  fill: currentColor;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-deleted {
+  color: #c33;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-added {
+  color: #399839;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-changed {
+  color: #d0b44c;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-moved {
+  color: #3572b0;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-tag {
+  background-color: var(--background-primary);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 10px;
+  margin-left: 5px;
+  padding: 0 2px;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-deleted-tag {
+  border: 2px solid #c33;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-added-tag {
+  border: 1px solid #399839;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-changed-tag {
+  border: 1px solid #d0b44c;
+}
+.workspace-leaf-content[data-type="diff-view"] .d2h-moved-tag {
+  border: 1px solid #3572b0;
+}

.obsidian/workspace

@@ -9,7 +9,7 @@
         "state": {
           "type": "markdown",
           "state": {
-            "file": "随时随地/简单的 React 思考 - useMemo.md",
+            "file": "随时随地/简单的 React 思考 - Fiber 创建.md",
             "mode": "source",
             "source": false
           }
@@ -53,7 +53,7 @@
       }
     ],
     "direction": "horizontal",
-    "width": 300
+    "width": 325
   },
   "right": {
     "id": "70ba7477ebc2c174",
@@ -69,7 +69,7 @@
             "state": {
               "type": "backlink",
               "state": {
-                "file": "随时随地/简单的 React 思考 - useMemo.md",
+                "file": "随时随地/简单的 React 思考 - Fiber 创建.md",
                 "collapseAll": false,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -89,15 +89,15 @@
   },
   "active": "1508f46ea2481b37",
   "lastOpenFiles": [
-    "随时随地/简单的 React 思考 - useMemo.md",
+    "随时随地/简单的 React 思考 - Fiber 创建.md",
+    "随时随地/简单的 React 思考 - Context.md",
+    "随时随地/简单的 React 思考 - 状态管理工具.md",
+    "随时随地/useEffect 和 Debounce.md",
     "随时随地/React Hooks 的碎片记录.md",
     "随时随地/奇怪的疑惑.md",
     "随时随地/简单的 React 思考 - useReducer.md",
-    "随时随地/useEffect 和 Debounce.md",
-    "1648111615(1) 5.png.md",
-    "1648111615(1).png",
-    "1648111615(1) 5.png",
-    "随时随地/简单的 React 思考 - Hook.md",
-    "随时随地/简单的 React 思考 - Fiber 创建.md"
+    "随时随地/简单的 React 思考 - useCallback和useMemo.md",
+    "随时随地/简单的 React 思考 - useMemo.md",
+    "1648111615(1) 5.png.md"
   ]
 }

随时随地/useEffect 和 Debounce.md

@@ -1,8 +1,11 @@
 # useEffect 和 Debounce
 最近在学习 React + TypeScript 仿 Jira 项目，不得不说这个课程是真的好，可能因为比较新的缘故，老师在一些库的选择上都会比较新，最最让我惊喜的是这门课程还用到了ReactRoute6，正好苦于网上没有清晰明了的教程，这不就来了。
+
 在课程里面，有一个自定义 Hook 的小示例，就是用 React Hook 实现 Debounce 的功能，Debounce 的功能要求很简单，就是通过一些手段控制接口的请求次数，用定时器实现的Debounce 就是一个很典型的例子，课程里边的 Debounce Hook 也是使用定时器的方式实现，不过在编写这个自定义 Hook 的时候，用到了 React 自带的 useEffetc 这个 Hook，这不免让我有些好奇，这个Hook是怎么个原理，能够做些简单的逻辑就实现 Debounce 的呢？
 首先先来捋清 useEffetc 这个 Hook 的参数和含义，useEffetc 第一个参数接收一个回调函数，第二个参数是一个数组，在数组中传入的值会作为函数的执行条件，什么意思呢，就是说第二个参数的值会在下一次 useEffect 执行的时候被比较，如果每个值都相同，那么 useEffect 就不执行，如果值发生了变化，useEffetc 就会被执行，这个数组还可以是一个空数组，表示 useEffect 只在函数组件初始化的时候执行。
+
 接下来就是有意思的地方了，还记得前面说到的第一个参数回调函数吗？这个回调函数可以 return 一个函数，这个被 return 的函数，会在下一次 useEffect 被执行之前执行，用于清除上一个函数的副作用，至于什么是副作用，这个其实是函数式编程专有的名词，在这里不展开讲，以后写个新的文章讨论什么是函数式编程，到这里，就已经把 useEffect 的基本功能给说清楚了 ，这个时候可以回过头来看，useEffect 的执行时机是什么时候，默认情况下，useEffect 会在每轮的渲染结束之后执行，并且 React 为了保证严格的 render -> useEffect 顺序，所以在下一次 render 执行之前一定会执行一次 useEffect，那么我在 useEffect 的第一个参数回调函数中放一个定时器，并在 return 中返回一个清除定时器的函数，那么我不就可以在每一次 render 执行之后 useEffect 执行之前清除上一次在 useEffect 中存放的定时器了吗？这里为了保证每一次都会有 render 触发 useEffect，还需要用到 useState，这样不就是很典型的 Debounce 实现思路吗？
+
 具体代码如下图
 
 ![[useEffect 和 Debounce.png]]

随时随地/简单的 React 思考 - useCallback.md

@@ -1 +0,0 @@
-# 简单的 React 思考: useCallback

随时随地/简单的 React 思考 - useCallback和useMemo.md

@@ -0,0 +1,29 @@
+# 简单的 React 思考: useCallback / useMemo
+useCallback 和 useMemo 都是 React 里边比较简单的 Hook，先看看官网对于这两个 Hook 的介绍。
+
+```javascript
+// useCallback
+const memoizedCallback = useCallback(
+  () => { doSomething(a, b) },
+  [a, b]
+);
+
+// useMemo
+const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
+```
+
+useCallback 会返回一个 memoized 函数，而 useMemo 会返回一个 memoized 值
+他们的第二个参数接受一个依赖项数组，回调函数只会在依赖项发生改变的时候才会更新，它的比较算法和 Object.is 的一致，即引用对比。
+他们都是作为性能优化的一个方法提供，他们的不同之处在于，useCallback 返回一个函数，而useMemo 会返回一个值，这个值由传入 useMemo 的回调函数在渲染期间执行。
+
+上 React 源码，结合[[简单的 React 思考 - Fiber 创建]]一起看
+
+useCallback
+![[useCallback.png]]
+
+useCallback 在 mount 和 update 阶段都会对 deps 也就是依赖项做简单的 underfined 判断，在 update 的时候会用 areHookInputsEqual 对依赖项做对比，如果依赖项没有变就返回 memorizedState 中存储的回调函数
+
+useMemo
+![[useMemo.png]]
+
+和 useCallback 相同，useMemo 也会在 mount 和 update 的时候对 deps 依赖项参数做简单的underfined 判断，但是与 useCallback 在 mounte 阶段直接将 函数和 deps 一起存入 memoizedState 不同，useMemo 会执行传入的回调函数，并将函数的返回值和 deps 一起存入memoizedState，在 update 阶段的处理和 useCallback 几乎是一样的。

随时随地/简单的 React 思考 - useMemo.md

@@ -1 +0,0 @@
-# 简单的 React 思考 - useMemo