您现在的位置:主页 > 快讯 >

React 16.8发布了React钩子:在React组件中可重用和可

更新时间:2021-04-09 09:07:51

  React 16.8发布了React钩子:在React组件中可重用和可组合的逻辑

  React团队最近发布了以React Hooks为特色的React16.8。钩子封装了不纯逻辑(如状态或效果),具有功能语法,允许钩子被重用、组合和独立测试。开发人员还可以通过组合定义自己的钩子,并使用预定义的Hooks与React16.8一起发运。基于钩子的React组件允许开发人员构建复杂的React组件树,这些树更短,更容易理解。

  虽然React Hooks在Face book上得到了广泛的应用,但这个附带警告的功能仍然是一些开发人员之间有时会激烈讨论的问题。到目前为止,支持纯功能方法的替代社区领导的建议并没有复制React Hooks的一个关键好处:为即将到来的React版本启用并发模式。

  构成React应用程序的React组件的很大一部分是实现效果,并与本地和全局状态交互。不同的组件通常执行类似的有效计算。React Hooks将这些有效的计算打包到函数语法中,这样它们就可以在React应用程序的框架中重用。React文档提供了来自聊天应用程序的组件Friend Status的示例,该应用程序显示一条消息,该消息指示朋友是在线还是离线:

  Friend Status使用预定义的use State和useEffect通过JavaScript函数实现其指定的行为。使用状态公开setter-GetterAPI以访问它创建的本地状态。使用Effect对Friend Status的每个呈现都有影响。这种效果是通过运行该效果的函数来指定的,该函数可能初始化任何相关资源,并返回可能释放不再需要的资源的清理函数。

  在React组件树中,指定的行为将显示为单个<;Friend Status>;节点。使用通常基于类的行为实现,通过高阶组件重用状态或效果逻辑将导致这些高阶组件潜在地污染组件树,从而影响到可读性。另一方面,不重用状态或效果逻辑容易出现与手动复制相关联的错误类别,可能导致更大的代码大小,以及相应的次优用户体验。

  处理16.8艘船只,有10个预定义的挂钩,以解决具体的有效问题。这些钩子与React紧密地集成在一起,不会在React类上下文和运行时之外保留任何意义。

  预定义的React Hooks可以组成自定义Hooks,这是由开发人员定义的函数,其实现调用预定义的Hooks。React文档提供了一个聊天消息接收者选择器Chat Reacce pt Picker的示例,该示例显示当前选中的朋友是否在线:

  Chat Repiece Picker React组件重用use State钩子和use Friend Status自定义钩子。前面的示例展示了React Hooks的一个关键优势,这似乎是钩子的自然组成:捕获收件人ID的本地状态可以作为参数传递给Friend Status,提供计算当前选定收件人是否在线的预期行为,而不依赖于收件人何时更改。

  虽然React Hooks组合在语法上可能与普通JavaScript函数组合相似,但两者在语义上有着反直觉的不同,Hooks的良好行为受到特定规则的约束:

  对Hooks组合行为的管理规则,可能由一个专用的eslint插件执行,对一些开发人员来说是一个挑战和混乱的根源。一位开发商解释:

  我不习惯需要一个LINTER来告诉我什么时候有效的JavaScript是无效的,因为我碰巧使用了一个特定的库。在我看来(不过如此),这违背了编程的一些基本原则

  其他开发人员热情地接受了Hooks,并正在建立自己的直觉和推荐的实践。

  作为一种可能的补救措施,React发表了一份详细的解释,将组合行为与React Hooks的实施细节联系起来。然而,引入实现细节来理解语义和建立一个心理模型的必要性可能是阻碍开发人员更大和更快地接受的一个障碍。

  React Hooks是新的,随着与将Hooks集成到React渲染管道相关的错误和不一致出现,React团队正在积极制定常见的陷阱和对抗策略。

  React团队提倡逐步采用策略,并阻止用Hooks重写现有的基于类的代码库。文件评论:

  你现在不必学胡克斯。钩子没有中断的变化,我们也没有从React中删除类的计划。(...)我们不建议您在一夜之间重写现有的应用程序来使用Hooks。相反,尝试在一些新组件中使用Hooks,并让我们知道您的想法。使用Hooks的代码将与使用类的现有代码并排工作。

  一些React开发人员仍在研究具有更好属性的替代方案,或支持纯功能方法。然而,到目前为止,它们都没有复制React Hooks的一个关键好处,即启用即将到来的React版本并发呈现。Redux和Create React App的合著者Dan Abramov阐述了:

  我们希望闭包能够捕获我们所呈现的值,并且能够永远看到这些值。对于当前值概念并不真正存在的并发模式来说,这是非常重要的。钩子设计一个组件模型,因为它同时处于许多非碰撞状态,而不是切换当前状态(这是什么类模型好)。人们真的不需要考虑这些细节,但他们正在激励设计。