自定义React Hooks(记录先前状态):usePrevious
usePrevious Hoos可以用来存储props或以前的状态。
- 首先,创建一个接受值的Hook。
- 然后,我们使用useRef Hook为该值创建一个ref。
- 最后,使用useEffect记住最新值。
代码示例:
const usePrevious = value => {
const ref = React.useEffect();
React.useEffect(()=> {
ref.current = value;
});
return ref.current;
}
使用示例:
const MoneyCount = () => {
const [value, setValue] = React.useState(0);
const lastValue = usePrevious(value);
return (
<div>
<p>Current: {value} - Previous:{lastValue}</p>
<button onClick={()=>setValue(value+1)}> Increment Money</button>
</div>
);
};
ReactDOM.render(<MoneyCount />, document.getElementById("root"));