您还可以通过设置whyDidYouRender属性来手动跟踪任何组件，如下所示：
function BigListPureComponent() {
return <div>
//some heavy component you want to ensure doesn't happen if its not neceserry
</div>
}
BigListPureComponent.whyDidYouRender = true在TypeScript中，如果我们希望whyDidYouRender成为readonly,我们应该编写：
function BigListPureComponent() {
return <div>
//some heavy component you want to ensure doesn't happen if its not neceserry
</div>
}
namespace BigListPureComponent {
export const whyDidYouRender = true;
}但是CRA目前不支持命名空间。
3条答案
按热度按时间ycl3bljg1#
关于命名空间，Babel的支持程度有限：https://babeljs.io/docs/en/babel-plugin-transform-typescript#impartial-namespace-support ,默认情况下是禁用的。然而我从未找到使用它们的合理理由，尤其是在React代码库中。
关于你的问题，这两种情况根本不等价。事实上，你的第二个例子甚至无法在TypeScript编译器中编译，因为输出中它必须重新声明
BigListPureComponent,而这是一个const。如果使用function而不是const,它仍然可以工作，但仍然是三行代码而不是一行，而且输出中还会有额外的IIFE以达到相同的效果。第二种解决方案没有任何优势。你的第一种例子在严格模式下完全可以正常编译，所以我个人认为没有必要去干涉命名空间支持。ppcbkaq52#
你是对的。我现在把const改成function。
这是使用命名空间的一个标准用法。
在TypeScript中，为函数示例添加
readonly属性的标准做法是使用带有export const的命名空间。另一个原因是我们现有的代码库具有层次关系，包含类型和值，已经使用了命名空间。
neskvpey3#
关于命名空间，Babel的支持程度有限：https://babeljs.io/docs/en/babel-plugin-transform-typescript#impartial-namespace-support ,默认情况下是禁用的。显然从v7.13.0开始，它默认为true。在未来的cra版本中，是否可以默认允许ts命名空间？