reactive ref

在React中，`reactive ref`通常指的是使用`ref`和`reactive`两个概念结合起来的一种技术。`ref`是React提供的一个特殊的对象，用来在函数组件中存储可变值。而`reactive`是Vue.js中的一个概念，用于创建响应式数据。

在React中，由于函数组件的特性，无法直接使用Vue.js的`reactive`来创建响应式数据。但是可以使用`ref`来模拟类似的功能。通过使用`ref`创建一个可变的引用值，并且使用React的钩子函数来监听该引用值的变化，从而实现类似于Vue.js中响应式数据的效果。

以下是一个简单示例，展示了如何使用`reactive ref`：

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

function MyComponent() {
  const countRef = useRef(0);

  useEffect(() => {
    console.log('Count changed:', countRef.current);
  }, [countRef.current]);

  const handleClick = () => {
    countRef.current += 1;
  };

  return (
    <div>
      <button onClick={handleClick}>Increase Count</button>
    </div>
  );
}

在上述示例中，我们使用了`useRef`来创建了一个名为`countRef`的引用。初始值为0。然后，我们使用了`useEffect`钩子函数来监听`countRef.current`的变化，并在变化时打印出新的值。在点击按钮时，`handleClick`函数会通过修改`countRef.current`的值来增加计数。

尽管这种方式并不直接是React中的官方推荐做法，但它可以模拟出类似Vue.js中响应式数据的效果。