vault backup: 2023-02-15 10:28:54

.obsidian/app.json

@@ -3,5 +3,8 @@
   "livePreview": true,
   "promptDelete": false,
   "alwaysUpdateLinks": true,
-  "attachmentFolderPath": "as"
+  "attachmentFolderPath": "as",
+  "showLineNumber": false,
+  "tabSize": 2,
+  "useTab": false
 }

.obsidian/workspace.json

@@ -4,20 +4,20 @@
     "type": "split",
     "children": [
       {
-        "id": "2c715ba73c558592",
+        "id": "e42ecf977459e2d6",
         "type": "tabs",
         "children": [
           {
-            "id": "81e8c8c4990478f4",
+            "id": "43a8d11632bcb759",
             "type": "leaf",
             "state": {
               "type": "canvas",
               "state": {
                 "file": "探索与思考/Zustand 深入探索.canvas",
                 "viewState": {
-                  "x": -134.95034246377162,
-                  "y": 319.7091858770974,
-                  "zoom": -0.3333333333333333,
+                  "x": -570.5,
+                  "y": 171,
+                  "zoom": 0,
                   "snapToGrid": false
                 }
               }
@@ -108,7 +108,7 @@
       "markdown-importer:打开 Markdown 格式转换器": false
     }
   },
-  "active": "81e8c8c4990478f4",
+  "active": "43a8d11632bcb759",
   "lastOpenFiles": [
     "未命名.canvas",
     "探索与思考/Zustand 深入探索.canvas",

探索与思考/Zustand 深入探索.canvas

@@ -1,8 +1,8 @@
 {
 	"nodes":[
-		{"id":"70300943eedb4f0d","x":-903,"y":-556,"width":742,"height":182,"type":"text","text":"从 zustand/react.ts 文件开始，先看看 create 函数的代码实现。\n```tsx\nexport const create = (<T>(createState: StateCreator<T, [], []> | undefined) => {\n\t// creare 函数的核心是 createImpl 函数\n\tcreateState ? createImpl(createState) : createImpl) as Create\n}\n```"},
-		{"id":"8a1c4d4e899e9dad","x":-903,"y":-290,"width":974,"height":361,"type":"text","text":"从 createImpl 函数的代码中可以看到，调用了 Object.assign() 函数合并 useBoundStore 和 api 对象，这也是为什么，通过 create 创建返回的 Hook 可以在没有 React 的环境通过访问内部属性的方式执行。\n```tsx\nconst createImpl = <T>(createState: StateCreator<T, [], []>) => {\n\t// 判断 createState 是否函数，是则执行 createStore 函数， 否则直接赋值为 createState\n\tconst api = typeof createState === \"function\" ? createStore(createState) : createState;\n\tconst useBoundStore: any = (selector?: any, equalityFn?: any) => useStore(api, selector, equalityFn);\n\t// 合并 api 到 useBoundStore，实际上就是合并到 useStore 执行之后的返回值，因为函数也是对象\n\tObject.assign(useBoundStore, api);\n\t// 最后将 useBoundStore 返回，完成 store 创建\n\treturn useBoundStore;\n};\n```\ncreateImpl 函数中用到了了两个函数，分别是 createStore 和 useStore"},
-		{"id":"1c7f002a32cbff2b","x":-934,"y":210,"width":665,"height":464,"type":"text","text":"```tsx\nexport function useStore<TState, StateSlice>(\n  api: WithReact<StoreApi<TState>>,\n  selector: (state: TState) => StateSlice = api.getState as any,\n  equalityFn?: (a: StateSlice, b: StateSlice) => boolean\n) {\n\t// 自定义一个基于 useSyncExternalStoreWithSelector 的 Hook 并返回\n  const slice = useSyncExternalStoreWithSelector(\n    api.subscribe,\n    api.getState,\n    api.getServerState || api.getState,\n    selector,\n    equalityFn\n  );\n  useDebugValue(slice);\n  return slice;\n}\n```"}
+		{"id":"70300943eedb4f0d","x":-903,"y":-556,"width":742,"height":219,"type":"text","text":"## create\n从 zustand/react.ts 文件开始，先看看 create 函数的代码实现。\n```tsx\nexport const create = (<T>(createState: StateCreator<T, [], []> | undefined) => {\n\t// creare 函数的核心是 createImpl 函数\n\tcreateState ? createImpl(createState) : createImpl) as Create\n}\n```"},
+		{"id":"8a1c4d4e899e9dad","x":-903,"y":-248,"width":974,"height":400,"type":"text","text":"## createImpl\n从 createImpl 函数的代码中可以看到，调用了 Object.assign() 函数合并 useBoundStore 和 api 对象，这也是为什么，通过 create 创建返回的 Hook 可以在没有 React 的环境通过访问内部属性的方式执行。\n```tsx\nconst createImpl = <T>(createState: StateCreator<T, [], []>) => {\n\t// 判断 createState 是否函数，是则执行 createStore 函数， 否则直接赋值为 createState\n\tconst api = typeof createState === \"function\" ? createStore(createState) : createState;\n\tconst useBoundStore: any = (selector?: any, equalityFn?: any) => useStore(api, selector, equalityFn);\n\t// 合并 api 到 useBoundStore，实际上就是合并到 useStore 执行之后的返回值，因为函数也是对象\n\tObject.assign(useBoundStore, api);\n\t// 最后将 useBoundStore 返回，完成 store 创建\n\treturn useBoundStore;\n};\n```\ncreateImpl 函数中用到了了两个函数，分别是 createStore 和 useStore"},
+		{"id":"1c7f002a32cbff2b","x":-903,"y":218,"width":665,"height":464,"type":"text","text":"## useStore\n```tsx\nexport function useStore<TState, StateSlice>(\n\tapi: WithReact<StoreApi<TState>>,\n\tselector: (state: TState) => StateSlice = api.getState as any,\n\tequalityFn?: (a: StateSlice, b: StateSlice) => boolean\n) {\n\t// 自定义一个基于 useSyncExternalStoreWithSelector 的 Hook 并返回\n\tconst slice = useSyncExternalStoreWithSelector(\n\t\tapi.subscribe,\n\t\tapi.getState,\n\t\tapi.getServerState || api.getState,\n\t\tselector,equalityFn\n\t);\n\tuseDebugValue(slice);\n\treturn slice;\n}\n```"}
 	],
 	"edges":[
 		{"id":"1b4e70ab90f0b813","fromNode":"70300943eedb4f0d","fromSide":"bottom","toNode":"8a1c4d4e899e9dad","toSide":"top"}