寫一手漂亮的js(react篇)

ad6623 發布于2019-08-22 13:53 / 1479人閱讀

摘要：哈哈，又是我，廢話不多說，直接看代碼個人原則既然是組件化的，那么相同的代碼，我不會寫第二遍不在結構中夾雜太多邏輯遵守上一篇寫一手漂亮的的規則可讀性在我心里永遠大于性能追求極致性能場景除外對生命周期函數排序傳遞多個時注意換行利用對象展開符傳遞

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

個人原則

既然react是組件化的，那么相同的代碼，我不會寫第二遍

不在dom結構中夾雜太多js邏輯

遵守上一篇《寫一手漂亮的js》的規則

"可讀性" 在我心里永遠大于 "性能"（追求極致性能場景除外)

對生命周期函數排序

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

  componentDidMount() {}

  componentWillMount() {}
}

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

  componentDidMount() {}

  render() {}
}

傳遞多個props時注意換行

// bad
 {}} />

// goood
 {}}
/>

利用對象展開符傳遞props

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

// bad


// goood


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

利用箭頭函數綁定this

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

  }

  render() {

提前解構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) => (
      {item.name}
    ))
  }
}

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

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

影響閱讀

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

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

class Demo extends React.Component {
  render() {
    return (
      11
    )
  }
}

給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,
  }
}

盡量不要在渲染組件時傳遞匿名函數

首先它會影響閱讀

每次渲染會生成新的匿名函數，對子組件來說就是新的props，就會觸發再一次更新

當然，當函數只有一行的時候，我覺得也是可以這么做的，從代碼簡潔性考慮

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

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

  render() {
    return (
      11
    )
  }
}

補充

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

GPU云服務器云服務器漂亮的js表格 js漂亮的效果漂亮的導航菜單js 用js寫自己的網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92578.html

寫一手漂亮的js

摘要：介紹看了很多，卻沒有人教我怎么去寫一手漂亮的代碼，今天我來講講我自己寫的經驗不要在代碼中留大段注釋掉的代碼留給去管理，不然你要干嘛適當地換行適當的添加注釋，但不要瘋狂的添加注釋對一段代碼或者一行特別需要注意的代碼注釋不要瘋狂的注釋，太啰嗦，介紹看了很多best practice，卻沒有人教我怎么去寫一手漂亮的js代碼，今天我來講講我自己寫js的經驗不要在代碼中留大段注釋掉的代碼 ...

BetaRabbit 2019-08-21 17:52 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

kamushin233 2019-08-29 12:34 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

yy736044583 2019-08-20 16:31 評論0 收藏0