谈谈 React 那些小事

前言

提及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项目并不表明其没有缺点，代码优化是一个长期的过程，惟有发现问题总结问题才能给咱们带来新的突破口。