WhyDidYouRender 库放置在组件外部时不显示任何日志

Question

我实际上在我的 React Native 应用程序中使用 WhyDidYouRender 库，并且尝试在组件中使用 WDYR，但它仅在我放置 Component.whyDidYouRender = true; 时才有效；直接在组件声明中：

function Component(){
Component.whyDidYouRender = true;
return (
<></>
)
}

我有日志。

但是当我把它放在外面时，即使在像这样的 React-Redux 连接器之后：

function Component(){
Component.whyDidYouRender = true;
return (
<></>
)
}
const connector = connect(mapStateToProps, mapDispatchToProps);
export default connector(Component);
Component.whyDidYouRender = true;

我没有日志

我尝试将 Component.whyDidYouRender = true 放在连接器之后，但它也不起作用

Answer 1

在 JavaScript 中，当你声明一个像 function Component() { ... } 这样的函数时，它就像一个创建对象的蓝图。当React使用这个蓝图创建组件时，它会根据这个蓝图制作许多副本。每个副本就像组件的一个新实例。

现在，假设您有一个名为 WhyDidYouRender 的特殊标记。当您将其直接放入函数蓝图 (function Component() { ... }) 中时，React 知道将此标记附加到它基于该蓝图创建的每个新副本（或实例）。

但是，如果将标记放在功能蓝图之外，则就像将标记粘贴在蓝图本身上，而不是粘贴在副本上。 React 不会自动将其附加到基于该蓝图制作的副本中。

因此，为了确保 React 将标记附加到组件的每个副本（或实例），您需要将其放入函数蓝图中。这样，每次 React 根据您的蓝图创建一个新组件时，它都会附带附加的特殊标记。