React 开发规范(上)

3,664 阅读4分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金

1、基础规则

  • 一个文件声明一个组件: 尽管可以在一个文件中声明多个 React 组件,但是最好不要这样做;推荐一个文件声明一个 React 组件,并只导出一个组件;
  • 使用 JSX 表达式: 不要使用 React.createElement 的写法;
  • 函数组件和 class 类组件的使用场景: 如果定义的组件不需要 props 和 state ,建议将组件定义成函数组件,否则定义成 class 类组件。

2、组件声明

(1)组件名称和定义该组件的文件名称建议要保持一致;

推荐:

import Footer from './Footer';

不推荐:

import Footer from './Footer/index';

(2)不要使用 displayName 属性来定义组件的名称,应该在 class 或者 function 关键字后面直接声明组件的名称。

推荐:

export default class MyComponent extends React.Component {}

不推荐:

export default React.Component({ displayName: 'MyComponent'});

3、React 中的命名

  • 组件名称: 推荐使用大驼峰命名;
  • 属性名称: React DOM 使用小驼峰命令来定义属性的名称,而不使用 HTML 属性名称的命名约定;
  • style 样式属性: 采用小驼峰命名属性的 JavaScript 对象; 推荐:
// 组件名称:MyComponent
// 属性名称:onClick
// 样式属性:backgroundColor

4、JSX 写法注意

4.1、标签

(1)当标签没有子元素的时候,始终使用自闭合的标签 。

推荐:

// Good:<Component />

不推荐:

<Component></Component>

(2)如果标签有多行属性,关闭标签要另起一行 。

推荐:

<Component
  bar="bar"
  baz="baz" 
/>

不推荐:

<Component
  bar="bar"
  baz="baz" />

(3)在自闭标签之前留一个空格。

推荐:

<Foo />

不推荐:

<Foo/> 
<Foo     />
<Foo
 />

(4)当组件跨行时,要用括号包裹 JSX 标签。

推荐:

 render() {
    return (
      <MyComponent className="long body" foo="bar">
        <MyChild />
      </MyComponent>
    );
  }

不推荐:

render() {
   return <MyComponent className="long body" foo="bar">
         <MyChild />
       </MyComponent>;
}

4.2、对齐

JSX 语法使用下列的对齐方式 :

// 推荐
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>
// 如果组件的属性可以放在一行(一个属性时)就保持在当前一行中
<Foo bar="bar" />
 
// 多行属性采用缩进
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
> 
  <Quux />
</Foo>
 
// 不推荐
<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />

4.3、引号

JSX 的属性都采用双引号,其他的 JS 都使用单引号 ,因为 JSX 属性 不能包含转义的引号, 所以当输入 "don't" 这类的缩写的时候用双引号会更方便。

推荐:

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

不推荐:

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

5、样式写法

React 中样式可以使用 style 行内样式,也可以使用 className 属性来引用外部 CSS 样式表中定义的 CSS 类,我们推荐使用 className 来定义样式。并且推荐使用 LESS、SCSS 来替换传统的 CSS 写法,具体 SCSS 提高效率的写法可以参照文章。

6、defaultProps 使用静态属性定义

defaultProps 推荐使用静态属性定义,不推荐在 class 外进行定义。

推荐:

class Example extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }
 
  render() {
   // ...
  }
}

不推荐:

class Example extends React.Component {
  render() {
    // ...
  }
}
 
Example.propTypes = {
  name: PropTypes.string
};

7、key 属性设置

key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。 当元素没有确定 id 的时候,万不得已你可以使用元素索引 index 作为 key,但是要主要如果列表项目的顺序可能会变化,如果使用索引来用作 key 值,因为这样做会导致性能变差,还可能引起组件状态的问题。

推荐:

{todos.map(todo => (
  <Todo
    {...todo}
    key={todo.id}
  />
))}

不推荐:

{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

8、为组件绑定事件处理器

React 为组件绑定事件处理器提供 4 种方法,有 public class fields 语法、构造函数中进行绑定、在回调中使用箭头函数、使用 Function.prototype.bind 进行绑定,我们推荐使用 public class fields 语法,在不满足需求情况下使用箭头函数的写法(传递参数给事件处理器)。

推荐:

handleClick = () => {
    console.log('this is:', this);
 }
 <button onClick={this.handleClick}> Click me </button>

不推荐:

 constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
    console.log('this is:', this);
 }
 <button onClick={this.handleClick}> Click me </button>

未完请主页看<React 开发规范(下)>

点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。

11.png

往期精彩推荐

Vue 开发规范

移动端横竖屏适配与刘海适配

移动端常见问题汇总

前端常用的几种加密方法

canvas 爬坑路【方法篇】

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见:个人主页