为何React组件自调用无渲染效果？函数组件理论疑问

首先得明确：React组件确实是函数，但它和普通函数的核心区别是——只有当React负责调度执行它时，才会和页面DOM节点绑定，触发UI更新。

你示例里的问题出在两个关键点：

• 第一，title是普通变量，React不会追踪它的变化。就算你手动修改了title的值，React完全感知不到，自然不会触发UI更新。
• 第二，点击按钮后调用CallComp()，只是单纯执行了一遍组件函数，生成了一个新的虚拟DOM对象，但这个对象根本没被React挂载到页面的DOM树中。页面上显示的还是最初由React渲染的那个组件实例，所以你看不到任何变化。

要实现你想要的点击更新效果，得遵循React的状态管理逻辑：

• 用useState把title转为React状态，状态更新时，React会自动重新执行组件函数，生成新的虚拟DOM，对比后更新页面的真实DOM。
• 完全不需要手动调用组件函数，React会自动处理渲染流程。

修改后的代码示例：

import { useState } from 'react';

const CallComp = () => {
  const [title, setTitle] = useState("Not clicked yet.");
  const clickHandler = () => {
    setTitle("Clicked!");
  };
  return (
    <>
      <div>{title}</div>
      <button onClick={clickHandler}>Test</button>
    </>
  );
};

export default CallComp; 

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