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

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

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

在 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.    constructor(props) { 
  3.      super(props); 
  4.      this.state = {message: 'Hello!'}; 
  5.    } 
  6.    render() { 
  7.      return ( 
  8.        <p> 
  9.          Say: {this.state.message} 
  10.        </p> 
  11.      ); 
  12.    } 
  13.  }  

抉择 4:类 VS 纯函数

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

无状态纯函数简单例子:

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

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

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

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

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

抉择 5:State

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

 

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

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

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

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

抉择 6:绑定(Binding)

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

 

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

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

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

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

抉择 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), 如果不了解可以阅读下列文章:

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

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

抉择 9:目录结构

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

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

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

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

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

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

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

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

说在最后

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

参考文献

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

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2020-10-05 21:49:35

蜜罐恶意软件黑客

2009-07-03 05:32:45

九城陈晓薇

2022-08-24 08:01:36

云计算安全隐私

2021-11-30 17:37:14

ReactRedux

2017-01-15 10:32:49

大数据技术信息

2017-01-12 09:11:07

2023-11-06 13:17:53

ServiceAndroid

2017-12-18 13:07:44

2020-06-22 07:23:57

Kubernetes容器开发

2023-04-06 09:31:00

IT计划项目业务

2011-12-28 17:08:11

移动Web开发开发工具

2023-08-30 10:41:55

数字化转型战商业计划

2009-05-11 09:49:17

杀软windows7免费

2023-11-06 08:55:31

2023-09-02 20:55:04

微服务架构

2023-09-18 15:54:56

Python机器学习

2022-07-24 00:16:12

云计算FinOps云软件开发

2011-12-26 20:25:58

2018-01-12 14:57:06

React Nativ开发错误

2022-05-10 10:35:46

物联网智慧城市
点赞
收藏

51CTO技术栈公众号