发布于 3年前

自定义React Hooks(记录先前状态):usePrevious

usePrevious Hoos可以用来存储props或以前的状态。

  1. 首先,创建一个接受值的Hook。
  2. 然后,我们使用useRef Hook为该值创建一个ref。
  3. 最后,使用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"));
©2020 edoou.com   京ICP备16001874号-3