02.usePrevious

文章预览

在 React 开发中，有时我们需要 访问组件的前一个状态或属性 。这在进行比较、动画或其他需要历史数据的操作时特别有用。 usePrevious 钩子提供了一种简单而有效的方式来存储和访问前一个值。以下是如何实现和使用这个自定义钩子： const  usePrevious =  value  =>  {    const  ref = React.useRef();   React.useEffect( ()  =>  {     ref.current = value;   });    return  ref.current; }; const  Counter =  ()  =>  {    const  [value, setValue] = React.useState( 0 );    const  lastValue = usePrevious(value);    return  (      < div >        < p >         Current: {value} - Previous: {lastValue}        p >        < button   onClick = {()  =>  setValue(value + 1)}>Increment button >      div >   ); }; ReactDOM.createRoot( document .getElementById( 'root' )).render(    < Counter  /> ); 这个技巧的关键点包括： 创建 ………………………………