eact Hooks 之 useCallback、useMemo、memo基础使用
作者:互联网
作用
都为性能优化,避免组件内的重复渲染次数。
某子组件只依赖了父组件内的方法,触发父组件内的方法时,会重复渲染子组件
const Child =(props) => {
console.log(props, 'child-props');
// 父组件触发setCount方法,就会打印props
return (
<div>
<input type="text />
</div>
)
}
const Parent = () => {
const [count, setCount] = useState(0)
return (
<div>
<div>count: {count}</div>
<button onClick={setCount(count + 1)}></button>
<Child />
</div>
)
}
export default () => {
<div>
<Parent />
</div>
}
使用
memo
memo的使用对象为组件,且一般为某组件内的子组件,以上述代码为例,使用memo函数将Child包裹住,可以避免重复渲染
const Child = React.memo((props) => {
console.log(props, 'child-props');
// 父组件触发setCount方法,不会重复打印
return (
<div>
<input type="text />
</div>
)
})
useCallback
memo缓存组件,useCallback缓存函数,若把上述代码改为下面这样,则还会重复打印,此时的优化需有memo和useCallback配合使用
child子组件只使用了父组件中的方法,且方法是不变的,input change时会调用父组件内的方法,handleChange方法会多次挂载
const Child = memo((props) => { // 使用memo包裹优化
console.log(props, 'child-props');
return (
<div>
<input type="text" onChange={props.onChange} />
</div>
)
})
const Parent = () => {
const [text, setText] = useState('')
// const hanleChange = (e) => {
// setText(e.target.value)
// }
// ⬇️优化写法
const hanleChange = useCallback((e) => {
setText(e.target.value)
}, [])
return (
<div>
<div>count: {text}</div>
<Child onChange={hanleChange} />
</div>
)
}
export default () => {
<div>
<Parent />
</div>
}
useMemo
很多时候,我们需要在组件中计算数据,例如将数组组合到单个值,或者排序、过滤等。希望在其他状态发生变化时,不需要再重复 render。 useMemo 它与 useCallback 密切相关,但用于优化数据处理。它有相同的 API 来定义它所依赖的值。传入需要创建的函数和依赖项数组。 useMemo 只会在某个依赖项发生更改时重新计算 memoized 值。 此优化有助于避免在每个渲染上进行高开销的计算,如果没有提供依赖项数组,那么 useMemo 将会在每次渲染时重新计算新的值
import { useMemo } from 'rax';
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
标签:const,useMemo,Hooks,memo,useCallback,props,组件 来源: https://www.cnblogs.com/laine001/p/14340806.html