React与Angular组件渲染差异及React重渲染原因咨询

你的核心理解是正确的 #

你观察到的现象完全准确：

• React函数组件在状态更新时会重新执行整个组件函数（也就是你看到的console.log("re-render")每次触发），但真实DOM只会同步受状态影响的节点（例子中只有按钮的文本会更新）。
• Angular组件在属性变化时不会重新执行组件类的逻辑，仅通过变更检测更新绑定了该属性的DOM节点。

为什么会有这种差异？ #

1. React的设计哲学：状态驱动的纯函数 #

React函数组件本质是状态到UI的纯映射函数：

• 每次状态（useState/useReducer）或props变化时，React会重新调用组件函数，生成新的Virtual DOM树。
• 随后React会将新树与旧树进行diff对比，计算出最小的DOM更新操作，再同步到真实DOM。
• 你看到的“重渲染”其实是组件函数的重新执行，而非真实DOM的全量更新——这是React保证状态与UI一致性的核心机制，纯函数的模式让UI的计算逻辑更可预测、更易调试。

2. Angular的设计哲学：基于实例的变更检测 #

Angular采用的是面向对象的组件实例模型：

• 组件类实例化后会一直存在，状态更新只是修改实例的属性值（比如this.buttonClick += 1）。
• Angular通过Zone.js追踪所有异步操作（比如点击事件），当异步操作完成后，会触发变更检测：遍历组件树，检查每个组件的绑定属性是否发生变化，仅更新对应绑定的DOM节点。
• 整个过程中组件类不会重新实例化，也不会执行类的构造函数或全局逻辑（除非你手动触发），所以不会出现类似React的全局console.log触发。

和Virtual DOM/Incremental DOM的关系？ #

两者的DOM模拟技术确实有差异，但这不是核心原因：

• React的Virtual DOM是每次生成完整的新树再diff，而Angular的Incremental DOM是在遍历过程中就地更新节点。
• 但本质差异还是框架的状态更新与UI同步的设计模式：React选择了“重新计算整个UI描述再diff”的方式，而Angular选择了“追踪实例属性变化再局部更新”的方式。

React的优化手段 #

如果你想减少React组件函数的不必要执行，可以用这些API：

• React.memo：浅比较props，避免组件在props未变化时重渲染
• useCallback：缓存函数引用，避免因函数重新创建导致子组件重渲染
• useMemo：缓存计算结果，避免重复计算复杂值

比如优化你的例子：

export const MyComponent = React.memo(() => {
  const [state, setState] = useState(1);

  // 用useCallback缓存函数
  const onClick = useCallback(() => {
    setState(prev => prev + 1);
  }, []);

  console.log("re-render");

  return (
    <>
      <h1>My Component</h1>
      <button onClick={onClick}>The button has been clicked: {state} time(s)</button>
    </>
  );
});

不过在这个简单例子中，React.memo不会有明显效果，因为状态本身在变化，组件必然会重渲染；但如果是子组件依赖父组件的props，这些优化手段会很有用。

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