小编ans*_*hul的帖子

这是使用 Context API 时非常常见的性能问题。本质上，每当上下文中的状态值发生变化时，提供者之间包装的整个组件都会重新呈现并导致性能下降。

如果我有这样的包装：

<CounterProvider>
        <SayHello />
        <ShowResult />
        <IncrementCounter />
        <DecrementCounter />
</CounterProvider>

价值道具为：

<CounterContext.Provider value={{increment, decrement, counter, hello }} >
  {children}
</CounterContext.Provider>

每次我增加组件的计数值时IncrementCounter，整个包装组件集都会重新呈现，因为这就是 Context API 的工作方式。

我做了一些研究并发现了这些解决方案：

1. 根据用例将上下文拆分为 N 个上下文：此解决方案按预期工作。
2. 使用以下方式包装值提供者React.Memo：我看到很多文章建议使用 React.Memo API，如下所示：

<CounterContext.Provider
  value={useMemo(
    () => ({ increment, decrement, counter, hello }),
    [increment, decrement, counter, hello]
    )}
>
  {children}
</CounterContext.Provider>

然而，这并没有按预期工作。我仍然可以看到所有组件都被重新渲染。使用 Memo API 时我做错了什么？Dan Abramov确实建议在一个开放的 React问题中采用这种方法

如果有人能帮我解决这个问题。谢谢阅读。

我试图next-mdx-remote在基于 Nextjs 的页面中突出显示我的代码语法。我正在获取我的降价格式graphcms并像这样渲染它：

import { serialize } from "next-mdx-remote/serialize"
import { MDXRemote } from "next-mdx-remote"
import rehypeHighlight from "rehype-highlight"


export async function getStaticProps({ params }: any) {
  const data = await getPostDetail(params?.slug)

  const source = data?.content?.markdown
  const mdxSource = await serialize(source, {
    mdxOptions: { rehypePlugins: [rehypeHighlight] },
  })

  return {
    props: {
      posts: data,
      mdxSource: mdxSource,
    },
  }
}


function Post({mdxSource}){
  return(
    <MDXRemote {...mdxSource} />
  )
}

不幸的是，代码块像普通文本字段一样呈现，并且不执行任何操作。

我不确定我在这里缺少什么，官方文档也没有澄清这一点

我正在尝试使用mocha 框架运行测试用例。我试图运行它nodemon，但出现错误。

我nodemon已经通过npm install nodemon类似方式安装了mocha. 如何运行我的项目，nodemon以便我的测试用例使用 mocha 框架显示结果？

在命令提示符中，我的测试用例无论我使用nodemon.