高阶组件memo

• memo(Component, arePropsEqual?)

memo为单次memory的简称，所以是为了（记忆，缓存）用法，性能优化

一、 高阶组件，用法-性能优化，在父组件状态变更时，子组件不重新渲染， 官方地址zh-hans.react.dev/reference/r…

二、如下demo,父组件的address变化时子组件不会重新渲染，只有父组件的name变化时子组件才会重新渲染， 因为父组件的name作为属性传递给了子组件

import { memo, useState } from 'react';

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return <h3>Hello{name && ', '}{name}!</h3>;
});