两者区别: createRef 每次渲染都会返回一个新的引用,而useRef 每次都会返回相同的引用。

useRef
一般用于函数组件
useRef 不仅仅是用来管理 DOM ref 的,它还相当于 this , 可以存放任何变量.
当 useRef 的内容发生变化时,它不会通知您。
更改.current属性不会导致组件重新渲染。因为他一直是一个引用 。
createRef
一般用于类组件
	React.createRef 创建一个能够通过 ref 属性附加到 React 元素的 ref。
如果用于函数组件中
	当App这个函数组件被重新渲染时,App函数将会执行,并且重新创建、初始化所有的变量和表达式。
	因此,createRef每次都会被执行,所以对应的值总是为null。

实际应用的区别
useRef 仅能用在 FunctionComponent,createRef 仅能用在 ClassComponent。

Ref 不仅可以拿到组件引用、创建一个 Mutable 副作用对象,还可以配合 useEffect 存储一个较老的值,最常用来拿到 previousProps,React 官方利用 Ref 封装了一个简单的 Hooks 拿到上一次的值:

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

由于 useEffect 在 Render 完毕后才执行,因此 ref 的值在当前 Render 中永远是上一次 Render 时候的,我们可以利用它拿到上一次 Props:

function App(props) {
 const preProps = usePrevious(props);
}
posted on 2023-05-22 15:17  蒸汽小工人  阅读(695)  评论(0编辑  收藏  举报