1.useMemo( )
在 React 中，useMemo 是一個 Hook，用于記憶計算結果，只有當依賴項之一發生變化時，才會重新計算。這有助于避免不必要的計算和渲染，從而提高應用程序的性能。
基本語法如下：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
在這個例子中，computeExpensiveValue 是一個可能很昂貴的計算函數，它依賴于參數 a 和 b。useMemo 的第一個參數是一個函數，該函數在組件首次渲染時執行，并返回想要記憶的值。第二個參數是一個數組，包含了這個函數的依賴項。只有當數組中的任何值發生變化時，computeExpensiveValue 函數才會重新執行。
useMemo 特別有用在處理復雜計算、大型對象或數組時，它可以防止不必要的重復計算，從而節省性能。
例如，假設你有一個計算兩個數相加的函數，并且你想要在組件中記憶這個結果：
import React, { useState, useMemo } from 'react';function MyComponent({ initialNumber }) {const [number, setNumber] = useState(initialNumber);const [number2, setNumber2] = useState(initialNumber + 1);const sum = useMemo(() => number + number2, [number, number2]);return (<div><p>Number: {number}</p><p>Number2: {number2}</p><p>Sum: {sum}</p><button onClick={() => setNumber(number + 1)}>Increment Number</button><button onClick={() => setNumber2(number2 + 1)}>Increment Number2</button></div>);
}
在這個例子中，sum 是通過 useMemo 記憶的，它只有在 number 或 number2 發生變化時才會重新計算。這樣，只要 number 和 number2 的值保持不變，sum 的值就不會改變，從而節省了性能。
useMemo 是一個強大的性能優化工具，但使用時需要謹慎，因為它可能會隱藏潛在的性能問題，使代碼更難維護。在決定使用 useMemo 之前，最好先考慮是否真的需要它。
const subMit = useMemo(()=>{return dataValue?.map(()=>{return { data };});},[ date ]);2. :global{? }
在CSS中，:global 偽類用于選擇器匹配文檔中的所有元素，而不考慮它們是否位于一個特定的作用域內。這通常用于在CSS中引入外部的CSS文件或定義全局樣式。
使用 :global 偽類，你可以確保選擇器不會與當前組件或作用域內的任何本地選擇器沖突。這對于使用CSS預處理器或模塊化CSS時非常有用，因為它可以幫助避免命名空間的沖突。
下面是一個使用 :global 偽類的例子：
/* 在組件內部使用:global來引入全局樣式 */
.global-class {color: red;
}/* 或者在組件外部定義全局樣式 */
:global .global-class {color: blue;
}//局部作用
.bankenName{:global{.ant-divider-horizontal{font-size:16px !important;}}
}在這個例子中，.global-class 是一個全局定義的類，它不會與組件內部定義的相同類名產生沖突。.global-class 會選擇文檔中的所有具有該類名的元素，并應用藍色文字樣式。
請注意，:global 偽類在不同的CSS處理器和預處理器中可能有不同的支持程度。在Sass中，你可以使用 @global 指令來實現相同的功能。
在 CSS Modules 中，通常情況下，樣式是局部作用域的，即只應用于特定的組件或模塊。但有時你可能需要定義一些全局樣式，例如重置默認樣式或設置全局主題。這時，可以使用 :global{ } 來定義全局樣式規則。
3.自定義函數方法
在一個頁面定義多個函數方法，在另一個頁面調用。
//自定義組件的頁面，可以定義多個組件，靈活調用
export const skipToElement = (elementId) => {const element = document.getElementById(elementId);if (element) {element.scrollIntoView({ block: 'start', behavior: 'smooth' });}
};export const routes = {homePage: {label: <div>首頁</div>,key: 1,neme: 'home',Children: [{ key: value }, { key: value }],},snowball: {label: "snow",key: 2,neme: 'snow',Children: [{ key: value }, { key: value }],},
};//另一個頁面調用函數
import {routes , skipToElement} from '../../../../../base';const onclick=(values)=>{if(values){skipToElement(values);}
}
4.Modal.confirm( )
antd中的Modal彈窗，進行交互的操作。
Modal.confirm({title: '標題',icon: <Excalmation />,okText: '確定',cancelText: '取消',onOk: () => {},onCancel: () => {},});5.includes()
includes() 方法用于判斷數組是否包含某個指定的值，并返回一個布爾值。該方法是Array.prototype的實例方法，因此可以在任何數組對象上調用它。
const arr = [1, 2, 3, 4, 5];console.log(arr.includes(2)); // 輸出：true
console.log(arr.includes(6)); // 輸出：false
includes() 方法可以接受兩個參數：
searchElement（必選）：要搜索的元素。fromIndex（可選）：從該索引處開始搜索?searchElement。默認值為?0，表示從數組的開始位置搜索。
const arr = [1, 2, 3, 4, 5];console.log(arr.includes(2, 2)); // 輸出：false
console.log(arr.includes(3, 3)); // 輸出：true
includes() 方法是區分大小寫的，也就是說，它使用的是全等比較（===）。如果你想進行不區分大小寫的搜索，可以先將數組中的元素或要搜索的元素轉換為相同的大小寫形式，然后再使用 includes() 方法進行搜索。
const arr = ['apple', 'Banana', 'orange'];console.log(arr.includes('banana')); // 輸出：false
console.log(arr.includes('Banana'.toLowerCase())); // 輸出：true
在這個例子中，arr.includes('banana') 的結果是 false，因為 'banana' 和 'Banana' 是區分大小寫的。而 arr.includes('Banana'.toLowerCase()) 將 'Banana' 轉換為小寫，然后再進行搜索，因此結果是 true。
