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

Question

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

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>
        );
    }

}

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

通常我通过缓存派生对象（在本例中 "interval"）并仅在范围发生变化时更新它来解决这个问题。它有效，但会导致大量样板代码，并且需要为每个类似的属性.

完成

所以我想知道在 React 中执行此操作的正确方法是什么？或者是否有一些我可以使用的库可以为我处理这个问题？

Answer 1

使用 lifecyclehook shouldComponentUpdate 并定义how/when 你的组件应该重新渲染。

Answer 2

我找到了我想做的事情的答案：它显然叫做 "memoized selector"，这里有一个包：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,
        };
    }
})

并且只有更新范围才会更新区间

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

How to pass a derived object to another component without triggering unecessary re-rendering?

reactjs

immutability

derived

react-component