useMemo
使用useMemo做值的缓存,缓存的是函数运行的结果,有助于性能提升。
import React, { useMemo, useState } from 'react';
const index = () => {
const [count, setCount] = useState(1);
const [value, setValue] = useState('c');
const handleClickCount = () => {
setCount((pre) => ++pre)
};
const handleClickValue = () => {
setValue((pre) => pre + 'c')
};
const formatCount = () => {
console.log('formatCount');
return count + ',000';
};
const formatValue = useMemo(() => {
console.log('format'); // count变化时不会执行
return value.toLocaleUpperCase();
}, [value]);
return (
<div>
<Button onClick={handleClickCount}>改变count</Button>
<Button onClick={handleClickValue}>改变value</Button>
<div>
<div>count: {formatCount()}</div>
<div>value: {formatValue}</div>
</div>
</div>
)
}
export default index
useCallback
同useMemo也可以做性能优化,但是缓存的是函数。
import React, { useCallback, useState, memo } from 'react';
const Children = (props: { formatValue }) => {
const { formatValue} = props;
return (<div>{formatValue()}</div>);
};
const NewChildren = memo(Children);
const index = () => {
const [count, setCount] = useState(1);
const [value, setValue] = useState('c');
const handleClickCount = () => {
setCount((pre) => ++pre)
};
const handleClickValue = () => {
setValue((pre) => pre + 'c')
};
const formatCount = () => {
console.log('formatCount');
return count + ',000';
};
const formatValue = useCallback(() => {
console.log('format');
return value.toLocaleUpperCase();
}, [value]);
return (
<div>
<Button onClick={handleClickCount}>改变count</Button>
<Button onClick={handleClickValue}>改变value</Button>
<div>
<div>count: {formatCount()}</div>
</div>
<NewChildren formatValue={formatValue}/>
</div>
)
}
export default index