当儿童组件中发生变化时，父组件会重新呈现吗？

发布于 2025-02-02 07:39:36 字数 183 浏览 3 评论 0原文

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

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

如果一个子组件中发生任何更改，则父组件会重新租赁吗？

原文

I have a parent component which looks like this:

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

if any changes occur in one of the child components, will the Parent component re-renders ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

流星番茄 2025-02-09 07:39:36

不，它不会重新渲染。如果将任何道具传递给父母组件的组件，并且您在子组件中更新该道具，或者在父组件中更新该道具，以便两者都会重新渲染。但是，如果数据或状态不依赖于父组件，因此不会在父组件中引起重新渲染。

回复收藏 0 原文

与往事干杯 2025-02-09 07:39:36

儿童组件的状态变化对父组件不会影响，但是当父组件的状态更改所有子组件时。

回复收藏 0 原文

策马西风 2025-02-09 07:39:36

不，就您而言，绝对不是。让我们看看父母何时重新租赁，何时不租用。

案例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}>;
};

这种情况下，当用户单击儿童div时，状态parentstate更改时，都会在这种情况下进行调整，从/code>和parent。

No, in your case absolutely not. Let's see when the parent re-renders and when not.

Case 1 : When there is no state transfer from parent to child

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

This is your case, where the parent does not transfer any state as prop. In this case the child re-renders independently, not causing the parent to re-render.

Case 2 : When there is state transfer from parent to child

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}>;
};

In this case, whenever the user clicks on the div of Child, the state parentState changes, leading to re-render in both Child and Parent.

回复收藏 0 原文

~没有更多了~