vue3函数式与函数式组件的太监文
Author：zhoulujun Date：
之前总结过：
《React Hooks：React 函数式组件和类组件》,
《ReactHook详解: 改变的React Component写法思路》
react 的制作团队在 2019 年推出了 React Hooks, 改变了原始组件用 class 的开发方式, 全部采用函数的形式来编写组件, 大大的方便了开发者, 受到全世界前端的喜爱, Hooks 的诞生成为了前端工程师的一把好梭、
与React类组件相比，React函数式组件究竟有何不同？
一般的回答都是：
类组件比函数式组件多了更多的特性，比如
state，那如果有Hooks之后呢？函数组件性能比类组件好，但是在现代浏览器中，闭包和类的原始性能只有在极端场景下才会有明显的差别。
性能主要取决于代码的作用，而不是选择函数式还是类组件。尽管优化策略有差别，但性能差异可以忽略不计。
参考官网：https://zh-hans.reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render
参考作者github：https://github.com/ryardley/hooks-perf-issues/pull/2
而下面会重点讲述：React的函数式组件和类组件之间根本的区别： 在心智模型上。
无论框架如何的迭代，我们 JS 是永远不会太大的变化的，所有框架都是基于 JS 去写的，如何让我们通用 JS 代码被不同的框架去应用，让我们的通用代码去框架化，是我们应该思考的问题。《让 JS 摆脱框架的束缚 https://mp.weixin.qq.com/s/n65x3duoeQAtQU_fH_dJDw》
读这个前，建议先读：
《再谈编程范式(3):理解面向过程/面向对象/函数式编程的精髓》
《从λ演算到函数式编程聊闭包(1)：闭包概念在Java/PHP/JS中形式》
《从λ演算到函数式编程聊闭包(2)：彻底理解JavaScript闭包规则》
Vue3函数式组件
Composition Api解耦Vue2 Option Api实现低耦合高内聚
Composition Api 与hooks
如果是Composition Api在功能复杂、代码量巨大的组件下，我们配合自定义Hook，将代码按功能分块写，变量和方法在一起定义和调用，比如A功能下集成了响应式变量和方法，我们后期维护只需要改动A功能模块下的代码，不会像Vue2在Option Api需要同时关注逻辑分散的methos和data。
虽然官方没有明确指明或定义什么是自定义Hooks，但是却无处不在用；
以函数形式抽离一些可复用的方法像钩子一样挂着，随时可以引入和调用，实现高内聚低耦合的目标；
将可复用功能抽离为外部JS文件
函数名/文件名以use开头，形如：useXX
引用时将响应式变量或者方法显式解构暴露出来如：const {nameRef，Fn} = useXX()，（在setup函数解构出自定义hooks的变量和方法）
具体参看：《Vue3必学技巧-自定义Hooks-让写Vue3更畅快 https://juejin.cn/post/7083401842733875208》
函数式组件
函数组件举例：
import { h } from 'vue';
const DynamicHeading = (props, context) => {
return h(`h${props.level}`, context.attrs, context.slots);
};
DynamicHeading.props = ['level'];
export default DynamicHeading;可以做封装，比如sdk输出：
// message.js
import { render, h } from 'vue'
import messageComponent from './message.vue'
export const message = (message, duration = 3000,dom=document.body) => {
const handleDestroy = () => {
// 从 body 上移除组件
render(null, document.body)
}
// 使用 h 函数创建 vnode
const vnode = h(messageComponent, {
message,
duration,
destroy: handleDestroy
})
// 使用 render 函数将 vnode 渲染为真实DOM并挂载到 body 上
render(vnode, dom)
}综合看起来，vue3除了hooks 对业务逻辑组 函数封装。在UI层面，函数式 GG
具体参看：《Composition API in a functional component https://github.com/vuejs/core/issues/1645》
函数式，本来开一篇长文，但是还是，同学，react 真的不香吗？
参考文章：
Vue3 函数式组件的开发方式 https://juejin.cn/post/7170511660648988685
vue3 函数式组件 functional https://www.mulingyuer.com/archives/825/
前端业务代码如何复用 https://zhuanlan.zhihu.com/p/406182932
转载本站文章《vue3函数式与函数式组件的太监文》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8934.html