React 简洁代码之道

[SunShinewyf]

最近在研究代码重构之路，发现自己的一些代码写得有点丑陋而且可读性不强，于是去学习了一些经验，整理如下

可读性强而且简洁的代码让人有阅读的欲望，也可以显示出代码的一种美感，同时便于后期的维护和扩展。如何让其他人看到你的代码不难受、易接受，是开发者的一种能力，也是一种修养~

变量

起有含义的变量名

通过对变量取有含义的名字，不仅可以免除注释带来的代码不美观的弊端，还能提高可读性。所谓顾名思义，就是这个道理。

//Bad
const yyyymmdstr = moment().format('YYYY/MM/DD');

//Good
const currentDate = moment().format('YYYY/MM/DD');

//遍历的情况
//Bad
tagList.forEach(i=>{
    doSomething(i);
})

//Good
tagList.forEach(tag=>{
   doSomething(tag);
})

对于常量使用全大写字符串命名

在代码中，我们常常需要使用一些常量（配置项），这些常量不宜直接出现在代码中，否则会难以知晓它的意思，也不便于之后的管理。最好是将这些常量使用全大写字符串命名，并将其抽取到一个配置项文件中，防止日后更改~

//Bad
setTimeout(blastOff, 86400000);

//Good 
//在 config.js 中配置 MILLISECONDS_IN_A_DAY = 86400000；
import { MILLISECONDS_IN_A_DAY } from 'config.js'
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

函数

使用默认参数而不是条件语句

对于一些有默然参数的函数，最好把参数的默认值直接写上，而不是在函数体里面写条件语句，如下：

//Bad
function queryUser(userId) {
  const userId = userId || '11111';
  // do something
}

//Good
function queryUser(userId = '11111') {
  // do something
}

将对象作为参数传递时使用解构

当需要给一个函数传递一个对象结构的参数时，可以使用 ES6 的解构语法，使用解构有如下好处：

• 需要使用该对象的哪些属性一目了然
• 有助于防止副作用
• 可以很容易获取函数所需的值

//Bad
function queryUser(userId, userName, age, sex) {
  // ...
}

//Good
function queryUser({userId, userName, age, sex}){
  // ...
}

queryUser({'11111', '恬竹', '18', 'woman'})

防止副作用

在给某个函数传递一个引用对象时，可能会给该引用对象带来一些副作用

//Bad
const addItemToCart = (cart, item) => {
  cart.push({ item, date: Date.now() });
};

//Good

const addItemToCart = (cart, item) => {
  return [...cart, { item, date: Date.now() }];
};

使用箭头函数

组件中的函数最好使用箭头函数，可以避免手动绑定 this 上下文

//Bad
export default class MyContainer extends Component {
  contructor (props) {
    super(props)
    this.state = {
      stateItemA: undefined,
      stateItemB: 'default string'
    }
    
    this.someMethod = this.someMethod.bind(this)
    this.anotherMethod = this.anotherMethod.bind(this)
  }
  
  someMethod () {
    // ...
  }
  
  anotherMethod () {
    // ...
  }
  
  render () {
    return (
      <SomeComponent />
    )
  }
}

//Good
export default class MyContainer extends Component {
  state = {
    stateItemA: undefined,
    stateItemB: 'default string'
  }
  
  someMethod = () => {
    // ...
  }
  
  anotherMethod = () => {
    // ...
  }
  
  render () {
    return (
      <SomeComponent />
    )
  }

组件

使用扩展运算符传递 props 给组件

在给组件传递 props 时，为每个 props 或者 state 进行单个声明显然和冗余，可以直接使用扩展运算符进行传递:

//Bad
class MyContainer extends Component {
  state = {
    itemA: 'A',
    itemB: 'B',
    itemC: 'C'
  }

  _onPress = () => {
    // ...
  }
  
  render () {
    return (
      <MyComponent
       itemA={this.state.itemA}
       itemB={this.state.itemB}
       itemC={this.state.itemC}
       onPress={this._onPress}
      />
    )
  }
}
//Good
class MyContainer extends Component {
  state = {
    itemA: 'A',
    itemB: 'B',
    itemC: 'C'
  }

  _onPress = () => {
    // ...
  }
  
  render () {
    return (
      <MyComponent
       {...this.state}
       onPress={this._onPress}
      />
    )
  }
}

持续更新中~