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。
