react-redux 防止在状态更改时重新呈现列表项答案

【问题标题】：react-redux prevent rerendering of list items when the state changesreact-redux 防止在状态更改时重新呈现列表项
【发布时间】：2021-11-19 06:34:01
【问题描述】：

我有一个名为 Row 的列表项。该行有三个部分，我已经将每个部分的宽度存储在一个状态

 rowWidth: [
     {
       id: 'name',       
       width: 200,
        
     },
     {
       id: 'size',       
       width: 70,
       
     },
     {
       id: 'status',      
       width: 150,
       
     },
     {
       id: 'progress',       
       width: 200,
       
     },
     {
       id: 'lasttry',       
       width: 200,
      
     },
     {
       id: 'eta',     
       width: 50,
       
     },
   ]

我通过更新存储的外部句柄更改单个列的宽度。

switch (actions.type) {
     case consts.CHANGE_HEADER_WIDTH :  return {
       ...state,
       headerWidth: state.headerWidth.map((item) =>
         item.id === actions.payload.id ?  { ...item, width: actions.payload.neWidth }  : item
       ),
     } 
       
     break;
default : return state;
}

这是行

  const headerWidth = useSelector((state) => state.ui.headerWidth)
  
  
  const getWidth = useCallback((id) => {
    const l = _.find(headerWidth, function (item) {
      return item.id === id
    })
    return l.width
  })

    return(
         <Row>
    <Section1 style={{ width: getRow('name') }}/>
    <Section2 style={{ width: getRow('size') }}/>
    <Section3 style={{ width: getRow('status') }}/>
    </Row>
    )

我的问题是 - 如何在不重新渲染行的情况下更改这些 div 的宽度

【问题讨论】：

如果宽度发生变化并且您不进行新的渲染，您将永远不会看到具有更新宽度值的组件。如果这是您想要的，那么您必须使用另一种方法。不要将存储在 redux 状态。
更新状态会重新渲染 UI，如果您不重新渲染 UI，您将看不到状态更新到了什么。
如果你不想渲染没有改变的Section组件，那么你可以使用React.memo将这些组件变成纯组件。

标签： reactjs redux react-redux

【解决方案1】：

感谢大家的帮助。我知道必须重新渲染才能查看状态更改。

【讨论】：