【04.14】面试题

41 阅读1分钟

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 减少回流重绘 使用硬件加速

4、渲染合成层

5、轮播图