关于前端复用的几点思考和建议——hook
发布网友
发布时间：2024-10-03 05:31
我来回答
共1个回答
热心网友
时间：2024-10-20 15:46
复用在前端具有多种形式，例如指令、filters（Vue 3 已废弃）、minx（Vue 3 已废弃）、hook 和计算属性。这些不同概念是对框架层面抽象的不同场景和需求，从错误频率来看，filter < 指令 < 计算属性 < hook < mixin。前两者是纯函数，输入输出确定，调试和理解成本低。计算属性带缓存，是函数，而hook和mixin分别是带副作用的函数。
在Vue中，mixin是一种替代方案，尤其当组件需要从多个不同组件共享方法时。然而，mixin的使用存在命名冲突和多继承的问题，这些问题在传统编程语言中已经被解决，但在前端环境中，mixin仍然存在维护性差的问题。
React团队推出了hook，旨在解决高阶组件带来的深层嵌套问题，提供了一种更简便、更灵活的方式来处理状态逻辑复用。Hook的本质是带副作用的反应式函数，通过将状态逻辑包装到函数中，使得复用的模块能够像函数一样方便地调用。
Hook与反应式编程（Rx）的区别在于，Hook虽然也尝试在函数中处理状态逻辑，但其通过监听函数中的特定数据变化，重新返回新的值，这在某种程度上模拟了面向对象的状态管理。
在使用Hook时，要避免过度复杂的状态和行为，遵循函数的最佳实践，如保持函数短小精悍，专注于单一功能。同时，要意识到Hook的副作用，避免在函数内部修改状态，以免引入错误和复杂性。
Hook的设计应追求内聚性，避免组件向上复用过多的状态，以降低维护成本。设计原则应与类相似，强调高度内聚，减少组件之间的依赖，通过纯粹的函数接口进行通信。
Hook的使用场景应该谨慎，它虽然提供了强大的功能，但也带来了潜在的复杂性和维护性问题。在使用Hook时，要评估团队成员的能力，避免滥用，以保持代码的可读性和可维护性。
总的来说，Hook在前端复用中提供了灵活的解决方案，但需谨慎使用，避免引入不必要的复杂性和潜在的错误。对于大型应用开发，如Angular等，更倾向于传统的面向对象思维和语法，以确保更稳定的代码结构和更高的可维护性。
关于前端复用的几点思考和建议——hook
总的来说，Hook在前端复用中提供了灵活的解决方案，但需谨慎使用，避免引入不必要的复杂性和潜在的错误。对于大型应用开发，如Angular等，更倾向于传统的面向对象思维和语法，以确保更稳定的代码结构和更高的可维护性。
vue的hook能将同一功能的代码单独抽成1个方法吗?
建议的话,我觉得你可以不用vue或react这样的框架去写一些ui框架,或者做一些小游戏,比如贪吃蛇,这样去促使你去做,即使它有一些复杂度,但能从中吸取一些经验。Q18: 休闲时间会做什么呢?偶尔玩玩堡垒之夜,但是也很久没玩游戏了,平时就听听歌、散散步Q19: 对于中国开发者的建议我觉得我不太确定一些事,我不知道react...
前端开发Lua篇——Profiler
只关注函数调用时加hook，若希望同时在函数返回时接收通知，可针对BC_RETX指令加hook）。不过，luajit实现的这些操作与原生Lua存在细微差异，使得luaprofiler工具在luajit环境中无法正确运行。主要差异包括：
react动态表单的思路和实现
这个hook应该接受表单配置项、表单初始值、表单ref作为参数,并返回表单数据变更listener和包含自动计算结果的表单初始值。我们从返回值开始来推导为什么需要这些参数。 首先,需求是“当被依赖项更新时自动计算”,那么有且只有在form的数据发生变化时才需要检查有没有依赖项变更并运行计算,所以说我们让hook返回form在触发on...
如何深入学习web前端?
web前端学习包括自学和系统学习两种方式，零基础是可以学会web前端的。自学吃力的原因，可能在于学习顺序不太对，比如先去学习了最难的一部分，所以感觉比较吃力。其实掌握了方法，前端学起来真的不会特别难。web全栈工程师5.0课程包括：①计算机基础以及PS基础 ②前端开发基础（HTML5开发、JavaScript基础到...
求推荐一下关于Web前端的相关资料!
二）前端框架、工具、库 React 《用 TypeScript 编写 React 的最佳实践》《2020 年你应该知道的 React 库》《5 个技巧助你编写更好的 React 代码》《10个案例让你彻底理解React hooks的渲染逻辑》《组件演进史：从Mixin到HOC，再到Hook》Vue 《1.1万字从零解读Vue3.0源码响应式系统》《重头来过...
