React拆分组件的最佳实践？

Posted 2023-04-11

参考技术A 目前常用的做法使用 React 的 lazy 和 suspence 在组件维度实现拆分资源包。

减少请求资源的大小，让首屏能更快渲染

从上图能看到 activity_full_refund_new 的资源拆分后减少 6KB，新增三个独立资源 0、1、2

简单的做法就是每个组件都拆分，这样拆分问题，如果每个组件都拆分会有许多琐碎的资源，首次渲染的时间可能很快，但界面依然是空白的，还是需要等待组件的资源加载完成才能看到组件的，所以需要区分一下哪些组件可以拆分？

可以拆分的组件标准：

结果截图

推荐每个组件都是用单独的 Suspense 包裹，可以单独渲染，如果多个组件使用一个 Suspense，其下面的所有组件是同时渲染，如果子组件没做好状态控制容易造成多次渲染。

React.js最佳实践01

我们应该如何编写应用程序以及推荐的库是什么？

---

作为长期使用React.js的开发人员，我有自己的答案和最佳实践，但是您可能不会同意我的一切。 我对您的想法和意见感兴趣： 请发表评论，以便我们进行讨论。

---

处理数据

在React.js应用程序中处理数据非常简单，但同时又很困难。

之所以会发生这种情况，是因为您可以通过多种方式将属性传递给React组件以从中构建渲染树。但是，如何更新视图并不总是很明显。 2015年从发布不同的Flux库开始，并继续提供更多功能和反应性解决方案。

让我们看看现在的位置：

FLUX

根据我们的经验，Flux经常被过度使用（这意味着人们甚至不需要它就使用它）。Flux提供了一种干净的方法来存储和更新应用程序的状态，并在需要时触发渲染。

Flux对于应用程序的全局状态可能非常有用，例如：管理登录用户，路由器或活动帐户的状态，但是如果您开始使用它来管理临时或本地数据，它可能会很快变成麻烦。

我们不建议使用Flux管理与路线相关的数据，例如/ items /：itemId。相反，只需获取它并将其存储在组件的状态即可。在这种情况下，组件消失后它将被销毁。

使用Redux

Redux是JavaScript应用程序的可预测状态容器。

Redux改进了Flux的思想，但通过借鉴Elm的建议避免了其复杂性。