react函数组件方式如何缓存？

可以利用memo方法去缓存，具体代码如下：

当ShowName只出现name时候，因为改变的是index所以ShowName组件不会重载

import React, { memo, useEffect, useState } from 'react'

function ShowName({name}) {
    console.log('showName render...')
    return <div>----{name}{index}</div>
}

const ShowNameMemo = memo(ShowName)

export default function App() {

    const [index, setIndex] = useState(0)
    const [name] = useState('张三')
    // 
    useEffect(() => {
        setInterval(() => {
            setIndex(prev => prev + 1)
        }, 1000)
    }, [])
    return (
        <div>
            App{index}
            <ShowNameMemo name={name} />
        </div>
    )
}

会改变的列子

import React, { memo, useEffect, useState } from 'react'

function ShowName({name, index}) {
    console.log('showName render...')
    return <div>----{name}{index}</div>
}

const ShowNameMemo = memo(ShowName)

export default function App() {

    const [index, setIndex] = useState(0)
    const [name] = useState('张三')
    // 
    useEffect(() => {
        setInterval(() => {
            setIndex(prev => prev + 1)
        }, 1000)
    }, [])
    return (
        <div>
            App{index}
            <ShowNameMemo name={name} index={index} />
        </div>
    )
}