js获取当前浏览器窗口大小；修改url地址，但不刷新页面。

天蒙蒙亮

已于 2022-11-07 00:19:20 修改

阅读量898

点赞数

分类专栏： js React 文章标签： javascript 前端

于 2022-10-18 00:18:58 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38719039/article/details/127379936

版权

React 同时被 2 个专栏收录

63 篇文章

订阅专栏

45 篇文章

订阅专栏

本文介绍了如何使用React hooks实现组件尺寸监听，并结合useMemo优化状态依赖更新。内容包括clientSize获取、数组分组技巧，以及如何动态调整列宽、图片缩放和 clipboard API。还提及了URL修改而不刷新页面的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// utils.js
// 获取当前浏览器窗口大小的方法
export const useClientSize =()=> {
const [ layout, setLayout]= useState({ height: innerHeight, width: innerWidth })
const onResize = useCallback(
 ()=> {
  setLayout({
    height: innerHeight,
    width: innerWidth
  })
}, [])

useEffect(()=> {
window.addEventListener('resize', onResize)
return () =>{
  window.removeEventListener('resize', onResize)
}
}, [])

return layout
}

数组：每三个分组, 数组分组

const tempList = []
for (let i=0; i<list.length; i=i+3) {
  tempList.push( [list.slice(i, i+3)] )
}

useMemo使用场景，状态作为依赖项驱动更新。

const columns = React.useMemo(() => [
 {
  datalndex: 'name',
  title:'Test',
  width: locale? 200：80,
 },
 ...
]，[locale])

图片按比例缩放，在元素内联样式上设置宽or高
width: auto; height: auto;
max-width: 100%;
max-height: 100%;

复制粘贴

const copyText =()=>{
 const clipboard = new Clipboard(`#copy_link`)
 clipboard.on('success', function (e: any){
  message.success("复制成功", 1)
  e.clearSelection();
 })
 return ()=>{
  clipboard.destroy()
 }
}

修改url地址，但不刷新页面
window.history.pushState({}, 0, window.location.href + '?type=china')；