重新渲染时隐藏本机反应

Question

我在本机中有一个图形组件。我在轴上设置了刻度标签，而我遇到的问题是，当我移动文本位置时，它会导致重新渲染，用户可以看到。

在render函数中，我执行以下操作。我从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>
        );
      })}