React Hook行为异常：需创建子组件才能获取预期结果的原因

第一种无法正常生效的写法如下：

const SearchFormWrapper = () => {
   const inputs = useQueryInputs();
   return <SearchForm inputs={inputs} onSubmit={onSubmit} />
}

拆分双层组件后功能可正常运行，代码如下：

const SearchFormWrapper = () => {
   return <SearchFormWrapping />
}

const SearchFormWrapping = () => {
   const inputs = useQueryInputs();
   return <SearchForm inputs={inputs} onSubmit={onSubmit} />
}

核心原因 #

这个现象的本质是React的Hook状态是和独立渲染的组件Fiber节点一一绑定的，两种写法的核心差异是Hook挂载的组件上下文完全不一样：

• 第一种写法失效，90%以上的情况都是因为SearchFormWrapper没有按标准JSX组件的方式渲染，而是被父组件当成普通函数直接调用了——比如父组件里写的是{SearchFormWrapper()}，而不是<SearchFormWrapper />。
  这种直接调用函数的写法，React根本不会给SearchFormWrapper生成独立的Fiber节点，组件里写的useQueryInputs会被直接算到调用它的父组件的Hook状态链上。只要父组件存在条件渲染、Hook调用顺序变动、或者上下文层级不匹配，Hook取到的状态就会错乱，返回值完全不符合预期，严重时会直接抛出Hook调用规则的报错。
• 第二种写法能正常运行，是因为你把useQueryInputs的调用逻辑挪到了单独的SearchFormWrapping组件里。哪怕外层的SearchFormWrapper还是被直接当普通函数调用，内层返回的<SearchFormWrapping />是标准JSX组件写法，React会为它生成独立的Fiber节点，这个组件里所有Hook的状态都存储在自身对应的节点上，和外层父组件的渲染逻辑完全隔离，useQueryInputs在自身的正确上下文中执行，自然能拿到预期的返回值。

补充：还有极少场景下这个问题由Context作用域不匹配导致：如果useQueryInputs内部依赖了某个Context的Provider，而第一种写法里SearchFormWrapper的渲染位置刚好在对应Provider的作用域之外，拆分后的子组件渲染链路落在Provider作用域内时也会解决问题，但这类场景占比极低。

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