React-useRef，自定义Hook，路由

一.useRef获取dom引用

1.导入方法

//导入方法
import { useRef } from 'react'

2.使用方法（小案例）

//导入useRef
import { useRef } from 'react'
function App(){
    const pref = useRef();
    const iref = useRef();
    return(
        <div>
            //绑定pref
            <p ref={pref}>你好我是Ikun</p>
            //pref.current 代表着p标签本身
            <button onClick={ () => alert(pref.current.innerText) }>点击显示p标签内容</button>
            //绑定iref
            <input ref={iref} />
            //iref.current 代表着input框本身
            <button onClick= { () => alert(iref.current.value) }>点击显示表单内容</button>
        </div>
    )
}

3.小案例效果

二、自定义Hook

1.概念

Hook是React16.8的新增特性，它可以让你不用学class的情况下使用state以及其他的React特性

2.自定义Hook-获取窗口的宽度

2.1思路

首先初始化定义size值含有w和h；挂载完毕获取窗口的宽高和监听窗口的事件resize 卸载时候移除监听

2.2案例过程直接奉上

2.2.1首先创建hook文件夹添加文件useWinSize.js

2.2.2 useWinSize代码部分

import { useState, useEffect } from 'react';
export function useWinSize(){
    //初始化size 值有w和h
    const [size, setSize] = useState( { w:window.innerWidth, h:window.innerHeight } )
    //定义onResize
    const onResize = （） => {
        //窗口发送变化，更新w和h的值
        setSize({ w:window.innerWidth, h:window.innerHeight })
    }
    //挂载完毕 使用函数组件中的副作用操作
    usrEffect(()=>{
        //监听resize事件
        window.addEventListener("resize",onResize);
        //卸载完毕要移除事件
        return ()=> window.removeEventListener("resize",onResize)
    },[]) 
    //useWinSize执行返回size
    return size
}

2.23 App.js部分

//useRef获取dom引用
import { useRef } from 'react'
//引用useWinSize组件
import { useWinSize } from "./hooks/useWinSize";
function App(){
    const size = useWinSize();
    return(
        <div>
            <p>w:{size.w},h:{size.h}</p>
        </div>
    )
}
export default App;

3.自定义Hook-倒计时秒

3.1 思路

目标：30倒计时到0 函数 useCounter 有个参数second 返回一个 counter 组件挂载 开始倒计时组件卸载 停止倒计时

3.2案例直接奉上

3.2.1首先创建hook文件夹添加文件useCouter.js

3.2.2 useCouter.js代码

import { useEffect,useState } from "react";
export function useCounter(second=30){
  // 定义剩余的秒数counter，默认值second
  const [counter,setCounter] = useState(second);
   // 定义一个定时器
   let ind = setInterval(()=>{
    // 让counter-1
    setCounter(counter-1)
    console.log(counter);
  },1000)
  //  组件挂载与更新时候
  useEffect(()=>{
     // 如果counter小于0 清除定时器
    if(counter<=0){clearInterval(ind)}
    // 如果卸载也清除定时器
   // 当组件将要被卸载使用，这个return出来的函数会被执行
    return ()=>{clearInterval(ind)};
  },[counter,ind])
  // 返回剩余的秒数
  return counter
}

3.2.3 App.js代码

// useRef获取dom引用
import { useRef } from "react";
import { useCounter } from "./hooks/useCouter";
function App() {
  const counter = useCounter(5);
  return ( <div>
    <button>{counter}</button>
  </div> );
}

export default App;

4.自定义Hook-回到顶部

4.1思路

有个html节点，页面的滚动距离超过了100 就显示，小于100就隐藏
节点单击回到顶部

4.2案例直接奉上

4.2.1首先创建hook文件夹添加文件useGoTop.js

4.2.2useGoTop代码部分

import { useEffect,useRef } from "react";
export function useGoTop(dis=100){
  // 除垢剂一个elem dom引用
  const elem = useRef();

 
  useEffect(()=>{
      // 滚动监听函数
    const onScroll = ()=>{
      //document.documentElement html节点 
      if(document.documentElement.scrollTop<=dis){
        // 隐藏
        elem.current.style.display="none"
      }else{
        // 显示
        elem.current.style.display="block"
      }
    }
    // 组件关注完毕，注册scroll事件
    window.addEventListener("scroll",onScroll);
    // 默认检查一次
    onScroll();
    // 节点监听单击事件，滚动到0的位置，平滑
    elem.current.addEventListener("click",()=>{
      window.scrollTo({
        top:0,
        behavior:"smooth"
      })
    })
    // 如果调用它的组件（App.vue）被卸载
    // 将要执行 removeEventListenter
    return ()=> window.removeEventListener("scroll",onScroll);
  },[dis])
  // 返回这个dom引用
  return elem
}

4.2.3 App.js代码部分

// useRef获取dom引用
import { useRef } from "react";
import { useGoTop } from "./hooks/useGoTop";
function App() {
  const elem = useGoTop()
  const elem2 = useGoTop();
  return ( <div>
    <button 
    ref={elem}
    style={{position:"fixed",right:"30px",bottom:"60px"}}>top</button>
    <p style={{height:"3000px"}}>坤坤</p>
    <p ref={elem2}>bottom</p>
  </div> );
}

export default App;

三.路由

1.安装

npm i react-router-dom -S

2.路由配置

// 基本路由配置
const baseRoutes = [
    {path:"",element:<Home></Home>},
    {path:"/about",element:<About></About>},
    {path:"/produce/:id",element:<Produce></Produce>},
    {path:"/admin/*",element:<Admin></Admin>,
       children:[
        {path:'',element:<Dash></Dash>},
        {path:'dash',element:<Dash></Dash>},
        {path:'orderlist',element:<OrderList></OrderList>},
       ]
    }
  ]

3.创建路由并返回路由内容

 // 创建路由
  const element = useRoutes(baseRoutes)
  // 返回路由内容
  return ( <>{element}</> );

//导出
export default RouterView;

4.App.js包装

import {HashRouter as Router,NavLink} from 'react-router-dom'
// 导入创建好的路由
import RouterView from './router';
// app
function App() {
  return (
  <Router>
    <RouterView>
  </Router> );
}

export default App;

5.组件

5.1HashRouter 哈希路由

所有路由组件和方法必须包裹在这个路由里面

5.2NavLink 导航链接

<NavLink to="">首页</NavLink> 
<NavLink to={{pathname:'/about'}}>关于</NavLink>
<NavLink to={{pathname:'/produce/abc'}}>产品Abc</NavLink> 
<NavLink to="/produce/123">产品123</NavLink>
<NavLink to="/admin/">admin</NavLink>

5.3Link导航链接

// Outlet 存放子路由 Link导航链接
import {Outlet,Link} from 'react-router-dom'
function Admin() {
  return ( <div>
    <h3>Admin</h3>
    <p>
      <Link to="/admin/dash">概览</Link> |
      <Link to="/admin/orderlist">订单列表</Link>
    </p>
  <Outlet/>
  </div> );
}

export default Admin;

5.4use方法

1.useRouter 创建路由
2.useParams 获取路由参数

5.4.1useRouter

// 创建路由
  const element = useRoutes(baseRoutes)

5.4.2useParmas

import {useParams} from 'react-router-dom'
function Produce() {
  // 获取产品的参数
  const params = useParams();
  return ( <div>产品页面 - {params.id}</div> );
}

export default Produce;

四、路由懒加载

五、路由组件