docs: migration from react

Author: zhiyuanzmj

docs/introduction/migration.md

@@ -2,9 +2,9 @@
 
 ## Migration from `vue-jsx`
 
-1. Doesn't support hyphenated prop name and hyphenated component name.
-2. `v-model` doesn't support Array Expression, use `v-model:$name$_trim={foo}` instead.
-3. Doesn't support `v-models` directive.
+1. Don't support hyphenated prop name and hyphenated component name.
+2. `v-model` don't support Array Expression, use `v-model:$name$_trim={foo}` instead.
+3. Don't support `v-models` directive.
 4. Destructing props:
 
 > [!CAUTION]
@@ -71,4 +71,141 @@ export default () => {
       const foo = ref('foo')
       return <Comp foo={foo.value} />
     }
-    ```
+    ```
+
+## Migration from `react`
+
+Suggest using the ESLint plugin [eslint-plugin-react2vue](https://github.com/zhiyuanzmj/eslint-plugin-react2vue) for converting the React Hooks API to the Vue Composition API and Macros.
+
+### useState
+
+```ts
+// before
+const [foo, setFoo] = useState(count)
+console.log([foo, setFoo(1), setFoo])
+
+// after
+const foo = ref(0)
+console.log([foo.value, foo.value = 1, val => foo.value = val])
+```
+
+### useEffect
+
+Use `watchEffect` instead of `useEffect`.
+
+```ts
+// before
+useEffect(() => {
+  console.log(foo)
+}, [foo])
+
+// after
+watchEffect(() => {
+  console.log(foo)
+})
+```
+
+### useMemo
+
+Use `computed` instead of `useMemo`.
+
+```ts
+// before
+const double = useMemo(() => foo * 2, [foo])
+console.log({ double }, [double])
+
+// after
+const double = computed(() => foo * 2)
+console.log({ double: double.value }, [double.value])
+```
+
+### defineComponent
+
+Use `defineComponent` macro to support destructuring props.
+
+```tsx
+// before
+const Comp = ({ count = 1 }) => {
+  return <div>{count}</div>
+}
+
+// after
+const Comp = defineComponent(({ count = 1 }) => {
+  return <div>{count}</div>
+})
+```
+
+### defineSlots
+
+Use `defineSlots` instead of `children` prop.
+
+```tsx
+// before
+const Comp = ({ children }) => {
+  return children
+}
+
+// after
+const Comp = ({ children }) => {
+  const slots = defineSlots()
+  return <slots.default />
+}
+```
+
+### useCallback
+
+Remove useCallback.
+
+```ts
+// before
+const callback = useCallback(() => {
+  console.log(foo)
+}, [foo])
+
+// after
+const callback = () => {
+  console.log(foo)
+}
+```
+
+### forwardRef
+
+Remove forwardRef.
+
+```tsx
+// before
+const Comp = forwardRef(({ count }, ref) => {
+  return <div>{count}</div>
+})
+
+// after
+const Comp = ({ count }) => {
+  return <div>{count}</div>
+}
+```
+
+### useImperativeHandle
+
+Use `defineExpose` instead of `useImperativeHandle`.
+
+```tsx
+// before
+const Comp = ({ count, ref }) => {
+  useImperativeHandle(ref, () => {
+    return {
+      count: count * 2
+    }
+  }, [count])
+  return <div>{count}</div>
+}
+
+// after
+const Comp = ({ count }) => {
+  defineExpose(computed(() => {
+    return {
+      count: count * 2
+    }
+  }))
+  return <div>{count}</div>
+}
+```