如何防止使用 redux 重新渲染组件答案

【问题标题】：how to prevent re-rendering components with redux如何防止使用 redux 重新渲染组件
【发布时间】：2021-10-18 16:53:57
【问题描述】：

当我有一个使用 redux 调度和备忘录的分层对象数组（对象数组）时，如何防止组件重新渲染例如，我喜欢这个组件列表列表喜欢

  Elements =[   // an array in store.state variable
                {name='a',
                 subEelemets:[
                              {name:'a-a', 
                              components:[
                                          {
                                           name:'a-a-1',
                                           component:'TextFiled',
                                            value:'default value...'
                                          },
                                          ]
                               },
                              ]
                 },
               ]

我使用 redux 使用 dispatch 更新 Elements 数组中的组件值，但由于多次重新渲染，性能下降，我尝试使用备忘录来防止重新渲染，但它也更新了整个 Elements 数组，因为我使用了 useSelector，

  const ImportedComponent = memo((props) => {

  const LoadableComponent = loadable(() =>
  import("../lib" + props.compName)) 
  );

  return (
    <LoadableComponent
      {...props}
       id={props.id}
  
     />)},(a,b)=>a.id===b.id?true:false)

这里是我如何修改我的组件的代码

 const selectTodoIds = state => state.components.map((todo,index) => todo)

 const updateComp = () => {
    const Components = useSelector(selectCompsIds, shallowEqual)
  
    const renderedListItems = Components.map((CompId) =>
       <ImportedComponent key={CompId} elementID={CompId} />
    )
  
    return <ul className="todo-list">{renderedListItems}</ul>
  }

当我使用教程https://redux.js.org/tutorials/fundamentals/part-5-ui-react 中介绍的平面数组时它可以工作，但不适用于分层数组，因为我应该使用“名称”来定义我正在更新的子元素，有什么策略可以解决这个问题吗？ ps：代码只是为了说明，

【问题讨论】：

标签： javascript reactjs redux react-loadable

【解决方案1】：

你可以试试useMemo，而不是memo：

  const ImportedComponent = (props) => {

    const LoadableComponent = useMemo(() => {
      return loadable(() => import("../lib" + props.compName));
    },[props.compName]);
   
    ...

memo 仅在使用相同道具进行大量重新渲染时才有帮助，而您似乎没有。

不过，这完全是在黑暗中拍摄的。你能发布一个stackblitz的链接吗？很高兴在上下文中看到您的更多代码。

【讨论】：