1

我有一个功能组件，它传递了关于从 redux 存储中提取什么的指令。使用mapStateToProps=(state, ownProps)，我可以愉快地从状态（存储）中提取所需的项目 - 但是，整个状态树的任何更改都会触发重新运行 mapStateToProps 和大量重新渲染。

让我开箱。

这是商店部分的快照：

{
  settings: {...stuff...},
  projects: [...stuff...],
  definitions: [...stuff...],
  themes: [...stuff...],
  surfaces: {
    '6': {                                   <--- VARIABLE PASSED TO COMPONENT
      surface: {
        STRIP: [..stuff..],
        GLOBAL: {                            <--- CATEGORY PASSED TO COMPONENT
          DISPLAY: {...stuff...},
          ASSIGNMENT: {                      <--- LIST OF REQUIRED OBJECTS HAS 
            A_TRACK: {                       SUBCATEGORY AND TARGET (A_TRACK etc...)
              value: 0,
              type: 'switch',
              label: 'TRACK'                 
            },
            A_SEND: {                        <--- ANOTHER OBJECT I NEED TO GET
              value: 0,
              type: 'switch',
              label: 'SEND'
            },
            A_PAN: {
              value: 0,
              type: 'switch',
              label: 'PAN'
            },
          },
        FADER_BANKS: {...stuff...},  
        STATUS: {...stuff...},
        LOTS_MORE_STUFF

我的父组件将所需的指令传递给子组件。

<RefMixerGroup 
    portId = {this.props.portId}
    items={[
          {parent: 'GLOBAL', group: "ASSIGNMENT", target: "A_TRACK"},
          {parent: 'GLOBAL', group: "ASSIGNMENT", target: "A_SEND"},
           ]
          }
/>

mapStateToProps 非常简单：

const mapStateToPropy = (state, ownProps) => {
    return {
        groupItems: getItemsFromState(state.surfaces[ownProps.portId].surface, ownProps.items)
    }
}

并且工作是在一个简单的函数中完成的：

const getItemsFromState = (subState, items)=>{
    let groupItems=[]
    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        const base = subState[item.parent];
        
        let groupItem = base[item.group][item.target]
        groupItems.push({...groupItem, target: item.target})
    }
    return groupItems
}

但是因为我正在创建这个匹配数组，所以我认为 redux 认为我应该订阅树中的每个项目......当我只想对找到的元素进行更改时，在这种情况下：

surfaces[6].surface[GLOBAL][ASSIGNMENT][A_TRACK]
surfaces[6].surface[GLOBAL][ASSIGNMENT][A_SEND]

我尝试使用 reselect 和 rereselect 而不是上面的 getItemsFromState 函数，但结果都相同。该树中的任何更改，从表面[6] 开始都会触发 mapsStateToProps 和重新渲染。

一定有办法解决这个问题，但我无法弄清楚。我尝试使用areStatesEqual，但它只提供nextStateand prevState，我需要ownProps计算相等性。我可能可以使用areStatePropsEqual，但这仅在mapStateToProps不必要地重新计算之后才有效。

一定有办法！

4

1 回答 1

1

getItemsFromState groupItems每次运行时都会创建一个新的数组引用。它会在每个派发的动作之后被调用。由于connect在任何时候由返回的任何字段mapState更改为新的 reference时都会重新渲染，因此您的代码会强制 React-Redux 每次都重新渲染。

这就是为什么您应该使用记忆选择器仅在输入引用已更改时才返回新的派生数据引用的原因，通常使用 Reselect 的createSelector。如果您对 Reselect 的使用在这里没有帮助，则可能是您的选择器设置不正确，但我需要查看具体示例以提供建议。

这也是组件应该订阅它们实际需要的最少量数据的原因。

如果您使用的是功能组件，我建议您也使用useSelector而不是connect。

于 2020-10-05T14:16:09.263 回答