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 >
}