React按钮组件代码执行流程与Web渲染机制咨询

一、组件的完整执行流程 #

你的Button组件执行分两个核心阶段：

1. 首次挂载渲染
   当组件第一次被添加到页面时，Button函数会被调用，从上到下逐行执行：

• 调用React.useState(false)初始化状态，此时isShown的值为false；
• 创建handleClick事件处理函数；
• 执行return中的JSX代码，生成虚拟DOM（真实DOM的轻量描述副本）；
• React将虚拟DOM转换为真实DOM，渲染到浏览器页面，此时仅显示按钮。

2. 点击触发状态更新后的重渲染

• 点击按钮触发onClick，调用handleClick函数；
• setIsShown(current => !current)修改isShown的状态（false变true或反之）；
• React检测到状态变化，标记Button组件需要重新渲染；
• 再次调用Button函数，这次useState会返回更新后的isShown值；
• 重新生成新的虚拟DOM；
• React通过diff算法对比新旧虚拟DOM，定位到差异点（即条件渲染的<div>content</div>）；
• 仅在真实DOM中更新该差异部分：isShown为true时添加div，为false时移除div。

二、触发onClick会导致所有JSX重新执行吗？ #

会导致组件函数（包括return里的JSX）重新执行一遍，但这不代表所有真实DOM都会被重新渲染。

JSX执行只是生成新的虚拟DOM，React会通过diff算法精准对比新旧虚拟DOM的差异，只更新真实DOM中发生变化的部分。比如你的按钮，因为内容、属性都没有变化，真实DOM里的按钮不会被重新创建或修改，只有那个条件渲染的div会被添加/移除。

三、受影响部分如何重新运行？ #

当组件重新渲染时，整个组件函数会从头执行一遍，生成新的虚拟DOM。React的diff算法会遍历新旧虚拟DOM树，识别出以下类型的变化：

• 元素类型变更（比如从<button>变为<div>）；
• 元素的属性、内容变更；
• 条件渲染元素的存在/消失（即你代码中isShown && <div>...</div>的场景）；
• 列表元素的key值变化等。

找到差异后，React只会在真实DOM中对这些差异部分执行增删改操作，不会触碰其他无变化的DOM节点，以此保证渲染性能。

四、学习资源推荐 #

• React官方文档：重点阅读「渲染与提交」「状态更新」「虚拟DOM与diff算法」相关章节，是最权威的核心原理资料；
• 《React实战》（第2版）：从实战角度拆解React组件渲染、状态管理的逻辑，适合新手建立完整认知；
• 前端技术社区的React核心原理系列文章：比如讲解虚拟DOM、diff算法的深度解析内容，能帮你理解底层运行机制。

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