将Hook作为函数传入组件使用是否违反React Hook规则？

结论 #

这种写法完全不违反React Hook的使用规则，属于合法且常用的封装模式。

原因说明 #

React Hook的核心规则只有两条：

• 仅在 React 函数组件或自定义 Hook 的最顶层调用
• 不要在普通的 JavaScript 函数、循环、条件判断、嵌套函数中调用

你的写法完全符合上述要求：

1. 你定义的useProps本身就是标准的自定义Hook：命名符合use开头的规范，内部调用的useRouter、useSelectorWithShallowEqual也都是合规的Hook，本身没有规则问题。
2. useProps的调用位置是Connect函数组件的最顶层，没有被放在条件判断、循环或者普通函数里，满足Hook的调用位置要求。
3. 这种高阶组件（HOC）结合自定义Hook的封装模式非常常见，本质是把通用的状态获取逻辑抽离为可复用的自定义Hook，再通过HOC统一注入到业务组件，避免每个业务组件重复编写相同的Hook调用逻辑。

唯一注意点 #

只要保证传入withPropConnector的第一个参数是符合规范的自定义Hook（use开头、内部Hook调用符合规则），就不会出现任何问题。

内容的提问来源于stack exchange，提问作者tanmoyopenroot