重新渲染时隐藏本机反应

我在本机中有一个图形组件。我在轴上设置了刻度标签,而我正在处理的问题是,当我移动文本位置时,它会导致重新渲染,这对于用户是可见的。

在渲染功能中,请执行以下操作。我从onLayout函数获得了文本大小,我根据文本的大小调整了SVG文本的dy和y / x分量,更新了状态,这将导致标签重新渲染到正确的位置。但是,重新渲染是可见的,我可以看到标签在移动。有什么方法可以我要么a)隐藏视图,直到图形完全布局,要么b)预先计算这些偏移量,因此我不需要重新渲染?

const labelLayout = () =>
    isHorizontal
      ? {dy: labelSize.height, y: tickSize + 3}
      : {dy: labelSize.height / 2, x: -tickSize - 3};

  return (
    <G translate={translate}>
      {ticks.map((t, i) => {
        return (
          <G
            key={`group-${orientation}-tick-${i}`}
            translate={isHorizontal ? [scale(t), 0] : [0, scale(t)]}>
            <Line
              key={`group-${orientation}-tick-${i}`}
              stroke="purple"
              strokeWidth={1}
              {...lineProps}
            />
            <Text
              stroke="red"
              fontSize={10}
              strokeWidth={1}
              fontWeight="lighter"
              fontFamily="sans-serif"
              onLayout={(e) => setLabelSize(e.nativeEvent.layout)}
              textAnchor={textAnchor}
              {...labelLayout()}>
              {labelFormat(t)}
            </Text>
          </G>
        );
      })}