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

天蒙蒙亮

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

阅读量813

点赞数

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

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

本文链接：https://blog.csdn.net/qq_38719039/article/details/127379936

版权

React 同时被 2 个专栏收录

62 篇文章 3 订阅

订阅专栏

45 篇文章 1 订阅

订阅专栏

// 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')；