小编Iva*_*nko的帖子

这个问题更多的是关于架构而不是编码。

案例如下。在 React 中有时我们想要隐藏组件。例如，当用户在 SPA 中打开新页面时，当某些 toast 关闭时等。我们可以通过添加 来隐藏它们display: none。或者我们可以从虚拟 DOM 中删除它们。

// Hidden div
<div style={{ display: 'none' }}/>

// Removed div
{false && <div/>}

我们的一些老年人也使用第一种变体。即使他们隐藏整个页面。他们对此方法是这么说的：“这种情况下 React 预渲染了所需的内容，因此当内容必须出现时，它需要更少的时间”。

但在这种情况下，我们不能使用生命周期钩子，因为即使组件隐藏，它也不会被删除。但我认为主要的问题是真实的 DOM 变得巨大。这会带来缓慢，不是吗？

那么，什么是更好的呢？

我没有找到任何关于这个问题的对话。也许你可以帮助我。

编辑1：尽管事实上有一些答案，但我想知道更多的意见。所以，我决定开放赏金

我想使用 TypeScript 模块并通过 Webpack 捆绑它们。这是我的配置文件：

webpack.config.js：

const path = require('path');

module.exports = () => {
    return {
        entry: './index.ts',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        module: {
            rules: [{
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            }],
        },
    };
};

tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es3"
  },
  "include": ["./**/*"],
  "exclude": ["node_modules/**/*", "webpack.config.js"]
}

也许我从文档中弄错了。目的是在 ES5（甚至更早版本）中生成代码。但这是我的捆绑文件：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es3"
  },
  "include": ["./**/*"],
  "exclude": ["node_modules/**/*", "webpack.config.js"]
}

它有一个箭头函数，这是在 ES6 中添加的。我很迷惑。我怎样才能摆脱它？

编辑：

这是我尝试编译的代码：

(()=>{var n=function(n,o){console.warn(o)};n(0,0),n(0,1)})();

编辑2： …

我想阅读 fetch 的正文。这是我发送的内容：

fetch('/api/foo', {
  method: 'POST',
  body: new FormData(formRef.current),
});

现在我只需要解析正文。但我不知道怎么办。我无法FormData在服务器端使用，因为它说ReferenceError: FormData is not defined。而且我也不能forEach在客户端上使用 like 。

我应该怎么办？

export default function sendMail(req: NextApiRequest, res: NextApiResponse): void {
    // console.log(req.body instanceof FormData);
    // req.body.forEach(console.log);
    console.log(req.body['name']);
    res.status(200).json({});
}