React函数组件工作原理及组件与函数式调用差异咨询

函数组件本质是接收props参数、返回JSX元素的纯函数（无副作用时），核心工作流程如下：

• 首次渲染：React调用函数，根据返回的JSX生成对应的虚拟DOM（Fiber节点），再将虚拟DOM转换为真实DOM挂载到页面。
• 更新触发：当组件的props变化、内部状态（通过useState等Hook管理）变化，或者父组件重新渲染时，React会重新调用函数生成新的JSX树。
• DOM更新：React通过Diff算法对比新旧虚拟DOM树的差异，只更新真实DOM中变化的部分，避免全量渲染。
• Hook管理：函数组件依赖Hooks处理状态和副作用，React会按Hooks的调用顺序维护每个Hook的状态，确保每次渲染时Hook的状态正确关联到组件实例。

直接调用函数（Case-1）和以JSX标签作为组件调用（Case-2）存在本质区别，具体如下：

1. React组件身份与上下文支持 #

• 用<MyFunction />调用时，React会将其识别为独立的组件实例，创建对应的Fiber节点。这类组件能正常访问React上下文（比如Context、ThemeProvider提供的上下文），也能合法使用所有Hooks。
• 直接调用MyFunction()时，它只是普通JavaScript函数，不会被React标记为组件，无法创建Fiber节点，也就无法访问组件级上下文，若内部使用Hooks会直接抛出错误（因为Hooks必须在React组件的渲染流程中调用）。

2. 状态与生命周期管理 #

• 作为组件调用时，组件内部的Hooks（如useState、useEffect）会绑定到组件实例，状态会在多次渲染中保留，生命周期副作用也能按预期执行。
• 直接调用函数时，每次调用都会重新执行函数内的所有代码，Hooks无法正常维护状态（比如useState会每次初始化新值），useEffect这类副作用Hook也不会被React调度执行。

3. 性能优化能力 #

• 作为组件调用时，可以用React.memo包裹组件，当props未发生变化时跳过重新渲染，利用React的性能优化机制减少不必要的DOM操作。
• 直接调用函数时，父组件每次渲染都会重新执行该函数，无法享受React的组件级性能优化，即使函数返回的JSX内容没有变化，也会重新生成虚拟DOM并参与Diff对比。

4. Props传递方式与跟踪 #

• 作为组件调用时，通过JSX属性传递props，比如<MyFunction name="Bob" />，React会自动将属性封装为props对象传递给组件函数，且会跟踪props的变化来触发组件更新。
• 直接调用函数时，需要手动传递参数（如MyFunction({ name: "Bob" })），虽然最终能拿到参数，但React不会跟踪这些参数的变化，完全按普通函数的参数传递逻辑处理。

示例验证 #

假设修改你的示例代码，给MyFunction添加状态：

// 带状态的函数组件
const MyFunction: React.FC = () => {
  const [count, setCount] = useState(0);
  return <div onClick={() => setCount(count + 1)}>Hello {count}</div>;
}

• 用<MyFunction />调用：点击div会正常更新count，状态能正确保留。
• 用MyFunction()调用：直接抛出错误，提示Invalid hook call，因为Hooks不能在普通函数中调用。

内容的提问来源于stack exchange，提问作者Abhishek Kumar Singh