优化

.vscode/react.code-snippets

@@ -0,0 +1,63 @@
+// Place your Client workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
+// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+// Placeholders with the same ids are connected.
+// Example:
+// "Print to console": {
+// 	"scope": "javascript,typescript",
+// 	"prefix": "log",
+// 	"body": [
+// 		"console.log('$1');",
+// 		"$2"
+// 	],
+// 	"description": "Log output to console"
+// }
+{
+  "React functional component": {
+    "scope": "typescriptreact",
+    "prefix": "rfc",
+    "body": [
+      "import React from 'react'",
+      "interface $1Props {",
+      "  $2",
+      "}",
+      "export const $1 = (props: $1Props) => {",
+      "  const { $3 } = props;",
+      "",
+      "  return null;",
+      "};",
+      "$1.displayName = '$1';"
+    ]
+  },
+  "React memo functional component": {
+    "scope": "typescriptreact",
+    "prefix": "rmc",
+    "body": [
+      "import React from 'react';",
+      "",
+      "interface ${1:Component}Props {",
+      "  $2",
+      "}",
+      "export const $1: React.FC<$1Props> = React.memo((props) => {",
+      "  const { $3 } = props;",
+      "",
+      "  return null;",
+      "});",
+      "$1.displayName = '$1';"
+    ]
+  },
+  "React memo functional component pure": {
+    "scope": "typescriptreact",
+    "prefix": "rmcp",
+    "body": [
+      "import React from 'react';",
+      "",
+      "export const ${1:Component}: React.FC = React.memo(() => {",
+      "  return null;",
+      "});",
+      "$1.displayName = '$1';"
+    ]
+  }
+}