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

Question

我有一个父组件，它看起来像这样：

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

如果子组件中有任何更改，父组件会重新渲染吗？

- Anubhav Kumar Yadav

Answer 1

不会重新渲染。如果您从父组件向组件传递任何属性，并在子组件中更新该属性或者该属性在父组件中更新，那么两个组件都会重新渲染。但是，如果数据或状态与父组件无关，则不会导致父组件重新渲染。

- Azeez

Answer 2

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

- Ossama Ismaili

Answer 3

在React中，当子组件重新渲染时，并不会自动触发父组件的重新渲染。React使用一种称为“协调（reconciliation）”的机制来确定当状态或属性改变时，虚拟DOM的哪些部分需要更新。它以高效的方式进行操作，以最小化组件不必要的重新渲染。

在你的例子中，如果Child_1或Child_2由于其内部状态或属性的改变而重新渲染，React将更新这些特定子组件的虚拟DOM。然后，React将新的虚拟DOM与之前的进行比较，如果有差异，它将应用必要的更新到真实的DOM上。

父组件本身不会因为其子组件重新渲染而自动重新渲染。只有在以下情况下，React才会重新渲染父组件：

1. 父组件自身的状态或属性发生改变。 2. 父组件调用一个导致其重新渲染的函数（例如，setState）。

因此，除非父组件本身有直接交互或状态/属性改变，否则Child_1或Child_2的变化不会触发父组件的重新渲染。

- Farzad Ali

Answer 4

不，对于你的情况绝对不行。让我们看看父组件何时重新渲染，何时不重新渲染。

案例1：当父组件没有向子组件传递状态时

const Parent = () => {
    return (
       <Child_1 />
       <Child_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都重新渲染。

- Rahul Roy