useRef为什么可以用来封装成usePrevious?

// 定义
const inputRef = useRef(null);

// 使用
console.log(inputRef.current)

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

  function focusInput() {
    inputRef.current.focus();
  }

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

import { forwardRef, useRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

function Timer() {
  const count = useRef(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      count.current += 1;
      console.log(`Elapsed time: ${count.current} seconds`);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <div>Check the console to see the elapsed time!</div>;
}

function DisplayValue({ value }) {
  const [prevValue, setPrevValue] = useState(null); // 初始时，没有前一个值
  const previousValue = useRef(value);

  useEffect(() => {
    setPrevValue(currentRef.current);
    previousValue.current = value;
  }, [value]);

  return (
    <div>
      Current Value: {value} <br />
      Previous Value: {prevValue}
    </div>
  );
}

function DisplayValue({ value }) {
  const previousValue = useRef(value);

    // 错误：在渲染期间修改 ref
  if (previousValue.current !== value) {
    previousValue.current = value;
  }

  return (
    <div>
      Current Value: {value} <br />
      {/* 错误：在渲染期间读 ref */}
      Previous Value: {previousValue.current}
    </div>
  );
}

function ClickCounter() {
  // bad。这里的问题是，每次组件渲染时，getInitialCount都会被调用，尽管它的返回值只在第一次渲染时被使用。
  const countRef = useRef(getInitialCount());

  function handleClick() {
    countRef.current += 1;
    console.log(`Button clicked ${countRef.current} times.`);
  }

  return <button onClick={handleClick}>Click me!</button>;
}

function ClickCounter() {
    // good
  const countRef = useRef(null);
    // good
  if (countRef.current === null) {
    countRef.current = getInitialCount();
  }

  function handleClick() {
    countRef.current += 1;
    console.log(`Button clicked ${countRef.current} times.`);
  }

  return <button onClick={handleClick}>Click me!</button>;
}

const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const actionsCountRef = useRef(0);

  function handleIncrement() {
    dispatch({ type: "increment" });
    actionsCountRef.current += 1;
    console.log(`Actions count: ${actionsCountRef.current}`);
  }

  return (
    <>
      Count: {state.count}
      <button onClick={handleIncrement}>Increment</button>
    </>
  );
}

import { useRef, useEffect } from 'react';
import * as d3 from 'd3';

function BarChart() {
  const chartRef = useRef(null);

  useEffect(() => {
    const svg = d3.select(chartRef.current);
    // ... 使用 D3 进行图表绘制
  }, []);

  return <svg ref={chartRef}></svg>;
}

import { useEffect, useRef } from "react";

function MovingBox() {
  const boxRef = useRef(null);
  const animationFrameRef = useRef(null);

  useEffect(() => {
    const boxElem = boxRef.current;
    let position = 0;

    const animate = () => {
      position += 1;
      if (position > window.innerWidth) {
        position = -100; // 如果方块移动到屏幕的右侧，则从左侧重新开始
      }
      boxElem.style.transform = `translateX(${position}px)`;
      animationFrameRef.current = requestAnimationFrame(animate);
    };

    animationFrameRef.current = requestAnimationFrame(animate);

    return () => {
      cancelAnimationFrame(animationFrameRef.current); // 在组件卸载时取消动画
    };
  }, []);

  return (
    <div
      ref={boxRef}
      style={{ width: "100px", height: "100px", background: "blue" }}
    ></div>
  );
}

export default MovingBox;

function WindowSize() {
  const widthRef = useRef(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      widthRef.current = window.innerWidth;
      console.log(`Width: ${widthRef.current}`);
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return <div>Check the console for window width updates!</div>;
}

import { SideDrawerRef } from 'SideDrawer'

export function FiretableContextProvider({ children }) {
  const sideDrawerRef = useRef<SideDrawerRef>();

  return (
    <FiretableContext.Provider value={{ sideDrawerRef }}>
      {children}
    </FiretableContext.Provider>
  )
}