返回函数而非JSX模板的React函数式组件是什么？官方如何命名？

你给出的这段代码不是React函数式组件，它的官方命名是自定义Hook，是React官方提供的逻辑复用方案。 #

核心问题解答 #

• 你说的「通常React函数式组件应当返回JSX或其他模板」是完全正确的，普通函数式组件的定位就是UI渲染单元，输入为props，输出为可渲染的JSX。而自定义Hook的定位是逻辑封装单元，没有渲染要求，可以返回任意类型的值，包括状态、方法、常量都可以。
• 自定义Hook有强制命名规范：必须以use开头，你给出的例子里函数名useViewFilter就符合这个要求。只有命名符合useXxx格式的函数，React才会将其识别为Hook，才会校验它内部的内置Hook调用规则（比如只能在顶层调用、不能在普通函数/循环/条件分支内调用等）。
• 你贴出的useViewFilter就是非常典型的自定义Hook使用场景：它把和视图筛选相关的所有逻辑、状态都做了封装，内部托管了筛选项、筛选属性数据等状态，实现了清空筛选、触发筛选计算、同步筛选状态到全局store等逻辑。哪个业务组件需要用到筛选能力，直接调用const { propertiesData, handleClear } = useViewFilter()就能拿到需要的状态和方法，不用在每个业务组件里重复编写筛选相关的代码，也方便后续统一迭代筛选逻辑。

自定义Hook和普通函数的区别 #

你可以把它理解为「可以调用React内置Hook的特殊函数」：

• 普通JS函数内部不能调用useState、useEffect等React内置Hook，否则会触发Hook规则报错
• 自定义Hook只要符合命名规范，就可以在内层自由调用其他内置Hook或者其他自定义Hook，所有内部Hook的状态会和调用它的组件绑定，多个组件调用同一个自定义Hook会各自拿到独立的状态，不会互相污染。

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