1、react.memo在适合用在什么场景下
memo配合useMemo和useCallBack可以有效减少不必要的渲染
const Child = ()=>{
return <div>child</div>
}
const ChildMemo = React.memo(Child)
const Parent = ()=>{
const [data,setData]= React.useState([])
const val = React.useMemo(()=>{
return data
},[])
const onClick = React.useCallback(()=>{
console.log(1)
},[])
return <ChildMemo onClick={onClick} data={val}/>
}
当父组件重新渲染的时候,子组件以及props都被缓存,则可以避免子组件不必要的渲染
当知使用memo缓存了子组件的时候,父组件重新渲染,子组件的props也会重新生成,即使缓存了子组件,子组件也会重新渲染,所以memo配合useMemo和useCallback使用效果会更好
2、react 的diff 和vue的diff的区别
3、如何优化动画性能
使用css原生动画 使用requestAnimationFrame 减少回流重绘 使用硬件加速