У меня есть приложение, которое выглядит так
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.
Почему это так? Является ли это ожидаемым поведением (это сделало бы стилизованные компоненты непригодными для меня). И есть ли способ изменить это?