谈谈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项目并不代表其没有缺点,代码优化是一个长期的过程,唯有发现问题总结问题才能给我们带来新的突破口。
谈谈React那些小事的更多相关文章
- 谈谈React Native环境安装中我遇到的坑
谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-nati ...
- 谈谈 React.js 的核心入门知识
近来React.js变得越来越流行,本文就来谈一谈React.js的入门实践,通过分析一些常用的概念,以及提供一些入门 的最佳编程编程方式,仅供参考. 首先需要搞懂的是,React并不是一个框架,Re ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- 谈谈react hooks的优缺点
前言Hook 是 React 16.8 的新增特性.它是完全可选的,并且100%向后兼容.它可以让你使用函数组件的方式,运用类组件以及 react 其他的一些特性,比如管理状态.生命周期钩子等.从概念 ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- 浅谈React受控与非受控组件
背景 React内部分别使用了props, state来区分组件的属性和状态.props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变.而state维持组件内部的状态更 ...
- [转] React风格的企业前端技术
亲爱的各位朋友们,大家下午好! 首先祝大家国庆节快乐! 很高兴可以在国庆前夕,可以为大家分享一下React风格的企业前端技术. 谈到前端,可能以前大家的第一感觉就是,前端嘛,无非就是做做页面切图,顶多 ...
- React JS和React-Native学习指南
自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南本指南汇集React- ...
- 【优质】React的学习资源
React的学习资源 github 地址: https://github.com/LeuisKen/react-collection https://github.com/reactnativecn/ ...
随机推荐
- Win10 IIS本地部署MVC网站时不能运行?
异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 部署后出现这个错误: 打开文件目录后发现是可以看见目录的,静态页面也是可以打开的 ...
- shell简介
Shell作为命令语言,它交互式地解释和执行用户输入的命令:作为程序设计语言,它定义了各种变量和参数,并提供了许多在高级语言中才具有的控制结构,包括循环和分支. shell使用的熟练程度反映了用户对U ...
- 从备考PMP到与项目经理同呼吸
前言 PMP是什么梗? 项目管理专业人士资格认证.它是由美国项目管理协会(Project Management Institute(PMI)发起的,严格评估项目管理人员知识技能是否具有高品质的资格认证 ...
- Oracle Database 12c Data Redaction介绍
什么是Data Redaction Data Redaction是Oracle Database 12c的高级安全选项之中的一个新功能,Oracle中国在介绍这个功能的时候,翻译为“数据编纂”,在EM ...
- 基于ASP.NET/C#开发国外支付平台(Paypal)学习心得。
最近一直在研究Paypal的支付平台,因为本人之前没有接触过接口这一块,新来一家公司比较不清楚流程就要求开发两个支付平台一个是支付宝(这边就不再这篇文章里面赘述了),但还是花了2-3天的时间通 ...
- [C#] 简单的 Helper 封装 -- RandomHelper
using System; namespace Wen.Helpers { /// <summary> /// 随机数助手 /// </summary> public seal ...
- 流程开发Activiti 与SpringMVC整合实例
流程(Activiti) 流程是完成一系列有序动作的概述.每一个节点动作的结果将对后面的具体操作步骤产生影响.信息化系统中流程的功能完全等同于纸上办公的层级审批,尤其在oa系统中各类电子流提现较为明显 ...
- Linux碎碎念
在学习Linux过程中,有许多有用的小技巧.如果放在纸质的笔记本上,平时查阅会相当不方便.现在以一种“碎碎念”的方式,汇集整理在此,目前还不是很多,但随着学习.工作的深入,后续会陆陆续续添加更多的小技 ...
- 我的屌丝giser成长记-工作篇之B公司
从A公司跳槽到B公司,岗位还是webgis开发方向,但是具体实现的技术完全变了,从flex转换js,这也是我要离开A公司的最重要的原意之一:A公司的arcgis for flex框架采用了flexvi ...
- Android 开发一定要看的15个实战项目
前言: 虽说网上有太多的Android课程,但是大多都是视频,有Android在线开发环境的几乎没有,但是对于学习Android的人来说拥有在线的Android开发环境是非常好的,可以随时动手操作学习 ...