useMemo缓存计算结果值
记忆组件，可以理解为计算属性(它是类组件中的memoizeOne组件是一样的，只不过，useMemo是内置功能，无需安装) 性能优化
useMemo它可以对于【数值】进行缓存，如果你的依赖项没有发生改变，则下一次调用时，读取上一次的缓存，从而提升性能。
使用的方法：
- 将计算函数放入useMemo，作为参数一，缓存计算结果
- 如果useMemo参数2为一个空数据，则它只会执行一次，后续它所计算的变量的值发生的改变，它也不会重新计算，因为它没有依赖
- 如果参数2中的数组为多个元素，则其中任意一个元素发生了改变，则它都会重新计算一次
import React, {
useMemo, useState } from 'react'
const App = () => {
const [num1, setNum1] = useState(1)
const [num2, setNum2] = useState(2)
const sum = () => {
console.log('fn')/* 买菜 */
return num1 + num2
}
const sum1 = useMemo(() => {
console.log('useMemo')
return num1 + num2
}, [num1, num2])
return (
<div>
<h1>执行三次</h1>
<div>{
sum()}</div>
<div>{
sum()}</div>
<div>{
sum()}</div>
<hr />
<h3>useMemo计算出来的数值</h3>
<div>{
sum1}</div>
<div>{
sum1}</div>
<div>{
sum1}</div>
<button onClick={
() => setNum1(v => v + 1)}>修改num1值</button>
<button onClick={
() => setNum2(v => v + 1)}>修改num2值</button>
</div>
);
}
export default App;
useCallback 它是用来缓存函数的
如果给 子组件一个方法，用来修改父组件的数据。那么每执行一次，父组件就会重新赋值一次方法给 子组件。子组件也就要重新渲染。
import React, {
useCallback, useState, useEffect } from 'react'
const Child = ({
addCount }) => {
useEffect(() => {
console.log('更新了 addCount')
}, [addCount])
return (
<div>
<h3>Child组件</h3>
<button
onClick={
() => {
addCount(1)
}}
>
修改count值 -- Child组件
</button>
</div>
)
}
const App = () => {
const [count, setCount] = useState(100)
在没有缓存此函数时，App组件重新执行后，它会再次赋值一次
const addCount = n => {
console.log('addcount')
setCount(v => v + n)
}
return (
<div>
<h3>App -- {
count}</h3>
<Child addCount={
addCount} />
</div>
)
}
export default App
useCallback来缓存函数
import React, {
useCallback, useState, useEffect } from 'react'
import _ from 'lodash'
// useCallback 它是用来缓存函数的
const Child = ({
addCount }) => {
useEffect(() => {
console.log('更新了 addCount')
}, [addCount])
return (
<div>
<h3>Child组件</h3>
<button
onClick={
() => {
addCount(1)
}}
>
修改count值 -- Child组件
</button>
</div>
)
}
const App = () => {
const [count, setCount] = useState(100)
const addCount = useCallback(n => {
setCount(v => v + n)
}, [])
return (
<div>
<h3>App -- {
count}</h3>
<Child addCount={
addCount} />
</div>
)
}
export default App
React.memo
React.memo顶层Api方法，它可以用来减少子组件的重复渲染次数，从而提升组件渲染性能.
- React.memo它是一个只能在函数组件中使用的顶层Api方法
- shouldComponentUpdate它必须要有一个返回值，true则表示继续渲染，false停止渲染
- React.memo参数2返回值如果为true则表示停止渲染，false继续渲染
prevProps 旧的props数据 object
nextProps 新的props数据 object
可以比较两者的不同，来决定是否重新渲染
参数2写的回调函数，一般情况下都在props传过来的数据为引用类型，才需要手动来判断，如果是基本类型则不需要写参数2，来手动判断。
import React, {
useState, memo } from 'react'
import _ from 'lodash'
const Child = memo(
({
count }) => {
console.log('child')
return (
<div>
<h3>child组件 -- {
count.n}</h3>
</div>
)
},
(prevProps, nextProps) => _.isEqual(prevProps, nextProps)
)
const App = () => {
let [count, setCount] = useState({
n: 100 })
let [name, setName] = useState('张三')
return (
<div>
<h3>App -- {
count.n}</h3>
<input type="text" value={
name} onChange={
e => setName(e.target.value)} />
<button
onClick={
() => {
setCount({
n: Date.now() })
}}
>
++++
</button>
<Child count={
count} />
</div>
)
}
export default App