React应用在Chrome中崩溃（内存不足）求助

问题根源 #

你的Header组件存在无限递归渲染：组件返回的JSX里直接调用了自身，React会不断创建新的Header组件实例，导致内存占用持续飙升，最终浏览器因内存耗尽崩溃。

罪魁祸首是这段代码：

export function Header(){
    return (
        <Header>
            <h1>Reddit for our own</h1>
        </Header>
    );
}

这里的<Header>就是你定义的函数组件，形成了无终止的递归调用。

修复方案 #

1. 替换递归的组件标签 #

把组件返回的<Header>换成原生HTML的<header>标签（注意小写，React中首字母大写的是自定义组件，小写是原生DOM标签）：

import * as React from "react";

export function Header(){
    return (
        <header>
            <h1>Reddit for our own</h1>
        </header>
    );
}

2. 升级React渲染方式（可选但推荐） #

你的React版本是18.2.0，建议使用React 18的新根API替代旧的ReactDOM.render，修改src/index.jsx：

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {Header} from "./header";

const root = ReactDOM.createRoot(document.getElementById('react_root'));
root.render(<Header />);

不需要再监听window.load事件，React会自动处理DOM加载完成后的渲染逻辑。

额外修正点 #

webpack配置里有个拼写错误：

// 原代码
const IS_DEV = NODE_ENV === "developement";
// 修正后
const IS_DEV = NODE_ENV === "development";

这个错误不影响当前内存问题，但修正后能避免后续环境判断相关的bug。

内容的提问来源于stack exchange，提问作者raicha