react hooks 全攻略

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

import { useEffect } from "react";

useEffect((list:any)=>{
  // 渲染组件后执行的操作
  // xxx
  retrun ()=>{
    // 组件销毁前执行的回调函数
  }
},[list])

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 在组件渲染后获取数据
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

import React, { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    const handleClick = (event) => {
      console.log("Button clicked");
    };

    window.addEventListener("click", handleClick);

    return () => {
      window.removeEventListener("click", handleClick);
    };
  }, []);

  return (
    <div>
      <button>Click me</button>
    </div>
  );
};

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  };

  fetchData();
}, []);

import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  // <React.StrictMode>
  <App />
  // </React.StrictMode>
);

import React, { useRef } from "react";

const TextInput = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default TextInput;

import React, { useMemo } from "react";

const MyComponent = ({ a, b }) => {
  const result = useMemo(() => {
    console.log("Recalculating result");
    return a + b;
  }, [a, b]);

  return (
    <div>
      <p>Result: {result}</p>
    </div>
  );
};

// 示例二

const MyBtn = ({ text, size }: { text: string, size: any }) => {
  return useMemo(() => {
    return <Button size={size}>{text + "--" + new Date().getTime()}</Button>;
  }, [text, size]);
};

import React, { useState, useCallback } from "react";
// 子组件
const ChildComponent = ({ increment }) => {
  // 子组件使用 increment 回调函数
  return <button onClick={increment}>Increment</button>;
};

// 父组件
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent increment={increment} />
    </div>
  );
};

import { useEffect } from "react";
import { useLocation, useNavigate } from "react-router";
// 白名单
const filterPath = ["/", "/home"];
// 路由守卫好比一个门神守卫网站，当页面路由路径发生变化时，门神启动进行拦截，身份确认成功后放行，失败返回初始页
// 通过 useLocaltion 获取页面的位置信息，返回一个对象，包含页面路径、参数、hash值等
export const useWatchRoute = () => {
  const localtion = useLocation();
  const navigate = useNavigate();
  useEffect(() => {
    console.log("localtion", localtion);
    // 检测本地token
    const token = localStorage.getItem("token");
    // 指定页面不进行token检测[白名单]
    const hasPermission = filterPath.some(
      (path) => path === localtion.pathname
    );

    if (!token && !hasPermission) {
      // router编程式导航-跳转页面
      navigate("/login");
    }
    // useEffect 第二个参数是依赖数组，当数组中依赖项发生变化时，useEffect会重新执行
  }, [localtion.pathname]);

  return null;
};

import React from "react";
import useRouteGuard from "./useRouteGuard";

function ProtectedRouteComponent() {
  useWatchRoute();

  return <div>{/* 组件内容 */}</div>;
}
export default ProtectedRouteComponent;

export const useUpdate = () => {
  const [, setUpdate] = useState({});
  return useCallback(() => {
    setUpdate({});
  }, []);
};
const update = useUpdate();
return (
  <div>
    <p>时间{Date.now()}</p>
    <button onClick={update}> 更新时间</button>
  </div>
);

export const useMount = (fn: () => void) => {
  useEffect(() => {
    fn?.();
  }, []);
};

// 自定义hooks ，定义组件挂载前的函数、销毁后的函数
export const useUnmount = (fn: () => void) => {
  // const ref = useRef(fn)
  // ref.current = fn;
  useEffect(() => {
    // retrun 之前的代码执行一些组件渲染后的操作
    // retrun是在组件销毁前 执行一个清理回调函数、用于关闭定时器、请求
    return () => {
      fn();
    };
  }, []);
};

import { useMount, useUnmount, useUpdate } from "./components/tool";

const Child = () => {
  useMount(() => {
    console.log("组件挂载了");
    Toast.show("首次渲染");
  });
  useUnmount(() => {
    console.log("组件销毁了");
    Toast.show("组件卸载了");
  });
  return <div>应用自定义hooks的组件 </div>;
};

const [flag, setFlag] = useState < boolean > true;
const btnClick = () => {
  setFlag(!flag);
};
return (
  <div className="App">
    <button onClick={btnClick}></button>
    {flag && <Child></Child>}
  </div>
);

useEffect(() => {
  // 错误示例：直接修改状态
  // setCount(count + 1);

  // 正确示例：使用setState或提取相关变量
  setCount((prevCount) => prevCount + 1);
  // 或者
  const newCount = count + 1;
  // 使用newCount进行其他操作
}, [count]); // 注意在依赖项数组中引用状态

const prevCountRef = useRef();
useEffect(() => {
  prevCountRef.current = count;
  // 执行其他副作用操作
});

import React, { useState, useEffect } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Effect triggered");
    return () => {
      console.log("Effect cleanup");
    };
  }, [count]);

  const handleClick = () => {
    for (let i = 0; i < 3; i++) {
      setCount(count + 1); // 错误的调用 Hook，可能导致多次注册
    }
  };

  return (
    <div>
      <button onClick={handleClick}>Increase Count</button>
    </div>
  );
}

import React, { useState, useEffect } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Effect triggered");
    return () => {
      console.log("Effect cleanup");
    };
  }, [count]);

  const handleClick = () => {
    let updatedCount = count;
    for (let i = 0; i < 3; i++) {
      updatedCount += 1;
    }
    setCount(updatedCount);
  };

  return (
    <div>
      <button onClick={handleClick}>Increase Count</button>
    </div>
  );
}

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"
  }
}