寫一手漂亮的js(react篇)

ad6623 發(fā)布于2019-08-22 13:53 / 1532人閱讀

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

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

個(gè)人原則

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

不在dom結(jié)構(gòu)中夾雜太多js邏輯

遵守上一篇《寫一手漂亮的js》的規(guī)則

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

對生命周期函數(shù)排序

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

  componentDidMount() {}

  componentWillMount() {}
}

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

  componentDidMount() {}

  render() {}
}

傳遞多個(gè)props時(shí)注意換行

// bad
 {}} />

// goood
 {}}
/>

利用對象展開符傳遞props

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

// bad


// goood


// 當(dāng)有些屬性不需要傳遞的時(shí)候
const {
  a,
  ...otherProps
} = someProps

利用箭頭函數(shù)綁定this

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

  }

  render() {

提前解構(gòu)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時(shí)不要使用index當(dāng)做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}
    ))
  }
}

不要將大段的內(nèi)聯(lián)樣式寫在組件上

影響閱讀

// 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加上類型檢查

一定程度上能及時(shí)發(fā)現(xiàn)問題，當(dāng)然更好的選擇是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,
  }
}

盡量不要在渲染組件時(shí)傳遞匿名函數(shù)

首先它會(huì)影響閱讀

每次渲染會(huì)生成新的匿名函數(shù)，對子組件來說就是新的props，就會(huì)觸發(fā)再一次更新

當(dāng)然，當(dāng)函數(shù)只有一行的時(shí)候，我覺得也是可以這么做的，從代碼簡潔性考慮

// 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
    )
  }
}

補(bǔ)充

大?？靵碓u論區(qū)批評、指正、補(bǔ)充

GPU云服務(wù)器云服務(wù)器漂亮的js表格 js漂亮的效果漂亮的導(dǎo)航菜單js 用js寫自己的網(wǎng)站

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/92578.html

發(fā)表評論

登陸后可評論

0條評論

ad6623

男|高級講師

我要關(guān)注我要私信

TA的文章

RAKsmart：SSL證書上線，鉅惠大放價(jià)，SSL證書免費(fèi)使用3個(gè)月

閱讀 1458·2021-09-24 10:26
給準(zhǔn)備著手寫博客的小白的一些實(shí)用建議

閱讀 3751·2021-09-06 15:02
解決“有邊框的子元素寬度設(shè)定絕對值后，縮放瀏覽器會(huì)錯(cuò)位”的兩種方法

閱讀 711·2019-08-30 14:18
emberjs引百度地圖問題

閱讀 638·2019-08-30 12:44
前端優(yōu)化

閱讀 3169·2019-08-30 10:48
今天，你的瀏覽器 “滾動(dòng)” 了嗎？

閱讀 2007·2019-08-29 13:09
手把手教你打造一個(gè)純CSS圖標(biāo)庫

閱讀 2059·2019-08-29 11:30
javascript事件基礎(chǔ)知識

閱讀 2371·2019-08-26 13:36

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

寫一手漂亮的js(react篇)

相關(guān)文章