用拖放响应性能问题

Question

当我在框中添加一个元素时，我正在努力应对性能问题。为此，我使用React库。

当数组中有一个新项时，我有一个映射来呈现项：

children.map((children, index) => (
        <Box
          key={children.id}
          isPreview={false}
          index={index}
          slot={name}
          {...children}
        />
      )),

Box组件是库中的Rnd组件，实际上是一个很大的组件。

<Rnd
      style={{
       //2 lines off css
      }}
      minHeight={MIN_SIZE}
      minWidth={MIN_SIZE}
      enableResizing={isResizingEnabled}
      disableDragging={condition}
      size={size}
      position={Position}
      lockAspectRatio={isAspectRatioLocked}
      onResizeStart={onResizeStart}
      onDragStop={(e, newPosition) => {
        onDragStop(newPosition)
      }}
      onResizeStop={(e, dir, ref, delta, newPosition) =>
        onResizeStop(ref, newPosition)
      }
      resizeHandleComponent={createResizeHandles(isInCollision)}
      dragGrid={grid}
      resizeGrid={grid}
      bounds="parent"
    >
      <StyledDiv
        onClick={() => {
          
          dispatch(actions.setEditMode({...properties}))
        }}
        isBeingCropped={isCroppingEnabled}
        isPreview={isPreview}
        isEditable={isEditable}
        isInCollision={isInCollision}
        isEditStartable={isEditStartable}
      >
        {children}
      </StyledDiv>
    </Rnd>

问题是当我把4个元素加到这个盒子里时，有时需要2-4秒.知道怎么解决吗？

是否有任何简单的解决方案使其更快，或者我是否必须研究每个函数/钩子并使用一些useCallback、useMemo或其他方法优化它？

Answer 1

是的，您应该从避免不必要的重呈现开始，然后可以考虑优化每个函数。由于这是一个拖放组件，我相信当您拖动一个元素时，大多数道具都会更改，因此，在实际重新呈现组件之前，请确保每个重呈现都是重要的。

这里有几个地方可以开始。

只将所需的内容传递给盒

与其将子程序传播到Box中，不如只传递它所需的内容，这将避免任何不必要的重呈现，以防Box不关心其中的道具。

children.map((children, index) => (
        <Box
          key={children.id}
          isPreview={false}
          index={index}
          slot={name}
        />
      )),

使用回溯以避免重新呈现

当对象尚未移动时，您可能希望避免任何重新呈现，从而回溯组件。

对函数使用useCallback

这将防止每次重新呈现父级时都分配回调。我所看到的最大的罪魁祸首是onClick处理程序，它依赖于操作，因此在操作更改时会一次又一次地呈现该框，即使该框不依赖于所有的操作。

const { setEditMode } = dispatch;

const handleDragStop = useCallback(
  (e, newPosition) => {
    onDragStop(newPosition);
  },
  [onDragStop]
);

const handleResizeStop = useCallback(
  (e, dir, ref, delta, newPosition) => {
    onResizeStop(ref, newPosition);
  },
  [onResizeStop]
);
const handleOnClick = useCallback(() => {
  dispatch(setEditMode({ ...properties }));
}, [onResizeStop, setEditMode, properties]);

<Rnd
  style={
    {
      //2 lines off css
    }
  }
  minHeight={MIN_SIZE}
  minWidth={MIN_SIZE}
  enableResizing={isResizingEnabled}
  disableDragging={condition}
  size={size}
  position={Position}
  lockAspectRatio={isAspectRatioLocked}
  onResizeStart={onResizeStart}
  onDragStop={handleDragStop}
  onResizeStop={handleResizeStop}
  resizeHandleComponent={createResizeHandles(isInCollision)}
  dragGrid={grid}
  resizeGrid={grid}
  bounds="parent"
>
  <StyledDiv
    onClick={handleClick}
    isBeingCropped={isCroppingEnabled}
    isPreview={isPreview}
    isEditable={isEditable}
    isInCollision={isInCollision}
    isEditStartable={isEditStartable}
  >
    {children}
  </StyledDiv>
</Rnd>;

如果您需要进一步的解释，请查看我写的这里的这篇文章