useMemo

• 優(yōu)化渲染

現(xiàn)象

• App每次重新執(zhí)行時(shí)，render變化了，引用的render不是同一個(gè)函數(shù)

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('每次點(diǎn)擊，App重新渲染，該render函數(shù)也會(huì)執(zhí)行')return list}return (<>{count}<button onClick={() => setCount(count + 1)}>add</button><br /><Foo render={render} /></>) } export default App

類組件pureComponent

• 屬性不變，子組件不重新渲染（只會(huì)在初次渲染時(shí)執(zhí)行一次）

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

函數(shù)組件memo

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

useCallback

• 固定的是函數(shù)

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

useMemo

• 固定的是值，會(huì)將函數(shù)執(zhí)行

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

改變r(jià)ange，依賴變化

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

總結(jié)

以上是生活随笔為你收集整理的5 useMemouseCallback的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。