Question

在React的状态下存储派生数据是个好主意吗？我希望这样做的原因是确保在源数据集发生变化时重新渲染。

我对Flux的一个例子;

class ProductList extends React.PureComponent {
    componentDidMount = () => {
        this.props.flux.store('ProductStore').on('change', this.getStateFromFlux);
        this.props.flux.store('ProductAvailabilityStore').on('change', this.getStateFromFlux);
    }

    componentWillUnmount = () => {
        this.props.flux.store('ProductStore').off('change', this.getStateFromFlux);
        this.props.flux.store('ProductAvailabilityStore').off('change', this.getStateFromFlux);
    }

    getStateFromFlux = () => this.setState({
        products: this.props.flux.store('ProductStore').getProducts().map(product => ({
            ...product,
            available: this._isAvailable(product),
        })),
    })

    _isAvailable = product => this.props.flux.store('ProductAvailabilityStore').isAvailable(product.id);

    render = () => this.state.products.map(product => (
        <Product available={this._isAvailable(product)} product={product} />
    ))
}

在这种情况下，产品可用性更改不会导致重新渲染，这不是我想要的。

现在我可以做这样的事情;

shouldComponentUpdate

但是，这意味着只要可用性存储发生更改，我们就会重新呈现（由派生状态的浅不等性引起）。即使我们的产品没有变化，也会发生这种情况。

现在我可以实现_.isEqual之类的自定义isAvailable，但我觉得这不是正确的方法，或者是有效的那方面。

有没有正确的处理方法？我能想到的一种方法是将状态中的可用产品列表存储起来，然而这会将Layout逻辑移出商店并进入我的组件，这是我不想要的。做。）） }

Answer 1

一个可行的解决方案是将isAvailable逻辑移到您的Product组件。像这样：

class ProductList extends React.PureComponent {
    getStateFromFlux = () => this.setState({
        available: this.props.flux.store('ProductAvailabilityStore').isAvailable(this.props.product.id)
    })
}

这样，如果可用性发生变化，它只会在您的setState组件中调用Product（重新发送自己），而不是重新渲染所有内容。

在状态中存储派生数据

1 个答案: