目前流行的写法，vue3用组合式api，react用hook。

本文对比这二者的写法，为vue3转hook的朋友提供快速上手指南，react零基础读者请先将react hello world跑起来。

推荐使用next.js

☺hook具体用法请参考官方文档 Hook API 索引 – React (reactjs.org)

常用hook

• useState
• useEffect
• useCallback
• useMemo

hook函数的第二个变量一般都是依赖项(optional可选的)，依赖值变动后才会触发。

Vue

响应式变量

在Vue中一般使用 reactive，或者 ref创建响应式变量。 react使用useState

const [count, setCount] = userState(0)

计算属性

vue中使用computed计算响应式变量，变化后的值，该值也具有响应式。 react需要使用普通变量，并用useMemo返回计算后的值

let count = 1
const doubleCount = useMemo(()=>count*2, [count])

methods 方法

vue在组合式api里，是setup里的函数。 useCallback可以指定依赖项，依赖项变化了才重新创建函数。属于性能优化方法，可不用。

const [count, setCount] = useState(0)
const reduce = useCallback(
()=>{setCount(count-1)}
, [count])

生命周期

react hook里面不像vue区分了onMount，beforeCreated等等。 useEffect 会在dom渲染，更新后运行，return表示组件unMount后运行，一般用来清理环境。

Refer to：如何快速从vue转react hook开发 - 掘金 (juejin.cn)