时间戳

首页 > 解决方案 > 如何在不触发不必要的重新渲染的情况下将派生对象传递给另一个组件？

reactjs - 如何在不触发不必要的重新渲染的情况下将派生对象传递给另一个组件？

问题描述

我有一个像下面这样的组件：

class MyComponent extends React.PureComponent {

    constructor() {
        super();

        this.state = {
            range: {
                start: 1000,
                length: 5000,
            },
        }
    }

    render() {
        const range = this.state.range;

        return (
            <div>
                <ThirdPartyComponent
                    interval={{
                        begin: range.start,
                        end: range.start + range.length,
                    }}
                />
            </div>
        );
    }

}

基本上它有一个“范围”状态对象，它被转换然后传递给第三方组件。代码可以正常工作，但问题是间隔始终是一个新对象，即使范围没有改变，这意味着ThirdPartyComponent即使不需要也重新渲染。

通常我通过缓存派生对象（在本例中为“间隔”）并仅在范围更改时更新它来解决此问题。它可以工作，但会导致大量样板代码，并且需要为每个类似的属性执行此操作。

所以我想知道在 React 中这样做的正确方法是什么？或者也许有一些我可以使用的库来为我处理这个问题？

标签： reactjsimmutabilityderivedreact-component

解决方案

我找到了我想做的事情的答案：它显然被称为“记忆选择器”，这里有一个包：https ://www.npmjs.com/package/reselect

有了这个库，我可以这样做：

import { createSelector } from 'reselect'

const getRange = state => state.range;

const getInterval = createSelector(
    [ getRange ], range => {
        return {
            begin: range.start,
            end: range.start + range.length,
        };
    }
})

并且只有在更新范围时才会更新间隔。

推荐阅读