父组件状态变更是否触发所有子组件render方法？根组件状态变更会重渲染所有子组件吗？

Great question! Let's break this down clearly—this is a super common point of confusion for React developers:

1. 父组件状态变更时，会触发所有子组件的render方法吗？ #

默认情况下，是的。React的默认渲染逻辑是：当组件的state或props发生变化时，它会重新调用自身的render方法，并且会递归触发所有直接、间接子组件的render方法——哪怕子组件完全没用到父组件变化的那部分状态或属性。

举个直观的例子：

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click to increment</button>
      <Child /> {/* 这个子组件没接收任何props，但父组件count变化时它还是会触发render */}
    </div>
  );
}

function Child() {
  console.log("Child component rendered");
  return <div>I'm a child component!</div>;
}

每次点击按钮，控制台都会打印"Child component rendered"，哪怕Child和count状态毫无关联。

2. 修改根组件的状态，浏览器中的所有子组件都会被重新渲染吗？ #

默认情况下，是的。根组件是整个组件树的最顶层，当它的state或props变化时，React会从根节点开始，递归触发所有后代组件的render方法。

不过要补充一点：React会自动对虚拟DOM做diff对比，只有当组件的输出（虚拟DOM）和之前版本有差异时，才会更新真实的浏览器DOM。所以哪怕触发了render，也不一定会导致浏览器的重绘重排，但render本身还是会带来一定性能开销，在大型组件树里尤其明显。

如何避免不必要的子组件重渲染？ #

既然默认行为可能造成性能浪费，我们可以通过这些方式优化：

• 函数组件用React.memo：它会对组件的props做浅比较，如果props没变化，就跳过该组件的重渲染。比如把上面的Child改成const Child = React.memo(() => { ... })，再点击按钮就不会触发它的render了。
• 类组件用PureComponent或shouldComponentUpdate：PureComponent会自动对props和state做浅比较，只有变化时才重渲染；shouldComponentUpdate允许你自定义判断逻辑，返回false就能阻止重渲染。
• 用useMemo缓存计算结果：如果子组件接收的是计算出来的值，用useMemo缓存它，避免父组件每次渲染都生成新的引用。
• 用useCallback缓存回调函数：如果子组件接收的是回调函数，用useCallback缓存函数引用，防止因为引用变化导致子组件不必要的重渲染。

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