React-3.3 自定义hooks 之 自定义滚动条

自定义hooks需要注意的
自定义 Hook 是一个函数

1. 命名以 “use” 开头，函数内部可以调用其他的 Hook。
2. 在当前函数组件的最顶层调用，（只在最顶层使用 Hook）
   不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。

app.js

import React,{useEffect,useState} from 'react';
import {useScrollY} from './hooks'

function App(){
  // console.log(useSize)

  let [scrollY,setY] = useScrollY();
  // console.log(scrollY);
  let [txt,setTxt] = useState(scrollY);

  useEffect(() => {
    window.onscroll=()=>{
      setY(window.scrollY);
    }
    return () => {
      window.onscroll = null;
    }
  }, [])

  return <div>
            
            <ul style={{listStyle:"none"}}>
              {
                [...(".".repeat(100))].map((item,index)=>{
                return <li key={index}>这是第{index+1}个li</li>
                })
              }
            </ul>

            <input type="text" 
              value={txt} 
              style={{
                position:"fixed",
                top:"30px",
                left:"200px"
              }}
              onChange={({target})=>{
                setTxt(target.value)
              }}
            />

            <button 
            onClick={()=>{
              setY(txt)
            }}
            style={{
              position:"fixed",
              top:"27px",
              left:"370px"
            }}
            >点击跳转</button>

            <span 
            // onClick={()=>{
            //   setY({txt});
            // }}
            style={{
              position:"fixed",
              top:"55px",
              left:"200px"
            }}
          
          >当前滚动在{scrollY}</span>

         </div>
  
}

export default App;

hooks.js

import { useState } from 'react';

// 开头必须是 use
// 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);
      }
    ]
}


export {useScrollY};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  // 
    <App />,
  //,
  document.getElementById('root')
);

图示

初始：

滚动鼠标滚轮，当前滚动位置数据随之变动：

input框输入滚动目标值，点击按钮，同步滚动到的位置：