面试题：React自定义Hooks与高阶组件的区别与联系

Question

详细说明React自定义Hooks和高阶组件在功能、使用场景、设计模式等方面的区别与联系。举例说明在何种情况下优先选择自定义Hooks，何种情况下优先选择高阶组件，并解释原因。

Answer 1

区别

1. 功能
   • 自定义Hooks：主要用于在函数组件中复用状态逻辑。它允许将组件逻辑提取到可重用的函数中，这些函数可以在多个组件中共享状态和副作用逻辑，同时保持组件的独立性。例如，一个用于处理表单输入的自定义Hook可以在多个表单组件中复用输入状态和验证逻辑。
   • 高阶组件：是一个函数，它接受一个组件并返回一个新的组件。其主要功能是通过包装原组件，为原组件添加额外的props或者修改原组件的行为。比如，一个用于添加权限控制的高阶组件可以在渲染原组件前检查用户权限。
2. 使用场景
   • 自定义Hooks：适用于逻辑复用，尤其是状态和副作用逻辑的复用。当多个组件需要共享相似的状态管理和副作用操作（如数据获取、定时器管理等）时，自定义Hooks是很好的选择。例如，多个页面都需要从API获取数据并进行缓存管理，就可以创建一个自定义Hook来处理数据获取逻辑。
   • 高阶组件：常用于增强组件功能，比如添加全局的样式、权限验证、性能监测等功能。比如，对于所有需要登录权限才能访问的组件，可以使用一个高阶组件进行权限检查，而不需要在每个组件内部重复编写权限检查逻辑。
3. 设计模式
   • 自定义Hooks：遵循的是逻辑复用模式。它通过将逻辑封装在Hook函数中，使得不同组件可以通过调用Hook函数来复用相同的逻辑，组件之间的耦合度较低，每个组件可以独立使用Hook，并且可以根据自身需求进行定制。
   • 高阶组件：基于装饰器模式。它通过包装原组件，在不改变原组件代码的情况下，为原组件添加新的功能。原组件和高阶组件之间存在一定的嵌套关系，高阶组件对原组件的props有一定的控制权。

联系

• 两者都旨在解决代码复用和逻辑抽象的问题，都是React中提高代码可维护性和可复用性的重要手段。无论是自定义Hooks还是高阶组件，都允许开发者将通用的逻辑提取出来，避免在多个组件中重复编写相同的代码。

优先选择场景及原因

1. 优先选择自定义Hooks的场景
   • 场景：当多个组件需要共享相似的状态和副作用逻辑时。例如，多个组件都需要实现一个倒计时功能。
   • 原因：自定义Hooks可以将倒计时的状态（如剩余时间）和副作用（如定时器的启动和清除）封装在一个Hook中。每个组件通过调用这个Hook可以独立地管理自己的倒计时，组件之间不会相互干扰，而且代码结构清晰，复用性高。同时，使用自定义Hook不会像高阶组件那样增加组件的嵌套层级，从而避免了潜在的调试和性能问题。
2. 优先选择高阶组件的场景
   • 场景：当需要为多个组件添加全局性的功能，如权限验证、日志记录等功能时。例如，所有需要登录权限才能显示的组件。
   • 原因：高阶组件可以通过包装原组件，在原组件渲染前进行权限检查等操作。这种方式对原组件的侵入性较小，原组件不需要进行过多的修改。而且，通过高阶组件可以方便地管理和维护这些全局性功能，只需要在高阶组件中进行修改，所有被包装的组件都会受到影响。相比之下，如果使用自定义Hook，可能需要在每个组件内部手动调用相关逻辑，代码冗余度较高。