仅在 JSX 映射函数中重新渲染特定的子组件

Question

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

我正在尝试找到一种无需重新渲染所有组件即可实现此目的的方法，目前发生这种情况是因为道具发生了变化

我试过在class组件中使用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> )
}

Answer 1

我的问题的解决方案是使用 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);

仅在 JSX 映射函数中重新渲染特定的子组件

Rerender only specific Child Components in JSX map function

javascript

reactjs

map-function

rerender

react-memo

性能

实施