Hello, I'm front Countdown, a Buddhist code monster working in Mojo, and if you like my article 📚, you can gather psychic powers for me ⭐(*°∀°) by clicking like. I wish you all an early fortune, good health and a safe life!Copy the code
Usage origin
When data is reassigned, the render of the entire component is refreshed. When data functions are complex and multiple, and some data does not need to be refreshed, it is forced to refresh, resulting in wasted performance and possible bugs. In this case, we need to use useCallback and useMemo to cache data that does not need to be updated, forming memoized values. Memo is used for child components not to re-render
Work together
Different forms of reduced repetition render
Memo usage
Suppose the Parent component has a Child component inside it
const Parent = () = > {
const [num,setBum] = useState(0)
return (
<View>
<Button onClick={()= > setNum(num+1)} >
<Child />
</View>
)
}
const Child = () => {
console.log('child load')
return (
<View>child text</View>)}Copy the code
- Click Button and the Child will refresh the rendering along with Parent and the console will print
// child load
Copy the code
- After using the memo
const Child = memo(() = > {
console.log('child load')
return (
<View>child text</View>)})Copy the code
- Child is not rerendered after button is clicked, console does not print
- Memo is a function. The second argument is an optional extension function that controls whether the component is refreshed or not. Use the same as shouldComponentUpdate
The use of the useCallback
The Parent component contains the Child component
const Parent = () = > {
const [num,setBum] = useState(0)
const clickBtn = () = > {
setNum(num+1)}return (
<View>
<Button onClick={clickBtn} >
<Child call={clickBtn} />
</View>
)
}
const Child = memo((call) => {
console.log('child load')
return (
<View onClick={call}>child text</View>)})Copy the code
- Click Button and the Child will refresh the rendering along with Parent and the console will print
// child load
Copy the code
The memo is invalid after passing a function to a child component due to printing inferences
- After using useCallback
const Parent = () = > {
const [num,setBum] = useState(0)
const clickBtn = useCallback(() = > {
setNum(num+1)
},[]) //[] The dependency is optional. If num is not filled in, it will not be updated
return (
<View>
<Button onClick={clickBtn} >
<Child call={clickBtn} />
</View>
)
}
const Child = memo((call) => {
console.log('child load')
return (
<View onClick={call}>child text</View>)})Copy the code
- Child is not rerendered after button is clicked, console does not print
- The useCallback parameter [] is an optional dependency, so the clickBtn function is updated when num is not specified and the initial value of num is always 0.
UseMemo usage
The Parent component contains the Child component
const Parent = () = > {
const [num,setBum] = useState(0)
return (
<View>
<Button onClick={clickBtn} >
<Child num={num + 1} call={clickBtn} />
</View>
)
}
const Child = memo((num) => {
console.log('child load')
return (
<View>child text {num}</View>)})Copy the code
- Click Button and the Child will refresh the rendering along with Parent and the console will print
// child load
Copy the code
It follows from the print that the Memo is invalid if you pass variables to child components
- After using useMemo
const Parent = () = > {
const [num,setBum] = useState(0)
const mockData = useMemo(() = > ({
newNum: num + 1}), [])// [] Specifies a dependency. If num is not specified, newNum will always be 1
return (
<View>
<Button onClick={clickBtn} >
<Child num={mockData.newNum} call={clickBtn} />
</View>
)
}
const Child = memo((call) => {
console.log('child load')
return (
<View onClick={call}>child text</View>)})Copy the code
- The Child will not be re-rendered after clicking button. The console will not print, avoiding meaningless rendering
- Ex: If [num] is specified, the mockData object is updated with num updates. If [num] is specified, the mockData object is updated with num updates.
The difference between
- Memo is used for the cache component
- UseCallback is used for caching functions
- UseMemo is used to cache data objects, which requires a return object {}. ES6 syntax can be shortened to () => ({})
function f1() {
return{}}Copy the code