寫一手漂亮的js(react篇)

哈哈，又是我，廢話不多說，直接看程式碼

個人原則

1. 既然react是元件化的，那麼相同的程式碼，我不會寫第二遍
2. 不在dom結構中夾雜太多js邏輯
3. 遵守上一篇《寫一手漂亮的js》的規則
4. '可讀性' 在我心裡永遠大於 '效能'（追求極致效能場景除外)

對生命週期函式排序

// bad
class Demo extends React.Component {
  render() {}

  componentDidMount() {}

  componentWillMount() {}
}

// good
class Demo extends React.Component {
  componentWillMount() {}

  componentDidMount() {}

  render() {}
}

傳遞多個props時注意換行

// bad
<Demo className='a' value={a} onClick={() => {}} />

// goood
<Demo
  className='a'
  value={a}
  onClick={() => {}}
/>

利用物件展開符傳遞props

const someProps = {
  a: 1,
  b: 2,
  c: 3
}

// bad
<Demo
  a={someProps.a}
  b={someProps.b}
  c={someProps.c}
/>

// goood
<Demo {...someProps} />

// 當有些屬性不需要傳遞的時候
const {
  a,
  ...otherProps
} = someProps

<Demo {...otherProps} />

利用箭頭函式繫結this

// bad
class Demo extends React.Component {
  handleClick() {

  }

  render() {
    <Button
      onClick={this.handleClick.bind(this)}
    />
  }
}

// good
class Demo extends React.Component {
  handleClick = () => {

  }

  render() {
    <Button
      onClick={this.handleClick}
    />
  }
}

提前解構state，props

// bad
class Demo extends React.Component {
  handleClick = () => {
    this.props.add(this.state.a + this.state.b)
    this.props.respond()
  }
}

// good
class Demo extends React.Component {
  handleClick = () => {
    const { a, b } = this.state
    const { respond, add } = this.props

    add(a + b)
    respond()
  }
}

map時不要使用index當做key，用item的id

index沒辦法利用key來避免不必要的渲染

// bad
class Demo extends React.Component {
  render() {
    return arr.map((item, i) => (
      <span key={i}>{item.name}</span>
    ))
  }
}

// good
class Demo extends React.Component {
  render() {
    return arr.map(item => (
      <span key={item.id}>{item.name}</span>
    ))
  }
}

不要將大段的內聯樣式寫在元件上

影響閱讀

// bad
class Demo extends React.Component {
  render() {
    return (
      <div style={{
        width: '100px',
        height: '100px',
        textAlign: 'center',
        lineHeight: '100px'
      }}>11</div>
    )
  }
}

// good
const styles = {
  container: {
    width: '100px',
    height: '100px',
    textAlign: 'center',
    lineHeight: '100px'
  }
}

class Demo extends React.Component {
  render() {
    return (
      <div style={styles.container}>11</div>
    )
  }
}

給props加上型別檢查

一定程度上能及時發現問題，當然更好的選擇是flow、ts

// bad
class Demo extends React.Component {
  // nothing
}

// good
import PropTypes from 'prop-types';

class Demo extends React.Component {
  static propTypes = {
    className: PropTypes.string,
    style: PropTypes.object,
    url: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.array,
    ]),
    onClick: PropTypes.func,
  }
}

儘量不要在渲染元件時傳遞匿名函式

1. 首先它會影響閱讀
2. 每次渲染會生成新的匿名函式，對子元件來說就是新的props，就會觸發再一次更新
3. 當然，當函式只有一行的時候，我覺得也是可以這麼做的，從程式碼簡潔性考慮

// bad
class Demo extends React.Component {
  render() {
    return (
      <Hello onClick={() => {
        a++
        this.props.add()
      }}>11</Hello>
    )
  }
}

// good
class Demo extends React.Component {
  handleClick = () => {
    a++
    this.props.add()
  }

  render() {
    return (
      <Hello onClick={this.handleClick}>11</Hello>
    )
  }
}

補充

大牛快來評論區批評、指正、補充