使用MEMO优化函数组件重复渲染问题

描述：

高阶组件memo 可以让被包装组件在它的props数据没有发生变化时避免无意义的渲染。

语法：

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

memo函数返回组件的 记忆版本。 只要组件的 props 没有改变，当它的父组件被重新渲染时，这个记忆版本通常不会被重新渲染。 但 React 可能仍会重新渲染它：组件记忆是一种性能优化，而不是保证。

arePropsEqual 是一个接受两个参数的函数：组件以前的 props 和它的新 props；用于自定义处理是否发生了props改变。一般不用处理这个函数，react默认使用Object.is判断。Object.is() 方法判断两个值是否为同一个值，如果满足以下任意条件则两个值相等：

• 都是 undefined
• 都是 null
• 都是 true 或都是 false
• 都是相同长度、相同字符、按相同顺序排列的字符串
• 都是相同对象（意味着都是同一个对象的值引用）
• 都是数字且
• 都是 +0
• 都是 -0
• 都是 NaN
• 都是同一个值，非零且都不是 NaN
• Object.is() 与 == 不同。== 运算符在判断相等前对两边的变量（如果它们不是同一类型）进行强制转换（这种行为将 "" == false 判断为 true），而 Object.is 不会强制转换两边的值。
• Object.is() 与 === 也不相同。差别是它们对待有符号的零和 NaN 不同，例如，=== 运算符（也包括 == 运算符）将数字 -0 和 +0 视为相等，而将 Number.NaN 与 NaN 视为不相等。

使用方法：

从API描述来看，此功能是其最重要的用途。我们来看下面这个例子：

const Greeting = function Greeting({ name="world" }:any) {

  useEffect(()=>{
    console.log("Greeting重新渲染");
  });
  return <h1>Hello, {name}!</h1>;
};
export default function SkipRebuild (props: ISkipRebuildProps) {

  const [refresh,forceUpdate]=useState(0);
  return (
    <div className="m-Logo">
      <Button onClick={
        ()=>{
          fo