React 的正确使用方法：ref 篇

function MyComponent() {  // 写法 1  const ref = useRef();
  // 写法 2  const ref = useRef(undefined);
  // 写法 3  const ref = useRef(null);
  // 通过 ref 计算 DOM 元素尺寸  // 🚨 这段代码故意留了坑，坑在哪里？请看下文。  useLayoutEffect(() => {    const rect = ref.current.getBoundingClientRect();  }, [ref.current]);
  return <div ref={ref} />;  }

function MyComponent() {  // ❌ 写法 1  // 你会得到一个 MutableRefObject<HTMLDivElement | undefined>，  // 即 ref.current 类型是 HTMLDivElement | undefined，  // 这导致你每次获取 DOM 元素都需要判断是否为 undefined，很是麻烦。  const ref = useRef<HTMLDivElement>();
  // ❌ 写法 2.1  // 你可能想得到一个 MutableRefObject<HTMLDivElement>，但初始值传入的  // undefined 并不是 HTMLDivElement，所以会 TS 报错。  const ref = useRef<HTMLDivElement>(undefined);
  // ❌ 写法 2.2  // 等价于写法 1，但需要多打一些字。  const ref = useRef<HTMLDivElement | undefined>(undefined);
  // ✅ 写法 3  // 你会得到一个 RefObject<HTMLDivElement>，其中  // ref.current 类型是 HTMLDivElement | null。  // 这个 ref 的 current 是不可从外部修改的，更符合使用场景下的语义，  // 也是 React 推荐的获取 DOM 元素方式。  // 注意：如果 tsconfig 没开 strictNullCheck，则不会匹配到这个定义，  // 因此请务必开启 strictNullCheck。  const ref = useRef<HTMLDivElement>(null);
  // 通过 ref 计算 DOM 元素尺寸  // 🚨 这段代码故意留了坑，坑在哪里？请看下文。  useLayoutEffect(() => {    const rect = ref.current.getBoundingClientRect();  }, [ref.current]);
  return <div ref={ref} />;  }

function MyComponent() {  const [divEl, setDivEl] = useState<HTMLDivElement | null>(null);
  // 计算 DOM 元素尺寸  useEffect(() => {    if (divEl) {      divEl.current.getBoundingClientRect();    }  }, [divEl]);
  return <div ref={setDivEl} />;}

/* 🚨 错误案例，请勿照抄 */
function MyComponent({ visible }: { visible: boolean }) {  const ref = useRef<HTMLDivElement>(null);
  useLayoutEffect(() => {    const rect = ref.current.getBoundingClientRect();    // ...  }, [ref.current]);
  return <>{visible && <div ref={ref}/>}</>;}

function MyComponent({ visible }: { visible: boolean }) {  const ref = useRef<HTMLDivElement>(null);
  useLayoutEffect(() => {    // 这里不必额外判断 if (visible)，因为只要这里有 ref.current 那就必然是 visible    if (ref.current) {      const rect = ref.current.getBoundingClientRect();    }  }, [/* ✅ */ visible]);  // 这样，在 visible 变化时，就必然会在同一次渲染内触发 useLayoutEffect
  return <>{visible && <div ref={ref}/>}</>;}
// 或者也可以将 <div> 抽取成一个独立的组件，从而避免上述问题

function MyComponent({ visible }: { visible: boolean }) {  // ✅ 无需使用 ref  const [video, setVideo] = useState<Video | null>(null);
  const play = useCallback(() => video?.play(), [video]);
  // ✅ 使用普通 useEffect 即可  useEffect(() => {    console.log(video.currentTime);  }, [video]);
  return <>{visible && <video ref={setVideo}/>}</>;}

/* 🚨 错误案例，请勿照抄 */
const MyComponent = forwardRef(  function (    props: MyComponentProps,     // type ForwardedRef<T> =     //   | ((instance: T | null) => void)    //   | MutableRefObject<T | null>    //   | null    // ✅ 这个工具类型覆盖了传 useRef 和传 setState 的情况，是正确的写法    ref: ForwardedRef<HTMLDivElement>  ) {    useLayoutEffect(() => {      const rect = ref.current.getBoundingClientRect();      // 使用 rect 进行计算    }, []);        return <div ref={ref}>{/* ... */}</div>;  }});

/* 🚨 错误案例，请勿照抄 */
const MyComponent = forwardRef(  function (    props: MyComponentProps,     ref: ForwardedRef<HTMLDivElement>) {    const localRef = useRef<HTMLDivElement>(null);        useLayoutEffect(() => {      const rect = localRef.current.getBoundingClientRect();      // 使用 rect 进行计算    }, []);
    return <div ref={(el: HTMLDivElement) => {      localRef.current = el;      if (ref) {        ref.current = el;      }    }}>{/* ... */}</div>;  }});

import { mergeRefs } from "react-merge-refs";
const MyComponent = forwardRef(  function (    props: MyComponentProps,     ref: ForwardedRef<HTMLDivElement>) {    const localRef = React.useRef<HTMLDivElement>(null);
    useLayoutEffect(() => {      const rect = localRef.current.getBoundingClientRect();      // 使用 rect 进行计算    }, []);        return <div ref={mergeRefs([localRef, ref])} />;  });

function MyPage() {  const ref = useRef<FormRef>(null);
  return (    <div>      <Button onClick={() => { ref.current.reset(); }}>重置表单</Button>      <Form actionRef={ref}>{/* ... */}</Form>    </div>  );}

/* 🚨 错误案例，请勿照抄 */
interface MySuperDuperComponentAction {  reset(): void;}
const MySuperDuperComponent = forwardRef(  function (    props: MySuperDuperComponentProps,    ref: ForwardedRef<MySuperDuperComponentAction>) {    const action = useMemo((): MySuperDuperComponentAction => ({      reset() {        // ...      }    }), [/* ... */]);        if (ref) {      ref.current = action;    }
    return <div/>;  }  );   

const MyComponent = forwardRef(  function (    props: MyComponentProps,     ref: ForwardedRef<MyComponentRefType>) {    // useImperativeHandle 这个工具函数会自动处理函数 ref 和对象 ref 的情况，    // 后两个参数基本等于 useMemo    useImperativeHandle(ref, () => ({      refresh: () => {        // ...      },      // ...    }), [/* deps */]);
    // 命令式 + 下传    // 如果你的组件内部也会用到这个命令式对象，推荐的写法是：    const actions = useMemo(() => ({      refresh: () => {        // ...      },    }), [/* deps */]);    useImperativeHandle(ref, () => actions, [actions]);        return <div/>;  });

const MyComponent = forwardRef(  function (    props: MyComponentProps,    ref: ForwardedRef<MyComponentRefType>) {    return <div/>;  }});
// 其结果类型为：// const MyComponent: ForwardRefExoticComponent<//   PropsWithoutRef<MyComponentProps> & RefAttributes<MyComponentRefType>// >
// 这里最后导出的 PropsWithoutRef<P> & RefAttributes<T> 就是用户侧最终可传的类型，// 其中 PropsWithoutRef 会无视你 component 中 props 的 ref。

/* 🚨 错误案例，请勿照抄 */
interface OtherComponentProps {  ref?: Ref<OtherComponentActions>;}
interface MyComponentProps extends OtherComponentProps {  myAdditionalProp: string;}
// 这是错误的，props 里根本拿不到 ref！function MyComponent({ myAdditionalProp, ...props }: MyComponentProps) {  console.log(myAdditionalProp);
  return <OtherComponent {...props} />;}