1

我正在通过一个数组进行映射，该数组为数组中的每个项目返回 JSX 组件。在运行时我想传递值。如果它们与单个项目的值匹配，则它们的单个组件将被修改。

我试图找到一种方法来实现这一点，而无需重新渲染所有组件，目前发生这种情况是因为道具发生了变化

我曾尝试在类组件中使用shouldComponentUpdate，但似乎这样我只能将 prevState 和 prevProps 与相应的更改进行比较。我在 Map 函数中进一步考虑了 useMemo，它不起作用，因为它嵌套在 map 函数中。

const toParent=[1,2,4,5]

父组件：

function parent({ toParent }) {

const [myNumbers] = useState([1,2,3,4, ..., 1000]);

return (
   <div>
      {myNumbers.map((number, index) => (
         <Child toChild = { toParent } number = { number } 
          index= { index } key = { number }/>
      ))}
   </div>
  )
}

子组件：

function Child({toChild, number, index}){
   const [result, setResult] = useState(() => { return number*index }

   useEffect(()=> {
      if (toChild.includes(number)) {
         let offset = 10
         setResult((prev)=> { return { prev+offset }})
      }
   }, [toChild])

   return ( 
      <div style={{width: result}}> Generic Div </div> )
}
4

1 回答 1

2

我的问题的解决方案是使用 React.memo HOC并将属性相互比较并将其导出为React.memo(Child, propsAreEqual).

表现

这样可以避免使用 findElementbyId（在任何情况下都不推荐）和 shouldComponentUpdate 等其他方法来定位地图函数中的特定项目。性能也相当不错。使用这种方法将渲染时间从每 250 毫秒 40 毫秒减少到大约 2 毫秒。

执行

在子组件中：

function Child(){...}
function propsAreEqual(prev, next) {
   //returning false will update component, note here that nextKey.number never changes.
   //It is only constantly passed by props
    return !next.toChild.includes(next.number)

}
export default React.memo(Child, propsAreEqual);

或者，如果还应检查其他语句：

function Child(){...}
function propsAreEqual(prev, next) {

   if (next.toChild.includes(next.number)) { return false }
   else if ( next.anotherProperty === next.someStaticProperty ) { return false }
   else { return true }
  }

export default React.memo(Key, propsAreEqual);
于 2020-08-11T09:12:43.483 回答