---
name: 快速开始
route: /
order: 0
sidebar: true
---

# 目的

在React中引入@vue/reactivity这个库，使用vue3的响应式能力来管理状态。

## 简单用法

import Index from './index'

<Index />

## Codes
```tsx
import React from 'react';
import { setup } from '../../src';
import { reactive } from '@vue/reactivity'

export default setup(() => {
  const data = reactive({ message: 'World' });

  const change = () => (data.message = 'Hey');

  return props => (
    <>
      <h1>Hello {data.message}</h1>
      <button onClick={change}>change</button>
    </>
  );
});

```