React 什么时候重新渲染父组件？答案

【问题标题】：When does React re-render the parent component?React 什么时候重新渲染父组件？
【发布时间】：2022-01-09 17:03:05
【问题描述】：

我目前正在学习 React，并试图了解组件如何重新渲染。我有这个渲染三个项目的父组件。每个项目只呈现一个<li>

function App() {
  console.log("Parent Rerendered");
  return (
    <div>
      <ul>
        <Item1 />
        <Item2 />
        <Item3 />
      </ul>
    </div>
  );
}

Item2 有点不同，因为它还呈现了一个“x”，当它被点击时会取消呈现组件：

function Item2() {
  const [visible, setVisible] = useState(true);

  const makeInvisible = () => {
    setVisible(false);
  };

  console.log("Item 2 Rerendered");

  return visible ? (
    <div>
      <li>
        Second Item <span onClick={makeInvisible}>X</span>
      </li>
    </div>
  ) : null;
}

当我在浏览器中测试并单击“x”时，我可以从控制台看到 Item2 被重新渲染。但是，包括父组件在内的其他组件都不会重新渲染。但是父组件确实发生了变化，那么如何在不重新渲染的情况下发生这种情况。

如果这有点令人困惑，这里是初始状态、我的期望和现实的图示。我对 React 如何重新渲染组件有什么误解？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

组件在设置状态时或在其父组件重新呈现时重新呈现¹。 App 没有状态也没有父级，所以它永远不会重新渲染。不过也不需要。 React 从之前的渲染中保存了虚拟 DOM，所以它仍然知道 App 应该是一个 div 包围一个 ul 包围一个 Item1、Item2 和 Item3。如果 Item2 重新渲染，并返回 null 而不是 div，react 将通过删除 div 来更新 Item2 负责的真实 DOM 部分。页面的其余部分保持不变

^{1) 或者如果它使用的上下文发生变化，或者在调用 forceUpdate 时在类组件中。但在大多数情况下，重要的是状态和父级。}

【讨论】：

【解决方案2】：

不要单击<Item2 />，而是转到开发工具-> 资源管理器-> 选择元素并按删除。观点也会改变，差距会缩小，完全不参与反应。

React 负责更新 DOM，layout 由浏览器完成。因此，当<Item2 /> 决定要呈现为null 而不是div>li (??? invalid markup ) 并因此删除相应的 DOM 节点时，浏览器将更新布局.

而父组件与这一切无关。

【讨论】：