React 中组件 loaded/applied 的 CSS 到底是什么时候？
When exactly is the CSS of a component loaded/applied in React?
我有我的 app.js 导入 someComponent.js。 someComponent.js 然后导入 someStyles.css。但是 app.js 只会在单击按钮时 use/render someComponent.js。
用户的浏览器现在究竟什么时候加载并应用someStyles.css？
无论是否按下按钮，它都会在加载页面时立即加载，还是只会在组件实际呈现时请求并加载所述 CSS 文件？
这个问题很难回答，因为它取决于您的应用程序是如何设置和构建的。在开发和部署应用程序时，您的结果甚至可能会有所不同。
但是，有一些方法可以使用您的浏览器自行验证 开发人员工具。
每个主流浏览器都有开发者工具，其中包含有关“网络”流量的部分。
如果您在“网络”选项卡上打开您的开发人员工具，然后刷新您的页面，您将能够看到从服务器获取资源的时间顺序。
您甚至可以应用一些网络限制来查看页面上的实际效果。
参见：
- Chrome: https://developer.chrome.com/docs/devtools/network/#load
- 边缘：https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/#log-network-activity
- 火狐：https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#opening_the_network_monitor
您可能也有兴趣阅读有关 code-splitting 作为加载组件时进行更改的方法。
我有我的 app.js 导入 someComponent.js。 someComponent.js 然后导入 someStyles.css。但是 app.js 只会在单击按钮时 use/render someComponent.js。
用户的浏览器现在究竟什么时候加载并应用someStyles.css？ 无论是否按下按钮，它都会在加载页面时立即加载，还是只会在组件实际呈现时请求并加载所述 CSS 文件？
这个问题很难回答，因为它取决于您的应用程序是如何设置和构建的。在开发和部署应用程序时，您的结果甚至可能会有所不同。
但是，有一些方法可以使用您的浏览器自行验证 开发人员工具。
每个主流浏览器都有开发者工具，其中包含有关“网络”流量的部分。 如果您在“网络”选项卡上打开您的开发人员工具，然后刷新您的页面，您将能够看到从服务器获取资源的时间顺序。
您甚至可以应用一些网络限制来查看页面上的实际效果。
参见：
- Chrome: https://developer.chrome.com/docs/devtools/network/#load
- 边缘：https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/#log-network-activity
- 火狐：https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#opening_the_network_monitor
您可能也有兴趣阅读有关 code-splitting 作为加载组件时进行更改的方法。