perf: 去掉 jsx 里面的随机 key

Mereithhh · Sep 1, 2022 · 29fdb23 · 29fdb23
1 parent df5d308
commit 29fdb23
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 22 deletions.
diff --git a/packages/admin/src/pages/DataManage/tabs/Donate.jsx b/packages/admin/src/pages/DataManage/tabs/Donate.jsx
@@ -88,7 +88,6 @@ export default function () {
           }}
           recordCreatorProps={{
             position: 'bottom',
-            record: () => ({ key: Math.floor(Math.random() * 1000000) }),
           }}
           loading={false}
           columns={columns}
@@ -104,7 +103,6 @@ export default function () {
             type: 'multiple',
             editableKeys,
             onSave: async (rowKey, data, row) => {
-
               await updateDonate(data);
               actionRef?.current?.reload();
             },

diff --git a/packages/admin/src/pages/DataManage/tabs/Link.jsx b/packages/admin/src/pages/DataManage/tabs/Link.jsx
@@ -105,7 +105,6 @@ export default function () {
           }}
           recordCreatorProps={{
             position: 'bottom',
-            record: () => ({ key: Math.floor(Math.random() * 1000000) }),
           }}
           loading={false}
           columns={columns}

diff --git a/packages/admin/src/pages/DataManage/tabs/Menu.tsx b/packages/admin/src/pages/DataManage/tabs/Menu.tsx
@@ -77,7 +77,6 @@ export default function () {
           }}
           recordCreatorProps={{
             position: 'bottom',
-            record: () => ({ key: Math.floor(Math.random() * 1000000) }),
           }}
           loading={false}
           columns={columns}

diff --git a/packages/admin/src/pages/DataManage/tabs/Social.jsx b/packages/admin/src/pages/DataManage/tabs/Social.jsx
@@ -92,7 +92,6 @@ export default function () {
           }}
           recordCreatorProps={{
             position: 'bottom',
-            record: () => ({ key: Math.floor(Math.random() * 1000000) }),
           }}
           loading={false}
           columns={columns}

diff --git a/packages/website/components/PageNav/core.ts b/packages/website/components/PageNav/core.ts
@@ -178,7 +178,3 @@ export const calItemList = (props: PageNavProps) => {
   }
   return res;
 };
-
-export const randomKey = (item: PageItem) => {
-  return `${Math.floor(Math.random() * 100000)}-${item.href}`;
-};
diff --git a/packages/website/components/PageNav/render.tsx b/packages/website/components/PageNav/render.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
-import { CSSProperties, HTMLAttributes } from "react";
-import { PageItem, randomKey } from "./core";
+import { CSSProperties } from "react";
+import { PageItem } from "./core";
 const commonCls =
   "inline-flex justify-center items-center   transition-all text-gray-600";
 const btnCls =
@@ -13,7 +13,10 @@ const commonStyle: CSSProperties = {
 };
 const renderLink = (item: PageItem, isCur: boolean) => {
   return (
-    <Link href={item.href} key={randomKey(item)}>
+    <Link
+      href={item.href}
+      key={`LinkItem-${item.page}-${item.type}-${item.href}`}
+    >
       <a
         style={commonStyle}
         className={`${commonCls} ${btnCls}  ${
@@ -31,7 +34,7 @@ const renderBtn = (item: PageItem, disable: boolean, isNext: boolean) => {
   return (
     <Link
       href={item.href}
-      key={randomKey(item)}
+      key={`pagenav-btn-${item.page}-${item.href}-${isNext}`}
       // className="justify-center items-center "
     >
       <a
@@ -45,7 +48,10 @@ const renderBtn = (item: PageItem, disable: boolean, isNext: boolean) => {
 };
 const renderMore = (item: PageItem, isNext: boolean) => {
   return (
-    <Link href={item.href} key={randomKey(item)}>
+    <Link
+      href={item.href}
+      key={`pagenav-more-${item.page}-${item.href}-${isNext}`}
+    >
       <a style={commonStyle} className={`dark:pg-text-dark ${commonCls}`}>
         •••
       </a>

diff --git a/packages/website/components/PostCard/index.tsx b/packages/website/components/PostCard/index.tsx
@@ -245,7 +245,7 @@ export default function (props: {
           <div className="mt-4">
             <div className="text-sm  text-gray-500 flex justify-center space-x-2 select-none dark:text-dark">
               {props.tags.map((tag) => (
-                <div key={Math.floor(Math.random() * 100000)}>
+                <div key={`article-tag-${tag}`}>
                   <Link href={`/tag/${tag}`}>
                     <a className=" border-b border-white hover:border-gray-500 dark:border-dark dark:hover:border-gray-300 dark:hover:text-gray-300">{`#${tag}`}</a>
                   </Link>

diff --git a/packages/website/components/SocialCard/index.tsx b/packages/website/components/SocialCard/index.tsx
@@ -46,11 +46,11 @@ export default function (props: { socials: SocialItem[] }) {
 
   return (
     <div className="flex flex-col justify-center items-center">
-      {data.map((eachRow: SocialItem[]) => {
+      {data.map((eachRow: SocialItem[], index) => {
         return (
           <div
             className="w-full flex flex-row justify-between items-center"
-            key={Math.floor(Math.random() * 1000000)}
+            key={`socalRow-${index}`}
           >
             {renderEach(eachRow[0])}
             {renderEach(eachRow[1])}

diff --git a/packages/website/pages/tag.tsx b/packages/website/pages/tag.tsx
@@ -23,10 +23,7 @@ const TagPage = (props: TagPageProps) => {
         </div>
         <div className="flex flex-wrap mt-2">
           {props.tags.map((tag) => (
-            <Link
-              href={`/tag/${tag}`}
-              key={Math.floor(Math.random() * 1000000)}
-            >
+            <Link href={`/tag/${tag}`} key={`tag-${tag}`}>
               <a className="my-2 text-gray-500 block hover:text-gray-900 dark:hover:text-dark-hover transform hover:scale-110 transition-all mr-5 dark:text-dark-400 ">{`#${tag}`}</a>
             </Link>
           ))}

diff --git a/packages/website/pages/timeline.tsx b/packages/website/pages/timeline.tsx
@@ -32,7 +32,7 @@ const TimeLine = (props: TimeLinePageProps) => {
               return (
                 <TimeLineItem
                   defaultOpen={true}
-                  key={Math.floor(Math.random() * 1000000)}
+                  key={`timeline-dateitem-${eachDate}`}
                   date={eachDate}
                   articles={props.sortedArticles[eachDate]}
                 ></TimeLineItem>