npx create-react-app npm i express morgan cors bootstrap react-router-dom

1、useRequest

1-1、index.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import 'bootstrap/dist/css/bootstrap.css'
  4. import { BrowserRouter, Link, Route } from 'react-router-dom';
  5. import Table from './pages/Table'
  6. import Drag from './pages/Drag'
  7. import Animation from './pages/Animation'
  8. import Form from './pages/Form'
  9. ReactDOM.render(
  10.   <div className="container">
  11.      <div className='row'>
  12.        <div className='col-md-12'>
  13.           <BrowserRouter>
  14.              <Link to='table'>Table</Link> | 
  15.              <Link to='drag'>Drag</Link> | 
  16.              <Link to='form'>Form</Link> | 
  17.              <Link to='animation'>Animation</Link>
  18.              <Route path='/table' component={Table}/>
  19.              <Route path='/drag' component={Drag}/>
  20.              <Route path='/animation' component={Animation}/>
  21.              <Route path='/form' component={Form}/>
  22.           </BrowserRouter>
  23.        </div>
  24.      </div>
  25.   </div>,
  26.   document.getElementById('root')
  27. )

1-2、page/table.js

  1. import React from "react";
  2. import useRequest from '../hooks/useRequest'
  3. const URL = 'http://localhost:8000/api/users'
  4. /*
  5. *  useRequest 自定义Hook 用来请求远程接口
  6. * @params url String
  7. * @return Array [data,options,setOptions] 
  8. */
  9. export default function(){
  10.   const [data,options,setOptions] = useRequest(URL);
  11.   // 当前页 总页数 本页数组
  12.   const { currentPage, totalPage,list } = data;
  13.   console.log(data,'data');
  15.   return (
  16.     <>
  17.        <table>
  18.           <thead><tr><td>ID</td><td>NAME</td></tr></thead>
  19.           <tbody>
  20.              {
  21.                list.map(item=>(
  22.                   <tr key={item.id}>
  23.                        <td>{item.id}</td>
  24.                        <td>{item.name}</td>
  25.                   </tr>
  26.                ))
  27.              }
  28.           </tbody>
  29.        </table>
  30.        <nav>
  31.             <ul className='pagination'>
  32.             {
  33.               new Array(totalPage).fill(0).map((item,index)=>(
  34.                 <li key={index}><button 
  35.                     onClick={()=>setOptions({...options,currentPage:index+1})}
  36.                     className='btn btn-primary'
  37.                 >{index+1}</button></li>
  38.               ))
  39.             } 
  40.             </ul>
  41.        </nav>
  42.     </>
  43.   )
  44. }

1-3、hooks/useRequest.js

  1. import { useState, useEffect } from "react";
  2. /*
  3.  * useRequest 自定义Hook 用来请求远程接口
  4.  * @params url String
  5.  * @return Array [data,options,setOptions]
  6.  */
  8. function useRequest(url,initOptions) {
  9.   let [options, setOptions] = useState(Object.assign({
  10.     currentPage: 1,
  11.     pageSize: 5,
  12.   },initOptions));
  13.   let [data, setData] = useState({
  14.     totalPage: 0,
  15.     list: [],
  16.   });
  17.   // 调用接口，返回数据
  18.   function getData() {
  19.     let { currentPage, pageSize } = options;
  20.     fetch(`${url}?currentPage=${currentPage}&pageSize=${pageSize}`)
  21.       .then((res) => res.json())
  22.       .then((res) => {
  23.         setData({ ...res });
  24.       });
  25.   }
  26.   //* 依赖项 options 或者 url发生变化 会重新发送请求/ 
  27.   useEffect(getData, [options, url]);
  28.   return [data, options, setOptions];
  29. }
  30. export default useRequest;

1-4、servies.js

  1. const express = require('express')
  2. const cors = require('cors')
  3. const logger = require('morgan')
  4. const app = express()
  5. app.use(cors())
  6. app.use(logger('dev'))
  8. // http://localhost:8000/api/users?currentPage=1&pageSize=5
  9. app.get('/api/users',function(req,res){
  10.     let currentPage = parseInt(req.query.currentPage)  // 1 , 2, 3
  11.     let pageSize = parseInt(req.query.pageSize) // 5
  12.     let total = 25; 
  13.     let list = []
  14.     let offset = (currentPage-1) * pageSize
  15.     for(let i = offset; i < offset+pageSize; i++){
  16.       list.push({id:i+1, name:'name'+(i+1)});
  17.     }
  18.     res.json({
  19.       currentPage,
  20.       pageSize,
  21.       totalPage:Math.ceil((total/pageSize)),
  22.       list
  23.     })
  24. }) 
  26. app.listen(8000,function(){
  27.   console.log('app 启动起来了')
  28. })

2、useDrag

2-1、hooks/useDrag.js

  1. import { useState,useEffect, useLayoutEffect, useRef } from 'react';
  2. function useDrag(){
  3.     // DOM位置 useRef 保存对象 可以在组件多次渲染的时候 保持不变
  4.     const positionRef = useRef({
  5.         currentX:0, 
  6.         currentY:0,
  7.         lastX:0,
  8.         lastY:0
  9.     })
  10.     const domRef = useRef(null)  // domRef.current = div真是的DOM元素
  11.     const [, forceUpdate ] = useState({})
  12.     useLayoutEffect(() => { // 执行时机更早 想尽快的绑定事件 useEffect 什么时候绑定就不一定了
  13.         let startX,startY; // 拖拽开始的x、y坐标
  14.         const start = function(event){
  15.             const { clientX, clientY } = event.targetTouches[0];
  16.             startX = clientX;
  17.             startY = clientY;
  18.             domRef.current.addEventListener('touchmove',move)
  19.             domRef.current.addEventListener('touchend',end)
  20.         }
  21.         const move = function(event){
  22.             const { clientX , clientY } = event.targetTouches[0];
  23.             positionRef.current.currentX = positionRef.current.lastX + (clientX - startX)
  24.             positionRef.current.currentY = positionRef.current.lastY + (clientY - startY)
  25.             forceUpdate({})
  26.         }
  27.         const end = function(){
  28.             positionRef.current.lastX = positionRef.current.currentX
  29.             positionRef.current.lastY = positionRef.current.currentY
  30.             domRef.current.removeEventListener('touchmove',move)
  31.             domRef.current.removeEventListener('touchend',end)
  32.         }
  33.         domRef.current.addEventListener('touchstart',start)
  34.     }, [])
  35.     // 让那个dom元素进行移动
  36.     let style = {x: positionRef.current.currentX, y:positionRef.current.currentY}
  37.     return [style,domRef]
  38. }
  39. export default useDrag;

2-2、 pages/Drag.js

  1. import React from "react";
  2. import useDrag from "../hooks/useDrag";
  3. const basicStyle = { width: "100px", height: "100px", borderRadius: "50%" };
  4. // 自定义本质 是逻辑的复用，而非数据的复用
  6. export default function Drag() {
  7.   const [style1, dragRef1] = useDrag();
  8.   const [style2, dragRef2] = useDrag();
  9.   return (
  10.     <>
  11.       <div
  12.         ref={dragRef1}
  13.         style={{
  14.           ...basicStyle,
  15.           background: "red",
  16.           transform: `translate(${style1.x}px,${style1.y}px)`
  17.         }}
  18.       ></div>
  19.       <div
  20.         ref={dragRef2}
  21.         style={{
  22.           ...basicStyle,
  23.           background: "yellow",
  24.           transform: `translate(${style2.x}px,${style2.y}px)`,
  25.         }}
  26.       ></div>
  27.     </>
  28.   );
  29. }

3、useForm

3-1、hooks/useForm.js

  1. import { useState } from 'react';
  2. //useRef只能放在函数里 
  4. function useForm(initialValues) {
  5.     const [formData, setFormData] = useState(initialValues);
  6.     const setFormValue = (key, value) => {
  7.         setFormData({ ...formData, [key]: value });
  8.     }
  9.     const resetFormValues = () => {
  10.         setFormData(initialValues);
  11.     }
  12.     return [formData, setFormValue, resetFormValues];
  13. }
  14. export default useForm;

3-2、page/Form.js

  1. import React,{useCallback} from "react";
  2. import useForm from '../hooks/useForm'
  4. function Form(){
  5.     const [ formData, setFormValue, resetFormValues ] = useForm({username:'',email:''})
  6.     const changeUsername =  useCallback((e)=>setFormValue('username',e.target.value),[setFormValue])
  7.     const changeEmail =  useCallback((e)=>setFormValue('email',e.target.value),[setFormValue])
  8.     return (
  9.         <form>
  10.             <div className="form-group">
  11.                <label>用户名</label>
  12.                <input className="form-control" placeholder="用户名"
  13.                  value={formData.username}
  14.                  onChange={changeUsername}
  15.                />
  16.             </div>
  17.             <div className="form-group">
  18.                <label>邮箱</label>
  19.                <input className="form-control" placeholder="邮箱"
  20.                  value={formData.email}
  21.                  onChange={changeEmail}
  22.                />
  23.             </div>
  24.             <button type="button" className="btn btn-primary" onClick={()=>console.log(formData)}>提交</button>
  25.             <button type="button" className="btn btn-primary" onClick={()=>resetFormValues()}>重置</button>
  26.         </form>
  27.     )
  28. }
  29. export default Form;

4、useAnimation

4-1、hooks/useAnimation.js

  1. import { useState } from "react";
  2. function useAnimate(baseClassName, activeClassName) {
  3.   let [className, setClassName] = useState(baseClassName);
  4.   const toggle = () => {
  5.     if (className === baseClassName) {
  6.       setClassName(`${baseClassName} ${activeClassName}`);
  7.     } else {
  8.       setClassName(`${baseClassName}`);
  9.     }
  10.   };
  11.   return [className, toggle];
  12. }
  14. export default useAnimate;

4-2、page/Animate.js

  1. import React from "react";
  2. import useAnimation from "../hooks/useAnimation";
  3. import "./Animation.css";
  4. export default function Animation() {
  5.   const [className, toggle] = useAnimation("circle", "active");
  6.   return <div className={className} onClick={toggle}></div>;
  7. }

4-3、page/Animate.css

  1. .circle {
  2.   width: 200px;
  3.   height: 200px;
  4.   transition: all 3s;
  5.   border-radius: 50%;
  6.   background: #ff0;
  7. }
  9. .circle.active {
  10.   background: #f00;
  11. }

5、useDebounce

防抖setState

  1. import { useEffect, useState } from "react";
  3. function useDebounce(value: any, delay = 300) {
  4.   const [debouncedValue, setDebouncedValue] = useState(value);
  5.   useEffect(() => {
  6.     const handler = window.setTimeout(() => {
  7.       setDebouncedValue(value);
  8.     }, delay);
  9.     return () => {
  10.       clearTimeout(handler);
  11.     };
  12.   }, [value, delay]);
  13.   return debouncedValue;
  14. }
  16. export default useDebounce;

6、useClickOutside

点击目标元素外面区域触发事件

  1. import {RefObject,useEffect} from 'react'
  3. function useClickOutside(ref: RefObject<HTMLElement>,handler:Function) {
  4.     useEffect(() => {
  5.         const listener = (event:MouseEvent) => {
  6.             if(!ref.current || ref.current.contains(event.target as HTMLElement)){
  7.                 return
  8.             }
  9.             handler(event)
  10.         }
  11.         window.addEventListener('click',listener)
  12.         return () => {
  13.             window.removeEventListener('click',listener)
  14.         }
  15.     }, [ref, handler])
  16. }
  17. export default useClickOutside