React开发中面临的九个重要抉择

抉择系列：在技术开发的过程中我们会面临着各种各样的抉择，我们在不同情境下该如何选择恰当的技术，这是本系列文章想要解决的问题。

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比东营网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式东营网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖东营地区。费用合理售后完善，10年实体公司更值得信赖。

在 React 开发的过程中我们常常会遇到一些抉择，下面我将选取其中一些个人认为重要的抉择来一一分析。但请记住以下所说的都只是的建议，可能有一些方面也没有考虑到，大家还是需要依据实际情况自己选择最合适的，切勿随波逐流。

抉择 1：开发环境搭建

当开始React开发之前，你或你的团队必须先考虑选择什么样的开发环境，先愉快的呈上群众的选择图。

通用场景建议使用 create-react-app，它将满足你大部分的开发需求。如果默认配置不能满足你的需求，运行 npm run eject 按需修改你的配置吧(温馨提示：此过程式不可回退的)。

其他可替代

  • Gatsby 适用于开发静态网站
  • Next.js 适用于前后端同构方案

如果以上皆不能满足你的需求时，亲，自己动手，丰衣足食。

抉择 2：类型

JavaScript 是弱类型语言，你可能忽视类型检查，也可能需要引入类型检查。下图是群众的选择图，你将如何选择?

如果你懒得折腾，那 prop-types 可以满足你的类型验证，也会避免大部分的类型问题。

如果你喜欢折腾，追求完美，没有问题还有下面两种选择：

  • TypeScript JavaScript 的超集，最终可编译成清晰与整洁的原生JavaScript代码.
  • Flow 为 Javascript 添加静态类型检查，用于提高开发者的效率与代码质量。

抉择 3：ES5(createClass) VS ES6(class)

如果你开发环境使用的是ES5语法，那你没得选择只能使用createCalss，推荐官方文章《非ES6环境下如何使用React》

如果你开发环境使用ES6语法，强烈建议使用 class，使用起来更简单，Facebook 也推荐使用 Class，示例代码如下：

 
 
 
 
    
  
  
  
  
  1. class SayHello extends React.Component {
    2. 
  
  
  
  
  2.    constructor(props) {
    3. 
  
  
  
  
  3.      super(props);
    4. 
  
  
  
  
  4.      this.state = {message: 'Hello!'};
    5. 
  
  
  
  
  5.    }
    6. 
  
  
  
  
  6.    render() {
    7. 
  
  
  
  
  7.      return (
    8. 
  
  
  
  
  8.        
    9. 
  
  
  
  
  9.          Say: {this.state.message}
    10. 
  
  
  
  
  10.        
    11. 
  
  
  
  
  11.      );
    12. 
  
  
  
  
  12.    }
    13. 
  
  
  
  
  13.  } 
    14.

抉择 4：类 VS 纯函数

如果你不需要使用生命周期，尽可能使用无状态纯函数(Stateless functional components：react-v0.14版本添加的新特性)。

无状态纯函数简单例子：

 
 
 
 
    
  
  
  
  
  1. // 无状态纯函数组件，使用 ES5 
    2. 
  
  
  
  
  2.   var Aquarium = function(props) {
    3. 
  
  
  
  
  3.     var fish = getFish(props.species);
    4. 
  
  
  
  
  4.     return {fish};
    5. 
  
  
  
  
  5.   };
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.   // 无状态纯函数组件，使用 ES2015 (ES6) 箭头函数:
    8. 
  
  
  
  
  8.   var Aquarium = (props) => {
    9. 
  
  
  
  
  9.     var fish = getFish(props.species);
    10. 
  
  
  
  
  10.     return {fish};
    11. 
  
  
  
  
  11.   };
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.   // 或者再使用对象解构与默认的返回，简单：
    14. 
  
  
  
  
  14.   var Aquarium = ({species}) => (
    15. 
  
  
  
  
  15.     
    16. 
  
  
  
  
  16.       {getFish(species)}
    17. 
  
  
  
  
  17.     
    18. 
  
  
  
  
  18.   );
    19. 
  
  
  
  
  19. 
  
  
  
  
  20.   // 然后使用:  
    21.

依据单一职责原则，你的组件应该只有且只一个职责，内部的逻辑尽量设计扁平。如果逻辑复杂，那你要问自己组件是否还需要分解，使用纯函数会使你时时刻刻考虑组件的设计是否合理。

总之一句话，纯函数能帮你更好的设计的你组件，底层的原子组件尽量使用纯函数，可复用或者更复杂的逻辑可以考虑抽离出高价逻辑组件。

也并不是说所有地方都要使用纯函数，如果你的组件确实需要状态与生命周期相关操作，那就使用类。

附带两篇同一个作者的不同观点的文章(英文)：

  • 使用无状态函数组件的9个理由 React Stateless Functional Components: Nine Wins You Might Have Overlooked
  • 7个不使用无状态纯函数组件的理由 7 Reasons to Outlaw React’s Functional Components

抉择 5：State

接下来你要考虑的是如何管理你的状态数据，业界已经有很多方案，群众的选择是

如果是简单WEB的应用，可能 React 提供的 setState() 就完全能满足你的需求，够用就好别强行加入其它 State 管理框架。

如果是大型的WEB应用，个人建议使用 Redux。Redux是JavaScript应用程序的可预测状态管理容器。它可以帮助您编写行为一致的应用程序，可在不同环境(WEB客户端，服务器和手机应用等)中运行，并且易于测试。

顺便提一下Redux借鉴的其核心思想之一的框架 Flux，有兴趣可以是研究一下。

Bobx，简单，可扩展的状态管理库。本人也没有使用就不细说了

抉择 6：绑定(Binding)

一张图能搞定，就不多做解释了

使用箭头函数绑定示例代码如下：

 
 
 
 
    
  
  
  
  
  1. class SayHello extends React.Component {
    2. 
  
  
  
  
  2.    constructor(props) {
    3. 
  
  
  
  
  3.      super(props);
    4. 
  
  
  
  
  4.      this.state = {message: 'Hello!'};
    5. 
  
  
  
  
  5.    }
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.    // 使用箭头函数banding
    8. 
  
  
  
  
  8.    handleClick = () => {
    9. 
  
  
  
  
  9.      alert(this.state.message);
    10. 
  
  
  
  
  10.    }
    11. 
  
  
  
  
  11. 
  
  
  
  
  12.    render() {
    13. 
  
  
  
  
  13.      return (
    14. 
  
  
  
  
  14.        
    15. 
  
  
  
  
  15.          Say hello
    16. 
  
  
  
  
  16.        
    17. 
  
  
  
  
  17.      );
    18. 
  
  
  
  
  18.    }
    19. 
  
  
  
  
  19.  } 
    20.

使用构造函数中绑定示例代码如下：

 
 
 
 
    
  
  
  
  
  1. class SayHello extends React.Component {
    2. 
  
  
  
  
  2.     constructor(props) {
    3. 
  
  
  
  
  3.       super(props);
    4. 
  
  
  
  
  4.       this.state = {message: 'Hello!'};
    5. 
  
  
  
  
  5.       
    6. 
  
  
  
  
  6.       // 在用构造函数banding
    7. 
  
  
  
  
  7.       this.handleClick = this.handleClick.bind(this);
    8. 
  
  
  
  
  8.     }
    9. 
  
  
  
  
  9. 
  
  
  
  
  10.     handleClick() {
    11. 
  
  
  
  
  11.       alert(this.state.message);
    12. 
  
  
  
  
  12.     }
    13. 
  
  
  
  
  13. 
  
  
  
  
  14.     render() {
    15. 
  
  
  
  
  15.       return (
    16. 
  
  
  
  
  16.         
    17. 
  
  
  
  
  17.           Say hello
    18. 
  
  
  
  
  18.         
    19. 
  
  
  
  
  19.       );
    20. 
  
  
  
  
  20.     }
    21. 
  
  
  
  
  21.   } 
    22.

抉择 7：样式(Styling)

样式的选择太多了，我们就不一一列举，我们选择几个React开发者常用的选择项，群众的选择尽在下图中

依据群众的选择，好像(由于上图群众的人数不详，样本不能足，只能说好像) CSS-in-JS 正在吞噬 CSS-Modules 的份额。

Cory House 的选择编写代码使用SASS，命名使用BEM已经足够，他也关注 styled-components。

本人倾向逻辑，结构与样式分离，现阶段还是使用SASS，命名使用BEM。近期在探讨更适合自己的样式CSS组织架与命名方式，后续会有专门的文章(《CSS架构解决方案系列》)，本文就不做深入研究了。

下面简单的罗列一下，如何更好的组织样式的解决方案： OOCSS, SMACSS, BEM, ITCSS, ECSS, SUIT CSS, Atomic Design, Atomic。欢迎补充!

抉择 8：复用逻辑

接下来你要面对的是如何复用你的逻辑，编程世界的一句名言“不要重复自己”。默默的看着群众的选择图

React 最初是使用Mixins，但是使用 mixins会导致一些BUG与被认为是有害的(Mixins Considered Harmful)。

高阶组件(Heigher Order Components), 如果不了解可以阅读下列文章：

  • Facebook官方文档英文 Higher-Order Components
  • 中文阅读 深入理解 React 高阶组件

高级组件时现在最流行的方案，但还是需要了解 render props，它比高级组件跟容易阅读与创建。其实我还没有深入理解与实践 render props，无法给出建议，看你自己的选择。

我现在使用的是高级组件，未来也不排除会使用 render props，软件行业不不变的主题就是“变化”，说不定还会有更合理的方案呢?

抉择 9：目录结构

你是喜欢所有组件共用一个文件夹呢，如下

 
 
 
 
    
  
  
  
  
  1. src/
    2. 
  
  
  
  
  2.   |- App.js
    3. 
  
  
  
  
  3.   |- RewarmView.js
    4. 
  
  
  
  
  4.   |- RewarmSearchInput.js
    5. 
  
  
  
  
  5.   |- RewarmImage.js
    6. 
  
  
  
  
  6.   |- RewarmLoading.js
    7. 
  
  
  
  
  7.   |- RewarmError.js
    8. 
  
  
  
  
  8.   |- giphyLoadData.js 
    9.

还是每个组件有自己的文件夹，基本结构如下

 
 
 
 
    
  
  
  
  
  1. src/
    2. 
  
  
  
  
  2.   |- App.js
    3. 
  
  
  
  
  3.   |- RewarmSearch/
    4. 
  
  
  
  
  4.       |- index.js
    5. 
  
  
  
  
  5.       |- View.js
    6. 
  
  
  
  
  6.       |- SearchInput.js
    7. 
  
  
  
  
  7.       |- Image.js
    8. 
  
  
  
  
  8.       |- Loading.js
    9. 
  
  
  
  
  9.       |- Error.js
    10. 
  
  
  
  
  10.       |- loadData.js 
    11.

收起文件夹，看起来是不是很整洁

 
 
 
 
    
  
  
  
  
  1. src/
    2. 
  
  
  
  
  2.   |- App.js
    3. 
  
  
  
  
  3.   |- RewarmSearch/ 
    4.

每个组件在其单独的文件夹，更详细可阅读

  • Writing Scalable React Apps with the Component Folder Pattern
  • The 100% correct way to structure a React app (or why there’s no such thing

个人推荐的是每个组件拥有自己的文件夹，你呢?

说在最后

本人虽然有6年前端的开发经验，但文章难免会有遗漏，也可能与你的想法是对立的，欢迎大家提出建议或说出你不一样的观点。

参考文献

《 8 key React Component Decisions 》 (本链接需要翻墙)

网站栏目：React开发中面临的九个重要抉择
浏览路径：http://www.gawzjz.com/qtweb2/news24/25874.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App设计知识

行业网站建设

时嘉做网站　　 　成都装修公司　　 　鸿程源茂　　 　西信服务器托管　　 　内江做网站　　 　微信开发　　 　企业微信定制　　 　LED显示屏厂家　　 　成都logo设计公司　　 　成都圣月窗帘　　 　成都微信二次开发　　 　凯亚自动化控制　　 　发电机组维修保养　　 　成都网站制作　　 　邛崃做网站　　 　网络推广平台　　 　企业手机网站建设　　 　定制网站建设　　 　钢筋机械设备　　 　网站报价方案