摘要：在如今的前端框架界，三分天下的时代已经到来，而曾经一统天下的局面已一去不复返。三分天下，前端虽乱，但美其名曰繁荣。那些小事俗话说千里之堤毁于蚁穴，在开发中我们不能忙于进度而忽视了细节。
前言
说起React，那也是近一年多时间火起来的前端框架，其在Facebook的影响力和大力推广下，已然成为目前前端界的中流砥柱。在如今的前端框架界，React、Vue、Angular三分天下的时代已经到来，而曾经jQuery一统天下的局面已一去不复返。
三分天下，前端虽乱，但美其名曰“繁荣”。每一次突破性的革命必定会迎来成千上万的追随者，我们可以看一下一份来自NPM的统计数据：
上图统计的是全球范围内React、Vue、Angular在npm中的月下载次数，统计地址可以访问：npm-stat。从图中我们不难发现React虽初出茅庐，但其影响力已经奠定了在前端框架中的霸主地位。
而对于React的开发者来说，如何利用React构建现代化的前端项目，产出高质量的前端代码才是学习React的重点。所以本文就我自己平时利用React开发项目的经验和个人见解，来谈谈在React项目中需要了解和容易忽略的“小事”。
那些小事俗话说“千里之堤毁于蚁穴”，在React开发中我们不能忙于进度而忽视了细节。
1.使用容器组件与展示组件容器组件和展示组件名词来自于redux文档。如果你想让自己的React项目变得清晰可维护，那么你需要了解并使用它们。
这里我们将组件分成两类，一类叫“容器组件”，我一般将它们放在containers文件夹下。这一类组件可以理解为最顶层的组件，其功能仅仅做数据提取，然后渲染对应的子组件。
另一类叫“展示组件”，我一般将它们放在components文件夹下。这一类组件可以理解为只具有展示性的子组件，其功能仅仅是展示性的，所有数据都通过 props 传入。
这样分类的好处在于：关注分离，更易复用及维护，数据集中处理等。具体可以参见：译文《容器组件和展示组件》
2.组件划分不宜过细，层次不宜过深曾经有人问我React组件的划分应不应该太细，比如是不是可以把一个输入框划分为一个组件？
我个人认为组件不应该按照DOM元素来划分，而是应该按照功能来划分。如果你的一个页面中包含了两个功能，比如表格搜索、弹框查看，就可以将其划分为两个子组件。
同样的组件层次也不宜过深。很多时候会存在组件中包含组件的情况，这样就出现了组件之间的嵌套层次。我个人认为组件间的嵌套层次不宜超过3层，如果嵌套层次太深会直接导致功能及状态的难以维护，就像if else语句嵌套太深一样。
3.Redux和state并不冲突很多开发者可能会认为用了Redux来管理数据状态后，我们的组件中就不需要state了。其实我个人认为Redux和state并不冲突。
Redux主要用于管理那些公用及异步的状态，而state一般用于管理组件独有的状态。如果你的组件中存在其不必和其他组件公用及非异步的单一数据，那么你直接可以写在state中，比如一些loading的状态和显示隐藏的状态等。
巧妙的使用Redux和state可以帮助我们更好的管理数据流。
4.不要渲染当前用不到的组件在用户操作中，有些组件可能不是一开始展示页面的时候就需要用到的，比如某些弹框等。这样的组件除了将其隐藏外，我们最好不要让它渲染在页面上，当用户点击触发的时候再进行渲染，这样一来便起到了优化加载的作用。
5.除了划分组件还应划分reducer相比组件的划分，reducer的划分也同样重要。随着应用的膨胀，我们可以将拆分后的 reducer 放到不同的文件中, 以保持其独立性并用于专门处理不同的数据域。
如果一个中大型的项目不划分reducer，会导致单一的reducer文件代码过于冗长而难以维护。我们可以使用Redux提供的 combineReducers()来将拆分的reducer进行合并。详见：Redux中文文档。
结语事无巨细，人无完人。一个优秀的React项目并不代表其没有缺点，代码优化是一个长期的过程，唯有发现问题总结问题才能给我们带来新的突破口。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91142.html
摘要：什么叫保持登录状态比如说我在百度页面进行了登录，但是不找个地方记录这个登录态的话。那我去页面，我的登录态怎么保持呢难道要携带吗这肯定是不安全的。你让用户再登录一次登个鬼，再见为什么需要登录态？ 因为需要识别用户是谁，否则怎么在网站上看到个人相关信息呢？ 为什么需要登录体系？ 因为HTTP是无状态的，什么是无状态呢？ 就是说这一次请求和上一次请求是没有任何关系的，互不认识的，没有关联的。 我们...
摘要：弄了一个持续更新的笔记，可以去看看，链接地址此篇文章的地址使用两年后值得吗基础笔记的地址可以也可以。使用，你可以使用抽象类等功能。有关抽象类的更多信息支持，和方法，只读属性。 弄了一个持续更新的github笔记，可以去看看，链接地址：Front-End-Basics 此篇文章的地址：使用TypeScript两年后-值得吗？ 基础笔记的github地址：https://githu...
摘要：的过期策略是什么样的采用了定期删除惰性删除的过期策略。定期删除原理定期删除指的是默认每隔就随机抽取一些设置了过期时间的，检测这些是否过期，如果过期了就将其删掉。所有只会抽取一部分而不会全部检查。 1.数据为什么会过期？ 首先，要明白redis是用来做数据缓存的，不是用来做数据存储的(当然也可以当数据库用)，所以数据时候过期的，过期的数据就不见了，过期主要有两种情况， ①在设置缓存数据时制定了...
阅读 1605·2021-11-24 11:16
阅读 3115·2021-09-10 10:51
阅读 3014·2021-08-03 14:03
阅读 1113·2019-08-29 17:03
阅读 3103·2019-08-29 12:36
阅读 1945·2019-08-26 14:06
阅读 394·2019-08-23 16:32
阅读 2472·2019-08-23 13:42
