反应如何保留渲染的组件

Question

我正在React中使用 divs 创建一个网格。我的Main组件有一个Settings组件和一个Boxes组件。

更改Settings内的值将更新Main内的状态值，该状态值将传递给Boxes。在Settings中更新此值将导致Boxes重新呈现，因为它使用状态值Main。

由于盒子的数量没有改变，所以我只想用JavaScript改变每个盒子的宽度和高度。在这种情况下，不需要重新渲染。

我已经尝试在shouldComponentUpdate中实现改变宽度/高度的代码，但是这样做可以使盒子完全不呈现，并抛出此错误：警告：Boxes.shouldComponentUpdate（）：返回undefined而不是布尔值。确保返回true或false。

所以我的问题是：由于更新列数只会改变每个框的宽度和高度，因此如何保持这些框的显示而不必重新渲染？

shouldComponentUpdate的当前实现：

shouldComponentUpdate() {

    let boxSize = this.state.wrapperWidth / this.props.columns;
    document.styleSheets[1].cssRules[0].style.setProperty('width', boxSize+"px", null);
    document.styleSheets[1].cssRules[0].style.setProperty('height', boxSize+"px", null);
}

Answer 1

只要组件接收到道具，它将再次渲染。因此，当Main组件的状态更改时，它将触发Main的渲染，这将不可避免地将道具传递到Boxes并触发渲染。

但是，如果收到的新道具与旧道具相同，则可以使用PureCompoonent来防止渲染组件。

PureComponent对以前的道具进行了较浅的比较，并在不更改道具的情况下防止重新渲染。

import React, { PureComponent } from 'react';

class Boxes extends PureComponent {
  ... your commponent code
}

您可以在此处详细了解PureComponent-Official React Docs - PureComponent