写一手漂亮的js(react篇)

ad6623 发布于2019-08-22 13:53 / 1493人阅读

摘要：哈哈，又是我，废话不多说，直接看代码个人原则既然是组件化的，那么相同的代码，我不会写第二遍不在结构中夹杂太多逻辑遵守上一篇写一手漂亮的的规则可读性在我心里永远大于性能追求极致性能场景除外对生命周期函数排序传递多个时注意换行利用对象展开符传递

哈哈，又是我，废话不多说，直接看代码

个人原则

既然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写自己的网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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