时间戳

首页 > 解决方案 > 为什么即使更改的 prop 或 state 与 JSX 无关，React 也会重新渲染组件？

reactjs - 为什么即使更改的 prop 或 state 与 JSX 无关，React 也会重新渲染组件？

问题描述

为什么 React 会在组件的 prop 或 state 发生更改时重新渲染组件，即使更改后的 prop 或 state 与返回的 JSX 无关？

我从官方文档中了解了React Reconciliation 。它解释了差异机制，但不是当状态对虚拟 DOM 树没有视觉影响时重新渲染组件的需要。

考虑下面给出的琐碎的虚拟代码，其中myState是App组件的状态，它与返回的 JSX 没有关系，但如果myState被更新（发生在内部buttonClickHandler，React 会重新渲染App组件。

import React, { useState } from "react";
const App = () => {
  console.log("[App] rendered");

  const [myState, setMyState] = useState(false);

  const buttonClickHandler = () => {
    console.log("Button clicked!");
    setMyState((prevState) => !prevState);
  };

  return <button onClick={buttonClickHandler}>Click Me</button>;
};

export default App;

标签： reactjs

解决方案

因为 React 不可能在返回之前知道状态或 prop 更改是否对 JSX 产生影响。

即使一个组件被重新渲染，也不意味着它被重新协调到真正的 DOM 中（事实上，如果没有更改，则 DOM 保持不变）。

如果函数组件的渲染计算量很大，您可以使用 eguseMemo来记忆那些繁重的计算。

推荐阅读