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

【问题标题】：Why React re-renders a component even when changed prop or state has no relation to JSX?为什么即使更改的 prop 或 state 与 JSX 无关，React 也会重新渲染组件？
【发布时间】：2021-07-15 12:27:37
【问题描述】：

为什么当组件的 prop 或 state 发生变化时，React 会重新渲染组件，即使更改后的 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

【解决方案1】：

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

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

如果一个函数组件的渲染计算量很大，你可以使用例如useMemo 记住那些繁重的计算。

【讨论】：