Question

我有一个父组件（简化）如下所示

export default class ProductGrid extends React.PureComponent<Props, State> {
  renderProducts() {
    return this.props.products.map(product => (
      <Product {...product} />
    ));
  }

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

但是，在我的Product组件中，我必须订阅当前选择，或者至少订阅当前所选项目的数量。

麻烦：由于订阅了redux商店中的这一段数据，每当我的选择号发生变化时，就会产生当前可见的每件商品更新

虽然我可以实现自定义shouldComponentUpdate并省略此属性，但它仍然运行该自定义生命周期钩子。我的页面上可能有超过200种产品，因此这可能会导致问题。

我只是在丢弃时使用这些信息，并且想知道是否可以简单地抓住这些信息＆＃34;在那一刻＆＃34;来自redux商店而没有订阅更改。例如，类似于redux-saga：

onDragStart = () => {
  const selectedCount = select(({ products: { selected } }) => selected.length);
  if (selectedCount) {
    // whatever here
  }
}

这可能吗？

Answer 1

作为对你的回应，＆＃34;是否有可能将其作为HOC实现而不会导致它更新＆＃34;：这是一个HoC的快速概述，它将商店作为你通过的任何组件的属性提供它

function myHoC(WrappedComponent) {
  const classToExtend = WrappedComponent.prototype instanceof React.PureComponent
    ? React.PureComponent
    : React.Component

  class NonUpdatingStoreProvider extends classToExtend {
    static contextTypes = {
      store: PropTypes.object,
    }

    render() {
      return (
        <WrappedComponent
          store={ this.context.store }
          { ...this.props }
        />
      )
    }
  }

  NonUpdatingStoreProvider.WrappedComponent = WrappedComponent
  NonUpdatingStoreProvider.displayName = `NonUpdatingStoreProvider(${WrappedComponent.displayName || WrappedComponent.name})`

  return NonUpdatingStoreProvider
}

注意：返回的组件显然会像其他组件一样更新，无论是常规组件还是纯组件，具体取决于您传递给它的内容。但它不会导致对存储更改的反应更新。

如果您不希望商店传递给组件，您只需传递store.getState方法或任何您想要使用的方法。

Answer 2

如果您的组件.left>div, .right>div { height: 30%; }读取所选项目数/当前选择只是传递给$(SRCROOT)/../../../Documents/FacebookSDK $(inherited) $(PROJECT_DIR)，那么替代解决方案是将ProductGrid直接连接到商店。

假设您的每个产品都有自己的ID或列表中的索引值

Product

然后您的Product只需要使用productIds来呈现列表

const mapStateToProps = (state, props) => ({
    productData: getProductData(state, props.productId),
    isProductSelected: isProductSelected(state, props.productId)
})

const ProductWrapper = connect(mapStateToProps)(Product)

从商店获取而不触发更新

2 个答案: