时间戳

首页 > 解决方案 > 如何防止使用 redux 重新渲染组件

javascript - 如何防止使用 redux 重新渲染组件

问题描述

如何防止组件重新渲染，例如，当我使用 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 数组中的组件值，但是由于多次重新渲染，性能下降，我尝试使用 memo 来防止重新渲染，但它也更新了整个 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：代码只是为了澄清，

标签： javascriptreactjsreduxreact-loadable

解决方案

而不是memo你可以尝试useMemo：

  const ImportedComponent = (props) => {

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

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

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

推荐阅读