反应重新渲染表格的每个单元格

Question

我在表格的每个单元格中都有一个非常大的重新渲染问题，因为 handleClick 函数甚至使用了 useCallback。

我的单元格组件喜欢; （用 React.memo() 包裹）

<StyledTableCell onContextMenu={() => handleClick()} style={{ backgroundColor: `${(flash && data) ? 'yellow' : color}`, transition: `${flash ? 'none' : '1s'}` }}>
    <div className='cell-size' >
      {data}
    </div>
  </StyledTableCell >

export const MemoizedDataCell = React.memo(DataCell)

这个单元格像;

一样进入上层

<MemoizedDataCell handleClick={() => onCellClick(selectedOrders, i, Boolean(val))} data={val} key={colName + i} color={cellColor(i, z)} />

最后，在最上面的父级中，我将这个函数用于子级；

  const onCellClick = React.useCallback((myOrder: any, i: number, isFilled: boolean) => {

    setCanDeal(isFilled)
    let side = i < 3 ? 'bids' : 'asks'
    console.log(myOrder)
    if (i < 0) {
      return null
    }
    if (!myOrder.asks && !myOrder.bids) {
      const detail = {
        instrName: myOrder.instName, maturity: myOrder.maturity, side: side.charAt(0).toUpperCase() + side.slice(1, -1), contract: `${myOrder.instName} ${myOrder.maturity}`,
        price: '0', quantity: '0', totalQuantity: '0', tradableQuantity: '0'
      }
      return setOrderDetail(detail)
    }

    let orderID = myOrder[`${side}`][0]?.OrderID
    let instrName = myOrder[`${side}`][0]?.InstName
    let maturity = myOrder[`${side}`][0]?.FirstSequenceItemName
    let contract = `${instrName} ${maturity}`
    let broker = myOrder[`${side}`][0]?.Broker
    let price = myOrder[`${side}`][0]?.Price
    let quantity = myOrder[`${side}`][0]?.Volume
    let timeInForce = myOrder[`${side}`][0]?.OrderType.replace(/([A-Z])/g, ' $1').trim()
    let lastUpdTime = new Date(myOrder[`${side}`][0]?.DateTime).toLocaleString()
    let tradableQ = '-'
    let totalQ = '-'
    let priceStat = myOrder[`${side}`][0]?.Status
    side = side.charAt(0).toUpperCase() + side.slice(1, -1)

    const detail = {
      orderID: orderID, instrName: instrName, maturity: maturity, side: side, contract: contract,
      price: price, priceStatus: priceStat,
      quantity: quantity, totalQuantity: totalQ,
      tradableQuantity: tradableQ, broker: broker, lastUpdate: lastUpdTime, timeInForce: timeInForce
    }
    setOrderDetail(detail)
  }, [])

我们将不胜感激。谢谢。

Answer 1

你是如何记住你的 Cell 的？ 如果您使用memo 或useMemo，它会与之前的每个道具进行=== 比较

正如你所做的那样：

<MemoizedDataCell handleClick={() => onCellClick(selectedOrders, i, Boolean(val))} .. />

您正在为handleClick 的每次渲染创建一个新函数，因此MemoizedDataCell 将被重新渲染。

所以你需要memoize这个函数

const _handleClick = useCallback(() => onCellClick(...), []) // With good values in dependency array

<MemoizedDataCell handleClick ={_handleClick} />

这样，您在每次渲染时都将相同的函数引用作为 prop 传递

另请注意，执行以下操作：

<Component style={{ backgroundColor: ... }} />

每次创建新的Object 时也会重新渲染