Question

我正在创建一个显示大量图表的应用程序，因此为了防止不必要的重新渲染，我一直在浏览我的组件并查看我可以在哪里实现shouldComponentUpdate以提高效率。但是在一些较高级别的组件中这样做后，我得到了图形组件本身的一个奇怪的错误。我有这个渲染的通用<Graph/>父组件：

render() {
    return(
        <div>
            { this.getGraph() }
        </div>
    );
}

并且getGraph()基本上会返回：

return React.createElement(graphComponentMapping[graphType], {data:this.state.data,...this.state.configuration});

其中graphComponentMapping[graphType]是<Table/>组件（或其他各种组件，但我们现在将重点关注表）。现在在<Table/>组件中我渲染了这个：

return(
    <ReactTable {...this.getParameters()} data={data} columns={columns} />
);

并且getParameters()函数基本上只查看配置prop并获取与React Table组件相关的所有属性。

现在，当我最初渲染<Table/>时，它具有正确的配置（即，如果我更改初始配置，则表匹配该配置）。但是当我更新<Graph/>父级中的配置prop时，表格不会相应更新。再次调用<Table/>中的呈现函数，如果我在表的呈现中打印this.props，我可以看到各种配置属性已更改，例如this.props.defaultPageSize已从说5更改为3，但该表未重新呈现以反映此情况。即使在浏览器的React开发工具中，我也可以看到道具已经改变了。

如果我使用随机键强制完成元素的重新渲染，例如

return(
    <ReactTable {...this.getParameters()} data={data} columns={columns} key={Math.random()} />
);

然后它可以工作，当我传递新的配置道具时表格会更新。为什么在接收新道具时它不会更新，只有当我强制它完全重新渲染时才会更新？

Answer 1

我遇到过这样的问题，但这主要是我的redux商店的设置方式。 Redux对象是基于引用的，所以即使只更新属性，它也没有告诉我的React组件有什么变化。为了解决这个问题，我必须创建一个新对象并在那里更新值，然后使用它来解决问题。

这可能是他们键入一个随机数导致整个组件重新渲染的原因。

除非我更改密钥，否则React组件不会使用新的道具重新渲染

1 个答案: