React-Grid-Layout:如何在调整大小时重新渲染项目

Question

我使用react-grid-layout和react-custom-scrollbars来创建面板的网格。以下是代码的简化版本：

class GridLayoutWithScrollableItems extends React.Component {

    onResize() {
        this.setState({forceRenderAfterResize: Date.now()})
    }

    render() {
        return (
            <ReactGridLayout width={900} onResize={this.onResize.bind(this)}>
                <div key="a">
                    <Scrollbars>
                        <p>Lorem ipsum dolor ....</p>
                    </Scrollbars>
                </div>
                <div key="b">
                    <Scrollbars>
                        <p>Aenean purus magna ...</p>
                    </Scrollbars>
                </div>
            </ReactGridLayout>
        )
    }
}

除了调整大小之外，它的工作方式与预期一样：Scrollbars只会在重新呈现时更新它的条，这就是为什么我要设置那个虚拟状态变量forceRenderAfterResize的原因。

实现这一目标的最佳方法是什么？上面的解决方案感觉有点笨拙，而且还会重新渲染所有项目，而不仅仅是调整大小的项目。

Answer 1

在onResize方法中调用forceUpdate()。有些人可能会争辩说，他们是否错误地读取了react文档，设置状态比forcingUpdate更可取，但这只有在该状态是真正重要的实际状态时才会发生，而且如果实现了自定义shouldComponentUpdate逻辑，setState不能保证重新呈现。当浏览器确定调整大小时，当您特别想要重新渲染时，没有理由在通过UI进行的UI修改上混淆您的状态：

onResize() {
   this.forceUpdate();
}