React будет анимировать каждый раз, если я использую компонент функции

Question

Я визуализирую полилинию svg,

const SVG = () => {
  const svgRef = React.createRef<SVGSVGElement>();
  const [tooltipIndex, setTooltipIndex] = React.useState(-1);
  const onTouch = (e: React.TouchEvent) => {
    setTooltipIndex(tooltipIndex + 1);
  };

  const PolyLine = () => {
    return <polyline className="ctLine" points="200,100 100,150 200,250" />;
  };
  return (
    <svg
      width="200"
      height="300"
      viewBox="0 0 200 300"
      ref={svgRef}
      onTouchStart={(e) => onTouch(e)}
    >
      <polyline className="ctLine" points="100,50 60,90 30,60" />;
      <PolyLine />
    </svg>
  );
};

класс выглядит следующим образом:

.ctLine {
  stroke: #0074d9;
  stroke-width: 1px;
  fill: none;
  stroke-dasharray: 1000;
  animation-name: ctLineShow;
  animation-duration: 4s;
  animation-iteration-count: 1;
}

@keyframes ctLineShow {
  0% { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

Источник здесь https://codepen.io/rogerdehe/pen/dyYEVoQ

Я обнаружил, что компонент функции PolyLine diff from polyline: PolyLine будет анимироваться каждый раз при изменении состояния, а polyline не будет?

Мой вопрос:

1. Почему
2. можно исправить PolyLine, чтобы он выглядел как polyline?

Answer 1

Первое - вы правы. Компонент React будет отображаться при изменении свойств / состояния - это ожидаемое поведение.

Во-вторых, вы разместили свой PolyLine компонент внутри SVG. Когда вы вызываете setTooltipIndex на onTouchStart, он создает новый контекст для каждого рендера. Переместите PolyLine из SVG, чтобы предотвратить ненужный рендеринг.

 const PolyLine = () => {
    console.log('render');
    return <polyline className="ctLine" points="200,100 100,150 200,250" />;
  };

const SVG = () => {
  const svgRef = React.createRef<SVGSVGElement>();
  const [tooltipIndex, setTooltipIndex] = React.useState(-1);
  const onTouch = (e: React.TouchEvent) => {
    setTooltipIndex(tooltipIndex + 1);
....