两者区别: 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);
}