hook 简单的小案例
作者:互联网
React hooks(钩子)
React hooks 是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能
React Hooks 优势
- 简化组件逻辑
- 复用状态逻辑
- 无需使用类组件编写
Hook 使用规则
- 只在 React 函数中调用 Hook
- React 函数组件中
- React Hook 中
- 只在最顶层使用 Hook
//开通必须是 useSize
function useSize() {
return {
w: window.innerWidth,
h: window.innerHeight
}
}
//获取滚动条 设置滚动条
//获取滚动条
function useScrollY() {
let [scrollY, setY] = useState(window.scrollY);
return [
scrollY,
(newScrollY) => {
window.scrollTo(0, newScrollY);
setY(newScrollY)
}
]
}
import React, { useEffect } from 'react';
import { useSize, useScrollY } from './hook'
function App() {
// console.log(useSize());
let [scrollY, setY] = useScrollY();
//数据更新时
useEffect(() => {
window.onscroll = () => {
setY(window.scrollY);
}
return () => {
window.onscroll = null;
}
}, [])
return <div >
<
ul > {
[...(".".repeat(100))].map((item, index) => {
return <li key = { index } > 这是第 { index }
个li < /li>
})
} <
/ul> <
a onClick = {
() => {
setY(100);
}
}
style = {
{
position: "fixed",
top: "50px",
left: "200px"
}
} > { scrollY } < /a> < /
div >
}
标签:return,案例,useSize,scrollY,React,hook,window,简单,setY 来源: https://blog.csdn.net/LJiaJia595/article/details/114763711