资讯专栏INFORMATION COLUMN

精益 React 学习指南 (Lean React)- 4.1 react 代码规范

zhangqh / 1034人阅读

书籍完整目录

4.1 react 代码规范

关于

基础规范

组件结构

命名规范

jsx 书写规范

eslint-plugin-react

关于

在代码的设计上,每个团队可能都有一定的代码规范和模式,好的代码规范能够提高代码的可读性便于协作沟通,好的模式能够上层设计上避免不必要的 bug 出现。本节会参考社区提供一些 React 的规范和优秀的设计模式。

基础规范

统一全部采用 Es6

组件文件名称采用大驼峰命名

组件结构

总体规则: stateless(Function) 优先于 Es6 Class 优先于 React.createClass;
书写规则: 规范组件内部方法的定义顺序

Es6 class 定义规范:

static 方法

constructor

getChildContext

componentWillMount

componentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

clickHandlers + eventHandlersonClickSubmit()onChangeDescription()

getter methods for rendergetSelectReason()getFooterContent()

render methodsrenderNavigation()renderProfilePicture()

render

以 Es6 Class 定义的组件为例;

const defaultProps = {
  name: "Guest"
};
const propTypes = {
  name: React.PropTypes.string
};
class Person extends React.Component {

  // 构造函数
  constructor (props) {
    super(props);
    // 定义 state
    this.state = { smiling: false };
    // 定义 eventHandler
    this.handleClick = this.handleClick.bind(this);
  }

  // 生命周期方法
  componentWillMount () {},
  componentDidMount () {},
  componentWillUnmount () {},
  

  // getters and setters
  get attr() {}

  // handlers
  handleClick() {},

  // render
  renderChild() {},
  render () {},

}

/**
 * 类变量定义
 */
Person.defaultProps = defaultProps;

/**
 * 统一都要定义 propTypes
 * @type {Object}
 */
Person.propTypes = propTypes;
命名规范

组件名称:大驼峰

属性名称:小驼峰

事件处理函数:handleSomething

自定义事件属性名称:onSomething={this.handleSomething}

key: 不能使用数组 index ,构造或使用唯一的 id

组件方法名称:避免使用下划线开头的命名

jsx 书写规范

自闭合

// bad


// good

属性对齐

// bad


// good


// if props fit in one line then keep it on the same line

返回

// bad
render() {
  return 
           
         ;
}

// good
render() {
  return (
    
      
    
  );
}

// good, when single line
render() {
  const body = 
hello
; return {body}; }
eslint-plugin-react

规范可以使用 eslint-plugin-react 插件来强制实施,规则和配置可查看
https://github.com/yannickcr/eslint-plugin-react

更多 react 代码规范可参考 https://github.com/airbnb/javascript/tree/master/react

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79800.html

相关文章

  • 精益 React 学习指南Lean React)- 1.2 JSX 语法

    摘要:需要提醒读者的是,的很多例子都是通过来写的,但这并不是语法,后面我们会有单独的一小节讲解的基本语法,不过目前为止我们先将跟多精力放在上。 书籍完整目录 1.2 JSX 语法 showImg(https://segmentfault.com/img/bVvKLR); 官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html ...

    moven_j 评论0 收藏0
  • 精益 React 学习指南Lean React)- 1.1 React 介绍

    摘要:单向数据流应用的核心设计模式,数据流向自顶向下我也是性子急的人,按照技术界的惯例,在学习一个技术前,首先得说一句。然而的单向数据流的设计让前端定位变得简单,页面的和数据的对应是唯一的我们可以通过定位数据变化就可以定位页面展现问题。 书籍完整目录 1.1 React 介绍 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

    lsxiao 评论0 收藏0
  • 精益 React 学习指南Lean React)- 1.3 React 组件

    摘要:无状态组件除了可以通过来创建组件以外,组件也可以通过一个普通的函数定义,函数的返回值为组件渲染的结果。这就是为什么要有属性,属性能够帮助定位与数组元素的关系,在重渲染的时候能够实现渲染优化。 书籍完整目录 1.3 React 组件 showImg(https://segmentfault.com/img/bVvLOW); 1.3.1 React 组件介绍 在 React 中组件是第一元...

    cyrils 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<