样式化的组件会导致不必要的重新渲染

时间:2019-03-26 14:55:04

标签: reactjs styled-components

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

for(i in 1:2){
  values <- list(1:i)
  assign(x = paste0("List_", i), value = values, envir = globalenv())
}

List_1
[[1]]
[1] 1
List_2
[[1]]
[1] 1 2

现在我的问题是样式化的div导致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 { ... } 组件的每个状态更改时,MyForm组件会重新呈现。

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

1 个答案:

答案 0 :(得分:2)

您的- Hi! Can I ? *If free* - Yup go on. *Else* - No, wait in the queue! 将是QueryBox每次渲染的全新组件。请将其移到Form之外,它将按预期工作。

Form