自定义 hooks
usePrevious
ref.current 的改变不会引起视图更新。useRef 是 React 中用于访问 DOM 节点或存储任意可变值的 hook,其值在整个组件生命周期内保持不变,但它的变化不会触发组件重新渲染。
解释:
useRef的特性:useRef创建的ref对象在组件的整个生命周期内保持不变。ref.current属性是一个可变的容器,可以存储任何值,但它的变化不会导致组件重新渲染。
- 与
useState的区别:useState创建的状态变量发生变化时,组件会重新渲染。useRef创建的ref对象发生变化时,组件不会重新渲染。
import { useRef, useEffect } from 'react';
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
export default usePrevious;
// ahooks 实现
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
exports['default'] = void 0;
var _react = require('react');
var defaultShouldUpdate = function defaultShouldUpdate(a, b) {
return !Object.is(a, b);
};
function usePrevious(state, shouldUpdate) {
if (shouldUpdate === void 0) {
shouldUpdate = defaultShouldUpdate;
}
var prevRef = (0, _react.useRef)();
var curRef = (0, _react.useRef)();
if (shouldUpdate(curRef.current, state)) {
prevRef.current = curRef.current;
curRef.current = state;
}
return prevRef.current;
}
var _default = usePrevious;
exports['default'] = _default;