React代码开发规范

朱雀 2021-07-26 16:55 520阅读 0赞

### 前言 ###

一般在团队开发中每个人的代码习惯都不太一样，这样就会导致代码风格不一致，以致于维护和修改bug的时候看别人的代码成为一种痛苦...  
这种情况尤其在前端开发中尤为明显。因为关于前端的开发规范貌似也没有行业权威标准。这几天在网上看了下，基本上在开发中通过**eslint**进行约束，**airbnb**的标准貌似颇为推崇，今天稍微整理下，准备在日后开发中形成习惯。

### 基本规则 ###

1.  每个文件只包含一个React组件。**eslint: react/no-multi-comp**；（官方表示在无状态，或者Pure组件允许一个文件包含多个组件，但是我个人觉得一个文件只包含一个组件比较浅显易懂）
2.  始终使用JSX语法；
3.  不要始终**React.createElement**方法，除非初始化app的文件不是JSX格式;

### Class vs React.createClass vs stateless ###

1.  如果组件拥有内部的state或者refs时，更推荐使用**class extends Component**，除非有更好的理由使用mixin。**eslint:react/prefer-es6-class**

// bad
    const Listing = React.createClass({
      // ...
      render() {
        return <div>{this.state.hello}</div>;
      }
    });
    
    // good
    class Listing extends React.Component {
      // ...
      render() {
        return <div>{this.state.hello}</div>;
      }
    }

如果组件没有拥有内部的state或者refs，那么普通函数(不要使用箭头函数)比类的写法更好：

// bad
    class Listing extends React.Component {
      render() {
        return <div>{this.props.hello}</div>;
      }
    }
    
    // bad (因为箭头函数没有“name”属性)
    const Listing = ({ hello }) => (
      <div>{hello}</div>
    );
    
    // good
    function Listing({ hello }) {
      return <div>{hello}</div>;
    }

### 命名 ###

1.  拓展名：React组件使用.jsx扩展名；
2.  文件名：文件名使用帕斯卡命名：HomePage.jsx
3.  引用命名：React组件使用帕斯卡命名，引用实例采用驼峰式命名：**eslint: react/jsx-pascal-case**)(**个人不喜欢这样，引用命名还是按照帕斯卡命名**)

// bad
    import reservationCard from './ReservationCard';
    
    // good
    import ReservationCard from './ReservationCard';
    
    // bad
    const ReservationItem = <ReservationCard />;
    
    // good
    const reservationItem = <ReservationCard />;

### 声明 ###

不要使用`displayName`属性来命名组件，应该使用类的引用名称。

// bad
    export default React.createClass({
      displayName: 'ReservationCard',
      // stuff goes here
    });
    
    // good
    export default class ReservationCard extends React.Component {
    }

### 对齐 ###

为JSX语法使用下列的对齐方式:**eslint: react/jsx-closing-bracket-location**

// bad
    <Foo superLongParam="bar"
         anotherSuperLongParam="baz" />
    
    // good
    <Foo
      superLongParam="bar"
      anotherSuperLongParam="baz"
    />
    
    // 如果组件的属性可以放在一行就保持在当前一行中，（个人觉得如果只有一个属性就放在一行）
    <Foo bar="bar" />
    
    // 多行属性采用缩进
    <Foo
      superLongParam="bar"
      anotherSuperLongParam="baz"
    >
      <Quux />
    </Foo>

### 引号 ###

JSX的属性都采用双引号，其他的JS都使用单引号：**jsx-quotes**。  
为什么这样做？JSX 属性 不能包含转义的引号, 所以当输入"don't"这类的缩写的时候用双引号会更方便。

// bad
    <Foo bar='bar' />
    
    // good
    <Foo bar="bar" />
    
    // bad
    <Foo style={
       { left: "20px" }} />
    
    // good
    <Foo style={
       { left: '20px' }} />

### 空格 ###

始终在自闭和标签前添加一个空格。

// bad
    <Foo/>
    
    // very bad
    <Foo                 />
    
    // bad
    <Foo
     />
    
    // good
    <Foo />

### 属性 ###

1.  属性名称始终使用驼峰命名法。

// bad
    <Foo
      UserName="hello"
      phone_number={12345678}
    />
    
    // good
    <Foo
      userName="hello"
      phoneNumber={12345678}
    />

1.  当属性值等于true的时候，省略该属性的赋值。**eslint:react/jsx-boolean-value**

// bad
    <Foo
      hidden={true}
    />
    
    // good
    <Foo
      hidden
    />

### 括号 ###

使用括号包裹多行JSX标签，**react/wrap-multilines**

// bad
    render() {
      return <MyComponent className="long body" foo="bar">
               <MyChild />
             </MyComponent>;
    }
    
    // good
    render() {
      return (
        <MyComponent className="long body" foo="bar">
          <MyChild />
        </MyComponent>
      );
    }
    
    // good, when single line
    render() {
      const body = <div>hello</div>;
      return <MyComponent>{body}</MyComponent>;
    }

### 标签 ###

1.  当标签没有子元素的时候，始终使用自闭合的标签：**eslint: react/self-closing-comp**

// bad
    <Foo className="stuff"></Foo>
    
    // good
    <Foo className="stuff" />

1.  如果控件有多行属性，关闭标签要另起一行。 **eslint: react/jsx-closing-bracket-location**

// bad
    <Foo
      bar="bar"
      baz="baz" />
    
    // good
    <Foo
      bar="bar"
      baz="baz"
    />

### 方法 ###

在 render 方法中事件的回调函数，应该在构造函数中进行bind绑定。 **eslint: react/jsx-no-bind**。  
为什么这样做? 在 render 方法中的 bind 调用每次调用 render 的时候都会创建一个全新的函数。

// bad
    class extends React.Component {
      onClickDiv() {
        // do stuff
      }
    
      render() {
        return <div onClick={this.onClickDiv.bind(this)} />
      }
    }
    
    // good
    class extends React.Component {
      constructor(props) {
        super(props);
    
        this.onClickDiv = this.onClickDiv.bind(this);
      }
    
      onClickDiv() {
        // do stuff
      }
    
      render() {
        return <div onClick={this.onClickDiv} />
      }
    }

1.  React 组件的内部方法命名不要使用下划线前缀。

// bad
    React.createClass({
      _onClickSubmit() {
        // do stuff
      },
    
      // other stuff
    });
    
    // good
    class extends React.Component {
      onClickSubmit() {
        // do stuff
      }
    
      // other stuff
    }

### 排序 ###

class extends React.Component的顺序：

1.  static静态方法
2.  constructor
3.  getChildContext
4.  componentWillMount
5.  componentDidMount
6.  componentWillReceiveProps
7.  shouldComponentUpdate
8.  componentWillUpdate
9.  componentDidUpdate
10. componentWillUnmount
11. 点击回调或者事件回调 比如 onClickSubmit() 或者 onChangeDescription()
12. render函数中的 getter 方法 比如 getSelectReason() 或者 getFooterContent()

可选的 render 方法 比如 renderNavigation() 或者 renderProfilePicture()

1.  render

怎么定义propTypes, defaultProps, contextTypes等

import React, { PropTypes } from 'react';
    
    const propTypes = {
      id: PropTypes.number.isRequired,
      url: PropTypes.string.isRequired,
      text: PropTypes.string,
    };
    
    const defaultProps = {
      text: 'Hello World',
    };
    
    class Link extends React.Component {
      static methodsAreOk() {
        return true;
      }
    
      render() {
        return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
      }
    }
    
    Link.propTypes = propTypes;
    Link.defaultProps = defaultProps;
    
    export default Link;

关于这个开发规范差不多就这样吧，eslint的配置个人在研究下，下次再放出来