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

Question

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

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

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 {

  ...

}

Run Code Online (Sandbox Code Playgroud)

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

这是为什么。这是预期的行为吗（这会使样式组件对我来说无法使用）。有没有办法改变它？

Answer 1

Tho*_*lle 6

您QueryBox将成为每次渲染的全新组件Form。将其移到外面Form，它将按预期工作。

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

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

Run Code Online (Sandbox Code Playgroud)

@qwertynik如果您不想为“QueryBox”创建单独的组件，您可以使用 [css prop](https://styled-components.com/docs/api#css-prop) 内联样式。 (2认同)

归档时间：	6 年，6 月前
查看次数：	1715 次
最近记录：	6 年，6 月前