反应降价渲染太多

Question

我正在使用 React Markdown (https://www.npmjs.com/package/react-markdown) 在我的 NextJS 项目中呈现 markdown 内容。

当我刷新时，我的终端中有两个“toto”和“titi”...这是正常的还是这段代码有什么问题？

import Head from 'next/head';
import ReactMarkdown from 'react-markdown';

function Section ({ data }) {

  const content = JSON.parse(data.markdown);

  const {
    title,
    sortContent
  } = data;

  console.log('toto');

  return (
    <>
      <main>
        <h1>{title}</h1>
        <h1>{sortContent}</h1>
        <ReactMarkdown source={content.default} escapeHtml={false} />
      </main>
    </>
  )
}

export async function getServerSideProps (context) {

  const json = await import('../../content/article1/data.json');
  const content = await import('../../content/fr/article1/content.md');

  console.log('titi');

  return {
    props: {
      data: {
        title: json.title_content,
        sortContent: json.short_content,
        markdown: JSON.stringify(content)
      }
    }
  }
}

export default Section

Answer 1

如果这真的是您仅有的唯一代码，那么它看起来很正常。您可能有其他代码使用这些组件，这就是 in 显示两次的原因。但是根据你那里的代码，没有错误。

Answer 2

这是仅在调试模式下使用 React.StrictMode 的已知副作用。您可以阅读更多相关信息 here。

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

Class component constructor, render, and shouldComponentUpdate methods

Class component static getDerivedStateFromProps method

Function component bodies

State updater functions (the first argument to setState) Functions passed to useState, useMemo, or useReducer

Answer 3

它是 Reacts 开发工具的一部分，StrictMode。它是预期的并且仅适用于开发模式。您可以删除 StrictMode 以查看它仅呈现预期的次数，但显然您会丢失一些开发工具。此工具可以警告您某些您可能希望避免的不安全或不明智的做法，例如使用遗留 API。

此处有更多详细信息：

反应降价渲染太多

too much render with react markdown

javascript

markdown

reactjs