【分享】关于React组件规范化的一些建议

[minooo]

一个良好的代码规范，不仅能提升web性能，提高团队协作，还便于后期维护，拓展。
“代码即文档”是我们对规范的一个愿景。下面就基于ES6的React项目配置，谈几点对React组件规范的几点建议。

我们的组件分为两大类，UI组件和container组件。

UI组件

UI组件是构成前端界面的基础单元，它们不涉及业务逻辑，无生命周期函数，只负责单纯的渲染，所有数据都通过 props 传入。

一， 咱们的UI组件大致分为两种情况，无状态和有状态

• 如果是无状态组件，则使用纯函数，我们大部分的UI组件都是这种纯函数。

import React from 'react'

export default ({ hello }) => (
  <div>{hello}</div>
);

• 如果是有状态组件(这里的状态，只是负责UI自身的状态），则使用 React 的 PureComponent

import React, {PureComponent} from 'react' 

export default class index extends PureComponent {
  state = {
    focus: 0
  };
  
  render(){ 
    const {focus} = this.state;
    ...
  }
}

然后在components文件里的 index.js 中如此导出我们的默认模块，类似于这样

export { default as Swiper } from './Swiper'
export { default as FastNav } from './FastNav'

二， 一般在有状态组件中可能需要定义一些方法，这些方法使用箭头函数，以此避免render中的this绑定带来的性能损耗。

// bad
export default class Listing extends PureComponent {
  //...
  onClick () {
    ...
  };
  render(){ 
    return(
      <div onClick={this.onClick.bind(this)}>...</div>
    )
  }
}

// good
export default class Listing extends PureComponent {
  //...
  onClick = () => {
    ...
  };
  render(){ 
    return(
      <div onClick={this.onClick}>...</div>
    )
  }
}

三， 如果闭合标签内无子节点，则写为单标签

// bad
<i className="i-left"></i>

// good
<i className="i-left" />

四， 为了让便于阅读，请给代码合理的间隔，换行，让我们的代码像诗一样干净利索，一目了然。

// bad
const Course = ({address, tel, onClick}) =>
 <div className="bg-white pad2 overflow-h">
      <a href="javascript:;" className="ui-border-r inblock pr10" onClick={onClick}>
      <i className={"i-zuobiao32 main-color font-size-16 fl mr5 "+styles.icon}></i>
      <span className={"text-overflow-1 " +styles.address}>{address}</span>
      </a>
      <a href={"tel: "+tel}><i className={"i-dianhua32 main-color font-size-16 fr "+styles.icon}></i></a
</div>;

// good
const Course = ({address, tel, onClick}) =>
  <div className="bg-white pad2 overflow-h">
    <a
      href="javascript:;"
      className="ui-border-r inblock pr10"
      onClick={onClick}
    >
      <i className={`i-zuobiao32 main-color font-size-16 fl mr5 ${styles.icon}`} />
      <span className={"text-overflow-1 " + styles.address}>{address}</span>
    </a>

    <a href={"tel: " + tel}>
      <i className={"i-dianhua32 main-color font-size-16 fr " + styles.icon} />
    </a>
  </div>;

五，尽量避免使用数组的索引作为key的属性值，推荐使用指定的ID，原因？
ps: 关于这点，个人的建议是，如果你的数组只是用来展示的，此时用index作为key也无妨；如果你的数组渲染出来的组件涉及到比如增删改查这样的操作，那就必须使用id了，以此来避免数组变化引起index的混乱。

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

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

六，使用 ref 回调函数，官方ref

// bad
<Foo
  ref="myRef"
/>

// good
<Foo
  ref={(ref) => { this.myRef = ref; }}
/>

七，使用箭头函数锁定局部变量

{props.items.map((item, index) =>
  <Item
    key={item.key}
    // good
    onClick={() => this.doSomethingWith(item.name, index)}
   
    // bad
    onClick={this.doSomething.bind(null, item.name, index)}
  />
)}

[xutaogit]

项目3里单身狗代码图好评，祝早日脱单^_^