gpt4 book ai didi

reactjs - 样式化的组件会导致不需要的重新渲染

转载 作者:行者123 更新时间:2023-12-05 02:12:54 25 4
gpt4 key购买 nike

我有一个看起来像这样的应用

class App extends Component {
state = {
config: {}
};
submitForm(formData) {
this.setState({
config: newConfig(formData)
});
}

render() {
return (
<div className="App">
<Form submit={formData => this.submitForm(formData)} />
<Body config={this.state.config} />
</div>
);
}
}

function Form(props) {
const QueryBox = styled.div`
background-color: #1080f2;
padding: 1em;
`;

return (
<QueryBox>
<MyForm submit={props.submit} />
</QueryBox>
);
}

class MyForm extends React.Component {

...

}

现在我的问题是样式化的 div 会导致 MyForm 组件在 App 组件的每次状态更改时重新呈现。

这是为什么。这是预期的行为吗(这会使样式化的组件对我不可用)。有没有办法改变它?

最佳答案

您的 QueryBox 将成为每次呈现 Form 的全新组件。将它移到 Form 之外,它将按预期工作。

const QueryBox = styled.div`
background-color: #1080f2;
padding: 1em;
`;

function Form(props) {
return (
<QueryBox>
<MyForm submit={props.submit} />
</QueryBox>
);
}

关于reactjs - 样式化的组件会导致不需要的重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55360150/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com