React.memo

使用场景：

多于状态提升的组件中进行性能优化

*状态提示： 状态提升概念速通 - 掘金 (juejin.cn)

我们在状态提升的父组件中的state更新时

在传递给子组件的Props未变的情况下， 子组件也会无脑更新

这就需要优化 ，用到memo

先看memo对子组件的处理

type ListPropsType = {
    list: TodoType[]
}

const List:FC<ListPropsType> = ({list=[]}) => {
    console.log('list')
    return(
        <ul>
         {
            {list.map(todo => (
            <li key={todo.id}>{todo.title}</li>
            ))
          }
        </ul>
    )
}

const List2 = React.memo(List)

用这个List2来替换状态提升的父组件的List

const Demo: FC = () => {
    //todo list
    const [list, setList] = useState<TodoType[]>([
     {id: nanoid(5), title: '吃饭'}，
     {id: nanoid(5), title: '睡觉'}，
    ])
    const [count, setCount] = useState(0)
    //状态提升
    
    return(
    <div>
        <h3>Todo-{count}</h3>
        <button onClick={()=>{setCount(count+1)}>增加</button>
        //原本是List, 然后增加你会发现点击增加之后不会再触发子组件中的打印list， 原本每次点击都会打印list
        <List2 list={list} />
        <InputForm list={list} setList={setList} />
    )
    
    
}


export deafault Demo3

不是每个组件都要加上memo