// 在用构造函数banding 

      this.handleClick = this.handleClick.bind(this); 

    } 

 

    handleClick() { 

      alert(this.state.message); 

    } 

 

    render() { 

      return ( 

        <button onClick={this.handleClick}> 

          Say hello 

        </button> 

      ); 

    } 

  }  

决定 7：样式(Styling)

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

根据群众的选择，似乎(因为上图群众的人数不详，样本不克不及足，只能说似乎) CSS-in-JS 正在吞噬 CSS-Modules 的份额。

根据单一职责原则，你的组件应当只有且只一个职责，内部的逻辑尽量设计扁平。如不雅逻辑复杂，那你要问本身组件是否还须要分化，应用纯函数会使你不时刻刻推敲组件的设计是否合理。

本人偏向逻辑，构造与样式分别，现阶段照样应用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：目次构造

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

src/ 
  |- App.js 
  |- RewarmView.js 
  |- RewarmSearchInput.js 
  |- RewarmImage.js 
  |- RewarmLoading.js 
  |- RewarmError.js 
  |- giphyLoadData.js  

照样每个组件有本身的文件夹，根本构造如下

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

src/ 
  |- App.js 
  |- RewarmSearch/  

小我推荐的是每个组件拥有本身的文件夹，你呢?

说袈溱最后

本人固然有6年前端的开辟经验，但文┞仿不免会有漏掉，也可能与你的设法主意是对立的，迎接大年夜家提出建议或说出你不一样的不雅点。

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

Cory House 的选择编写代码应用SASS，定名应用BEM已经足够，他也存眷 styled-components。

参考文献

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

【编辑推荐】

1. 束手无策？来看看字符编码的前世此生吧
2. 应用递归遍历并转换树形数据（以TypeScript为例）
3. 代码重构的那些坑和拭魅战经验
4. 大年夜不消try-catch实现的async/await语法来说说缺点处理
5. 开辟者一犯再犯的15个菜鸟缺点

【义务编辑：庞桂玉 TEL：（010）68476606】

　　推荐阅读

　　数据库的使用你可能忽略了这些

放弃uuid(guid)的应用数据库的治理是一个异常专业的工作，对数据库的调优、监控一般是由数据库工程师完成，然则开辟人员也经常与数据库打交道，即使是简单的增删改查也是有很多桥绫桥，这里，一路来聊聊>>>详细阅读

本文标题：React开发中面临的九个重要抉择

地址：http://www.17bianji.com/lsqh/38432.html

 1/2    1