如何告诉 React 它应该编译生产环境版本

类别：react / 日期：2022-10-12 / 浏览：261 / 评论：0

通常情况下我们会使用 Webpack 的 DefinePlugin 方法来将 NODE_ENV 变量值设置为 production。编译版本中 React 会忽略 propType 验证以及其他的告警信息，同时还会降低代码库的大小，React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息。

为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的 map？

props.children并不一定是数组类型，譬如下面这个元素：

<Parent>
  <h1>Welcome.</h1>
</Parent>

如果我们使用props.children.map函数来遍历时会受到异常提示，因为在这种情况下props.children是对象（object）而不是数组（array）。React 当且仅当超过一个子元素的情况下会将props.children设置为数组，就像下面这个代码片：

<Parent>
  <h1>Welcome.</h1>
  <h2>props.children will now be an array</h2>
</Parent>

这也就是我们优先选择使用React.Children.map函数的原因，其已经将props.children不同类型的情况考虑在内了。