Vue的组合式api和React hooks的对比

Vue3推出了组合式API，提供了更好的逻辑复用、更灵活的代码组织的书写js方式。
那么对比react的hooks有什么不同呢？

首先，应该明确一点。组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。

组合式API提供了和React hooks相同级别的逻辑组织能力。

区别主要有：
React hooks：

• Hooks有严格的调用顺序，不能写在条件分支中。
• React组件中定义的变量在一个钩子函数闭包中捕获，开发者非常依赖ESLint规则来保证依赖数组的传递正确性，而这些规则不够智能。
• 昂贵计算需要useMemo，并且要传入正确的依赖数组。
• React在默认情况下，传递给子组件的事件处理函数会导致子组件不必要更新，需要调用useCallback优化。避免过度渲染，引发性能问题。
• 变量闭包问题。较难推理出一段钩子代码什么时候运行，且不好处理多次渲染间的useRef的可变状态。

Vue的组合式API：

• setup走天下，不需要担心闭包变量问题，不限制调用顺序，可以有条件调用。
• Vue响应式自动收集依赖，无需手动声明依赖。
• 无需手动缓存回调函数避免不必要组件更新。（Vue的保姆式包办）

不过：用React hooks也可以手动优化，更接近于原生js的写法。
总之，萝卜青菜各有所爱，Vue的组合式API也受到了React hooks的启发，两者都很好用！