使用React Hooks获取之前的属性值

React Hooks 是 React 16.8.0 版本引入的新特性，可以让我们在无需编写类组件的情况下使用 React 的状态和其他功能。使用 React Hooks 来获取之前的属性值可以通过 useRef 和 useEffect 两个 Hook 来实现。

useRef Hook：useRef 返回一个可变的 ref 对象，该对象的 .current 属性被初始化为传入的参数（初始值），并且在组件的整个生命周期内保持不变。在函数组件中，可以使用 useRef 来存储和访问属性值。
useEffect Hook：useEffect 允许我们在函数组件中执行副作用操作，比如订阅事件、请求数据等。通过在 useEffect 的依赖数组中传入属性值，可以监听属性值的变化。

下面是使用 React Hooks 获取之前的属性值的示例代码：

import React, { useState, useRef, useEffect } from 'react';

const MyComponent = () => {
  const [value, setValue] = useState('');
  const previousValueRef = useRef('');

  useEffect(() => {
    previousValueRef.current = value;
  }, [value]);

  const handleInputChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleInputChange} />
      <p>当前属性值：{value}</p>
      <p>之前的属性值：{previousValueRef.current}</p>
    </div>
  );
};

export default MyComponent;

在上述代码中，我们通过 useState Hook 来声明并初始化一个名为 value 的属性值，并通过 handleInputChange 函数来更新该属性值。同时，我们使用 useRef Hook 来创建一个名为 previousValueRef 的 ref 对象，用于存储之前的属性值。在 useEffect 中，我们监听 value 属性值的变化，并将其赋值给 previousValueRef.current，从而实现获取之前的属性值。

此外，React Hooks 还有很多其他功能，比如 useContext 用于在函数组件中使用 React 的上下文，useReducer 用于使用 Reducer 模式管理组件的状态，以及自定义的 Hook 等等。通过结合不同的 Hook，我们可以更加高效和灵活地开发 React 应用。