如何避免 React 中不必要的重新渲染？

Question

我知道这个问题已被多次问过，但我试图了解当状态发生变化时做出反应渲染决策背后的逻辑以及我应该如何正确地写“反应”。

这是我的代码：

// Parent.js

import React, { useEffect, useState } from "react";
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";

export default function App() {
  const [a, setA] = useState(false);
  const [b, setB] = useState(false);

  const onClickA = () => {
    setA((p) => !p);
  };

  const onClickB = () => {
    setB((p) => !p);
  };

  useEffect(() => {
    console.log("Parent rendered");
  });
  return (
    <div>
      <ComponentA value={a} onClick={onClickA} />
      <ComponentB value={b} onClick={onClickB} />
    </div>
  );
}

// Child A

import React, { useEffect } from "react";

export default function ComponentA(props) {
  useEffect(() => {
    console.log("A rendered");
  });

  return (
    <button onClick={props.onClick}>Button A - {props.value.toString()}</button>
  );
}

// Child B

import React, { useEffect } from "react";

export default function ComponentB(props) {
  useEffect(() => {
    console.log("B rendered");
  });

  return (
    <button onClick={props.onClick}>Button B - {props.value.toString()}</button>
  );
}

因此，当我单击按钮 A 或按钮 B 时，父组件将重新渲染，导致 ComponentA 和 ComponentB 都重新渲染，即使每个用户的 UI 与另一个的状态无关。我在想 react 会明白，如果我单击按钮 A，只会更改 a 状态变量，而 <ComponentB /> 不依赖于 a 状态，因此无需再次重新渲染它，因为它props 保持不变。所以我认为这段代码是错误的，应该以不同的风格编写，但我无法弄清楚。

显然，我认为既然a 不影响<ComponentB /> 和b 不影响<ComponentA />，那我为什么不把状态分别传递给每个组件呢？这样，每个组件都将负责自己的重新渲染。但后来我想，如果将来 ComponentA 依赖于 b 或 ComponentB 依赖于 a 怎么办？每次我想共享状态时，我都无法更改代码，编写回调函数并将状态转换为道具，反之亦然。

有没有更好的方法可以提供这种灵活性而无需太多开销代码（ex redux）？

Answer 1

这只是反应的关键概念。如果组件重新渲染，默认情况下所有子组件都将重新渲染。这不是问题，因为它通常非常快 - 除非您在渲染函数中进行昂贵的计算，否则您不应该这样做。

有一些逃生舱口，例如 React.memo 和 shouldComponentUpdate 类生命周期函数，但通常您不需要它们，而且过早的优化有时弊大于利。

如果您遇到性能问题，请对其进行衡量，然后优化您发现的问题。否则，不要费力地重新渲染。