子组件发生变化时父组件会重新渲染吗？

Question

我有一个如下所示的父组件：

const Parent = () => {
    return (
       <Child_1 />
       <Child_2 />
   );
}

如果子组件之一发生任何变化，父组件是否会重新渲染？

Answer 1

不，它不会重新渲染。如果您将任何道具从父组件传递给组件，并且您在子组件中更新该道具或在父组件中更新该道具，那么两者都会重新渲染。但如果数据或状态不依赖于父组件，那么就不会导致父组件重新渲染。

Answer 2

子组件的状态改变不会影响父组件，但是当父组件的状态改变时，所有子组件都会渲染。

Answer 3

不，就你而言绝对不是。让我们看看父级何时重新渲染，何时不重新渲染。

情况 1：当没有从父级到子级的状态转移时

const Parent = () => {
    return (
       <Child_1 />
       <Child_2 />
   );
}

这是你的情况，父级不传输任何状态作为道具。在这种情况下，子级独立重新渲染，不会导致父级重新渲染。

情况 2：当有从父级到子级的状态转移时

const Child = ({parentState, setParentState}) => {
 return <div onClick={() => setParentState(parentState+1)} >{parentState}</div>
}

const Parent = () => {
 const [parentState, setParentState] = useState(0);
 return <Child parentState={parentState} setParentState={setParentState}>;
};

在这种情况下，每当用户单击 Child 的 div 时，状态

parentState

就会发生变化，导致

Child

和

Parent

都重新渲染。

Answer 4

在React中，当子组件重新渲染时，并不会自动触发父组件的重新渲染。 React 使用一种称为“协调”的机制来确定当状态或属性发生变化时需要更新虚拟 DOM 的哪些部分。它可以有效地减少不必要的组件重新渲染。 在您的示例中，如果

Child_1

或 Child_2 由于内部状态或 props 的变化而重新渲染，React 将更新这些特定子组件的虚拟 DOM。然后，React 会将新的虚拟 DOM 与之前的虚拟 DOM 进行比较，如果存在差异，它将对真实 DOM 进行必要的更新。 父组件本身不会因为其子组件重新渲染而自动重新渲染。 React 只会在以下情况下重新渲染父组件：

父组件自身的状态或道具发生变化。

1. 父组件调用一个导致其重新渲染的函数（例如， 设置状态）。
因此，

Child_1

或 Child_2 中的更改不应触发父组件的重新渲染，除非父组件本身存在直接交互或状态/属性更改。