react中如何写原生js
在 React 中编写原生 JavaScript 可以通过以下几种方式实现，具体取决于使用场景和需求：
直接操作 DOM
React 推荐使用虚拟 DOM 进行更新，但在某些情况下需要直接操作真实 DOM。可以通过 useRef 或 document.getElementById 获取 DOM 节点：
import { useRef, useEffect } from 'react';
function Example() {
const divRef = useRef(null);
useEffect(() => {
if (divRef.current) {
divRef.current.style.backgroundColor = 'red';
}
}, []);
return <div ref={divRef}>This div will be red</div>;
}使用原生事件监听
React 封装了合成事件系统，但也可以直接使用原生事件监听：
useEffect(() => {
const handleClick = () => console.log('Native click');
document.addEventListener('click', handleClick);
return () => document.removeEventListener('click', handleClick);
}, []);调用原生 API
可以直接调用浏览器原生 API，例如 localStorage、fetch 等：
useEffect(() => {
localStorage.setItem('key', 'value');
const data = localStorage.getItem('key');
console.log(data);
}, []);动态加载脚本
需要引入第三方库或执行特定脚本时，可以直接操作 script 标签：
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://example.com/script.js';
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);绕过 React 的更新机制
在极少数情况下需要强制更新 DOM，可以通过 dangerouslySetInnerHTML 或直接操作 DOM：
function RawHTML() {
const html = '<span>Raw HTML</span>';
return <div dangerouslySetInnerHTML={{ __html: html }} />;
}注意事项
- 直接操作 DOM 可能破坏 React 的虚拟 DOM 一致性，应谨慎使用。
- 原生事件监听需注意清理，避免内存泄漏。
dangerouslySetInnerHTML可能导致 XSS 攻击，需确保内容安全。
