React 的正确使用方法：ref 篇

文章预览

阿里妹导读 你真的用对了 useRef 吗？在与 TypeScript 一起使用、以及撰写组件库的情况下，你的写法能够避开以下所有场景的坑吗？ 说到 useRef ，相信你一定不会陌生：你可以用它来获取 DOM 元素，也可以多次渲染之间保持引用不变…… 然而，你真的用对了 useRef 吗？在与 TypeScript 一起使用、以及撰写组件库的情况下，你的写法能够避开以下所有场景的坑吗？ 场景一：获取 DOM 元素 以下几种写法，哪种是正确的？ 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 ;   } 如果只看 JS，几种写法似 ………………………………