0

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

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

并且getGraph()基本上返回这个：

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

wheregraphComponentMapping[graphType]是一个<Table/>组件（或其他各种组件，但我们现在将重点放在 table 上）。现在在那个<Table/>组件中我渲染这个：

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

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

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

如果我通过使用随机键强制重新渲染元素，例如

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

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

4

1 回答 1

0

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

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

于 2018-04-17T13:41:37.863 回答