react中，当组件中state发生改变时，组件会重新渲染，子组件也会跟着一起渲染，memo用来缓存组件，仅当props变化时，才会重新渲染该组件，这样会避免些重复无效渲染。

import React, {memo, useState} from 'react';
import {Card, Input, InputNumber} from "antd";

function Index() {
  const [keywords, setKeywords] = useState<string>('');
  const [age, setAge] = useState<number>(1);

  return (
      <div>
        <Card>
          <Input placeholder="请输入关键词" onChange={(e) => setKeywords(e.target.value)} style={{ width: 200 }} />
          <Person name={keywords}/>
        </Card>
        <Card>
          <InputNumber placeholder="请输入年龄" onChange={(v) => setAge(Number(v))} style={{ width: 200 }} />
          输入值为：{age}
        </Card>
      </div>
  );
}

interface Options {
  name: string
}

const Person: React.FC<Options> = memo(({name}) => {
  console.log('Person组件进行渲染了')
  return (
      <div>
        查询用户姓名为：{name}
      </div>
  )
})
export default Index

与useMemo联系

React.memo是一个高阶组件，useMemo是一个hook

注意

1. 只适用于函数式组件，class组件不可用
2. 如果不依赖props，则只会渲染一次

应用场景

memo用来优化子组件的无效重复渲染问题