useMemo

• 優化渲染

現象

• App每次重新執行時，render變化了，引用的render不是同一個函數

import React, { useState, } from "react";
const Foo = props => {return <ul>{props.render()}</ul>
}
function App() {const [range, setRange] = useState({ min: 0, max: 10 })const [count, setCount] = useState(0)const render = () => {let list = []for (var i = 0; i < range.max; i++) {list.push(<li key={i}>{i}</li>)}console.log('每次點擊，App重新渲染，該render函數也會執行')return list}return (<>{count}<button onClick={() => setCount(count + 1)}>add</button><br /><Foo render={render} /></>)
}
export default App

類組件pureComponent

• 屬性不變，子組件不重新渲染（只會在初次渲染時執行一次）

class Foo extends PureComponent {render() {console.log('PureComponent')return (<><p>{this.props.count}</p></>)}
}
<Foo count={1} />

函數組件memo

const Foo = memo(props => {console.log('memo')return (<p>{props.count}</p>)
})

useCallback

• 固定的是函數

const render = useCallback(() => {let list = []for (var i = 0; i < range.max; i++) {list.push(<li key={i}>{i}</li>)}return list
}, [range])
// 第二個參數表依賴項，依賴變化了才會重新渲染
const Foo = memo(props => {console.log('useCallback')return (<><p>{props.count}</p><ul>{props.render()}</ul></>)
})

useMemo

• 固定的是值，會將函數執行

const render = useMemo(() => {let list = []for (var i = 0; i < range.max; i++) {list.push(<li key={i}>{i}</li>)}return list
}, [range])
// 注意：子組件的render函數不需要執行
const Foo = memo(props => {console.log('useCallback')return (<><p>{props.count}</p><ul>{props.render}</ul> </>)
})

改變range，依賴變化

<button
onClick={() => setRange({...range,max: range.max + 1
})}>add</button>