专栏首页前端社区基于 React 官方建议的编程风格

基于 React 官方建议的编程风格

语法规则

方法顺序要遵循生命周期放在前面, render( ) 方法放在最后

react 组件内部,方法的顺序如下:

  • 生命周期方法,按照时间先后顺序依次为:
getDefaultProps, 

getInitialState, 

componentWillMount, 

componentDidMount,

componentWillReceiveProps, 

shouldComponentUpdate, 

componentWillUpdate, 

componentDidUpdate, 

componentWillUnmount 
  • 其他的方法
  • render 方法

事件处理函数的命名

采用 handle + EventName 的方式来命名,像下面这样:

<Component onClick={this.handleClick} onLaunchMissiles={this.handleLaunchMissiles} />

事件函数作为属性时的命名

为了跟 react 的事件命名保持一致: onClick, onDrag, onChange, 等等,采用下面的格式:

<Component onLaunchMissiles={this.handleLaunchMissiles}/>

元素跟 return 放在同一行

为了节约空间,采用下面的写法:

return <div>
    ...
</div>;

而不是:

return (      // "div" 与 "return" 不在同一行
    <div>
        ...
    </div>
);

对 HTML 的属性进行对齐和排序

如果属性不是太多,那就放在同一行,否则就把每一个属性都单独写一行:

<div className="highlight" key="highlight-div">
<div
    className="highlight"
    key="highlight-div"
>
<Image
    className="highlight"
    key="highlight-div"
>>

而不是:

<div className="highlight"      // 属性没有在单独行
     key="highlight-div"
>
 div                            // 闭合便签不在单独的行
    className="highlight"
    key="highlight-div">
 div                            // 属性没有排序(一般重要的属性写在前面)
    key="highlight-div"
    className="highlight"
>

一个文件只导出一个 react 类

每一个 .jsx 应该只能导出单独的 react 类。这样有利于测试,因为这些测试框架要求一个文件导出的就是一个函数。

  • 注意:你依然可以在一个文件中定义多个类,只要保证导出的只有一个即可。*

语言特色

确保 “呈现型” 的组件功能单一

react 组件 分为 “逻辑型组件” 和“呈现型组件” 是很有必要的。前者包含的是业务逻辑,里面不应该包含 HTML;后者一般是可复用的,可以包含 HTML。前者可以拥有自己的内部的 state,而后者不应该拥有。

多用 props

如果能用 props 就不要用 state,这一定程度上可以减少应用程序的复杂度。 一般的模式是:创建一个 “无状态” 的组件(呈现型组件),只负责呈现数据,把包含 state 的 “逻辑型组件” 做为这些组件的父级组件,然后把它内部的 state 作为 props传递给下面的呈现型组件,这些逻辑型组件包含了所有的交互逻辑。

使用 propTypes

react 组件 都应该完成 propTypes 验证。每一个 this.props 的属性都应该有一个与之对应的 propTypes。 避免使用这些没有描述意义的 prop-types:

React.PropTypes.any
React.PropTypes.array
React.PropTypes.object

最好使用:

React.PropTypes.arrayOf
React.PropTypes.objectOf
React.PropTypes.instanceOf
React.PropTypes.shape

永远不要在 DOM 中保存 state

不要通过 data- 属性或 class 类。所有的信息应该都存储在 javascript 中,或者在 React 组件中,或者在 React store 中,如果使用了类似 Redux 这样的框架的话。

React 库和组件

不要使用 backbone 模型

直接使用 flux action,或者 $.ajax 来代替。

尽量少用 jQuery 就少用

永远也不要用 jquery 去操作 DOM。 尝试避免 jquery 插件的使用。有必要的话,把 jquery 插件包装在 React 组件中。 你可以使用 $.ajax(但是不要用其他方法,像 $.post) 来进行网络通信。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Git 撤销更改

    正常提交过程有三个步骤四个区和五种状态,下面就分别从这些入手,来看下 Git 撤销更改的方法。

    用户1065635
  • 管理本地 Git 仓库

    一般我们都是随便创建一个目录,比如 ~/code,在找一个同名的目录来 clone。

    用户1065635
  • Javascript闭包

    越来越觉得国内没有教书育人的氛围,为了弄懂JS的闭包,我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解释,当我看到stackoverflow上这一篇...

    用户1065635
  • Angular ElementRef 简介

    Angular 的口号是 - “一套框架,多种平台。同时适用手机与桌面 (One framework.Mobile & desktop.)”,即 Angular...

    semlinker
  • vue2.5入门(推荐,差代码) 原

    晓歌
  • 常用xpath选择器和css选择器总结

    我们知道选择包含某一特定属性的节点,可以使用例如//tbody/tr[@class]来选择。那么不含某属性的节点如何用xpath取得呢?

    用户1214487
  • ARMv7 Processor modes

    在ARMv7中定义了不同的特权级别。分别是PL0, PL1, PL2。而每种特权级别依赖处理器模式Processor modes

    DragonKingZhu
  • 爬虫课程(八)|豆瓣:十分钟学会使用XPath选择器提取需要的元素值

    黄小怪
  • 前端拾零01—checkbox&radio&select总结 【原创】

    前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

    CS逍遥剑仙
  • 80% 人不知道的 Redis 分布式锁的正确实现方式(Java 版)

    分布式锁一般有三种实现方式:1. 数据库乐观锁;2. 基于Redis的分布式锁;3. 基于ZooKeeper的分布式锁。

    良月柒

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动