使用Redux与memo时如何避免层级对象数组组件的重复渲染

• 首先调整Redux数据结构，将嵌套树状结构扁平化为查找表
  以元素的name路径拼接作为唯一键（如a/a-a/a-a-1），存储为对象格式，同时额外维护层级关系字段。更新单条组件配置时仅修改对应键的值，不会触发整个数组的引用变更，从根源避免全量重渲染，同时还能直接通过name拼接的路径快速定位目标元素，不需要递归遍历嵌套结构。
  示例存储结构：

  elementsMap: {
    "a": { name: "a", parent: null, children: ["a/a-a"] },
    "a/a-a": { name: "a-a", parent: "a", children: ["a/a-a/a-a-1"] },
    "a/a-a/a-a-1": { name: "a-a-1", component: "TextFiled", value: "default value...", parent: "a/a-a" }
  }
  

• 拆分useSelector选择粒度，避免全量获取状态
  父组件仅获取所有组件的唯一标识数组，用shallowEqual做浅对比，无增删操作时不会触发父组件重渲染。每个子组件内部仅根据自身标识获取对应的单条状态，只有自身配置变更时才会重渲染。
  示例父组件代码：

  // 仅取所有组件的唯一标识数组
  const selectAllCompIds = state => Object.keys(state.elementsMap).filter(key => state.elementsMap[key].component)
  function CompList() {
    const compIds = useSelector(selectAllCompIds, shallowEqual)
    const renderedListItems = compIds.map(id => <ImportedComponent key={id} elementID={id} />)
    return <ul className="todo-list">{renderedListItems}</ul>
  }
  

• 修正memo对比逻辑与动态加载实现
  不要在组件渲染函数内部定义loadable组件，避免每次渲染生成新的组件实例导致重渲染，同时确保memo的对比逻辑仅依赖不会变更的唯一标识：

  // 动态加载方法提到组件外定义
  const getLoadableComp = compName => loadable(() => import(`../lib/${compName}`))
  const ImportedComponent = memo((props) => {
    const compConfig = useSelector(state => state.elementsMap[props.elementID])
    const LoadableComponent = useMemo(() => getLoadableComp(compConfig.component), [compConfig.component])
    return <LoadableComponent {...compConfig} id={props.elementID} />
  }, (prev, next) => prev.elementID === next.elementID)
  

• 保留嵌套结构的兼容方案
  如果不便修改现有数据结构，可使用缓存选择器做计算结果缓存，递归遍历生成唯一标识数组时仅在嵌套结构有增删时返回新引用，同时更新状态时严格遵循immutable规范，仅变更被修改节点的所有父级引用，避免无关节点的引用变更。

内容的提问来源于stack exchange，提问作者Ayoub Benayache