React 在开发和生产中运行有什么区别？答案

【问题标题】：What is the difference between React running in development and production?React 在开发和生产中运行有什么区别？
【发布时间】：2021-09-06 22:21:48
【问题描述】：

我今天正在编写一个 React+react-query 应用程序，当我从开发模式切换到生产模式时遇到了问题。

生产模式混合了运行npm run build 和在服务中提供这些HTML/JavaScript/CSS 文件（可能使用npx serve dist）。开发模式只是运行npm run dev（或npm start，如果使用CRA）。

这是代码：

const useMyQuery = () =>
  useQuery(
    ["myAwesomeData"],
    async () => {
      const { data } = await axios.get(`http://http.us/500`);
      return data;
    },
    { placeholderData: { myAwesomeProperty: [] } }
  );

const App = () => {
  const { isError } = useMyQuery();
  return isError ? <div>Error</div> : <Child />;
};

const Child = () => {
  const { data } = useMyQuery();
  return (
    <pre>
      <code>{JSON.stringify(data.myAwesomeProperty)}</code>
    </pre>
  );
};

为了简单起见，我省略了QueryClientProvider 及其client。 placeholderData 也被用作加载状态，它允许在加载真实数据时正确呈现 Child。

这里最重要的部分是 data.myAwesomeProperty 在加载状态之后 - 只有在生产中运行时才会引发错误。产生的错误是：

TypeError: Cannot read property 'myAwesomeProperty' of undefined

在开发中运行时，<div>Error</div> 会按预期显示。

我主要关心的不是解决问题（因为我可以简单地在Child 组件上添加一个if 语句来防止访问data.myAwesomeProperty）。

相反，我想知道为什么开发行为和生产行为之间存在差异？它是否记录在某处？

【问题讨论】：

你引用所有这些文本有什么原因吗？看起来这只是您自己的文本，只是...使用常规文本？（并为该 TypeError 使用代码围栏或代码缩进）

标签： reactjs react-query

【解决方案1】：

dev 和 prod 版本的 React 有很大的不同。但主要的可能是这里的速度。一般来说，prod 版本的性能要好得多。

根据您的写作方式，您不可能期待有效的myAwesomeProperty。因此，在 prod 中，您会立即得到错误。

在dev 中，可能事情会变慢，当您获得Child 时，API 已经完成。

注意：列出开发/产品差异的轿跑车。

启用探查器以收集时间信息
调试记录器，添加相当多的名称并检查
检查钩子计数和顺序匹配
严格模式增加了一堆东西，https://reactjs.org/docs/strict-mode.html

我也注意到在严格模式下，东西可以渲染两次，My React Component is rendering twice because of Strict Mode

如果您没有收到错误，这可能会回答，因为双重渲染实际上发生在一次更新中（而不是两次更新）。

【讨论】：