如何在不触发React中重新渲染的情况下更改元素的样式？

import React, { useState } from 'react';

function MyComponent() {
  const [style, setStyle] = useState({ color: 'black' });

  const changeColor = () => {
    setStyle(prevStyle => ({ ...prevStyle, color: 'red' }));
  };

  return (
    <div>
      <p style={style}>This is a paragraph.</p>
      <button onClick={changeColor}>Change Color</button>
    </div>
  );
}

import React, { useRef } from 'react';

function MyComponent() {
  const styleRef = useRef({ color: 'black' });

  const changeColor = () => {
    styleRef.current.color = 'red';
  };

  return (
    <div>
      <p style={styleRef.current}>This is a paragraph.</p>
      <button onClick={changeColor}>Change Color</button>
    </div>
  );
}

import React, { useRef } from 'react';

function MyComponent() {
  const paragraphRef = useRef(null);

  const changeColor = () => {
    if (paragraphRef.current) {
      paragraphRef.current.classList.toggle('red-text');
    }
  };

  return (
    <div>
      <p ref={paragraphRef} className="black-text">This is a paragraph.</p>
      <button onClick={changeColor}>Change Color</button>
    </div>
  );
}

.black-text {
  color: black;
}

.red-text {
  color: red;
}