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>