React.memo
2020-06-21 本文已影响0人
penelope_2bad
1.基础使用
- React.memo 相当于 React.pureComponent
内部的shouldComponetUpdate对state和prop进行浅比较
import React, { useState, memo, useMemo, useCallback } from 'react'
const Child = memo(() => {
const date = new Date()
return (
<div>
当前时间:{date.getHours()} : {date.getMinutes()} : {date.getSeconds()}
</div>
)
})
const Parent = () => {
const [count, setCount] = useState(0)
return (
<div>
<div>count: {count}</div>
<button onClick={() => {
setCount(count + 1)
}}>+1</button>
<Child />
</div>
)
}
function App() {
return <div><Parent /></div>
}
export default App
2. 依据props的改变来变化
import React, { useState, memo, useMemo, useCallback } from 'react'
const Child = memo(() => {
const date = new Date()
return (
<div>
当前时间:{date.getHours()} : {date.getMinutes()} : {date.getSeconds()}
</div>
)
})
const Parent = () => {
const [count, setCount] = useState(0)
const [clickTimeCount, setClickTimeCount] = useState(0)
return (
<div>
<div>count: {count}</div>
<button onClick={() => {
setCount(count + 1)
}}>+1</button>
<button onClick={() => {
setClickTimeCount(clickTimeCount + 1)
}}>get current time</button>
<Child count={clickTimeCount}/>
</div>
)
}
function App() {
return <div><Parent /></div>
}
export default App
image.png
3. React.memo第二个参数
const Child = memo((props) => {
const date = new Date()
return (
<div>
当前时间:{props.count.clickTimeCount}
<input type="text" onChange={props.onChange}/>
</div>
)
}, (prevProps,nextProps) => {
// 返回false进行更新
// 返回true不需要进行更新
console.log(prev.count === next.count);
return prev.count === next.count
})