资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/写一手漂亮的js(react篇)

写一手漂亮的js(react篇)

ad6623 / 1546人阅读

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

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

个人原则

既然react是组件化的，那么相同的代码，我不会写第二遍

不在dom结构中夹杂太多js逻辑

遵守上一篇《写一手漂亮的js》的规则

"可读性" 在我心里永远大于 "性能"（追求极致性能场景除外)

对生命周期函数排序 
</>复制代码 
  1. // bad
  2. class Demo extends React.Component {
  3.   render() {}
  4.   componentDidMount() {}
  5.   componentWillMount() {}
  6. }
  7. // good
  8. class Demo extends React.Component {
  9.   componentWillMount() {}
  10.   componentDidMount() {}
  11.   render() {}
  12. }
传递多个props时注意换行 
</>复制代码 
  1. // bad
  2.  {}} />
  3. // goood
  4.  {}}
  5. />
利用对象展开符传递props 
</>复制代码 
  1. const someProps = {
  2.   a: 1,
  3.   b: 2,
  4.   c: 3
  5. }
  6. // bad
  8. // goood
  10. // 当有些属性不需要传递的时候
  11. const {
  12.   a,
  13.   ...otherProps
  14. } = someProps
利用箭头函数绑定this 
</>复制代码 
  1. // bad
  2. class Demo extends React.Component {
  3.   handleClick() {
  4.   }
  5.   render() {
  6.     
  7.   }
  8. }
  9. // good
  10. class Demo extends React.Component {
  11.   handleClick = () => {
  12.   }
  13.   render() {
  14.     
  15.   }
  16. }
提前解构state，props 
</>复制代码 
  1. // bad
  2. class Demo extends React.Component {
  3.   handleClick = () => {
  4.     this.props.add(this.state.a + this.state.b)
  5.     this.props.respond()
  6.   }
  7. }
  8. // good
  9. class Demo extends React.Component {
  10.   handleClick = () => {
  11.     const { a, b } = this.state
  12.     const { respond, add } = this.props
  13.     add(a + b)
  14.     respond()
  15.   }
  16. }
map时不要使用index当做key，用item的id

index没办法利用key来避免不必要的渲染

</>复制代码 
  1. // bad
  2. class Demo extends React.Component {
  3.   render() {
  4.     return arr.map((item, i) => (
  5.       {item.name}
  6.     ))
  7.   }
  8. }
  9. // good
  10. class Demo extends React.Component {
  11.   render() {
  12.     return arr.map(item => (
  13.       {item.name}
  14.     ))
  15.   }
  16. }
不要将大段的内联样式写在组件上

影响阅读

</>复制代码 
  1. // bad
  2. class Demo extends React.Component {
  3.   render() {
  4.     return (
  5.       
    11
  6.     )
  7.   }
  8. }
  9. // good
  10. const styles = {
  11.   container: {
  12.     width: "100px",
  13.     height: "100px",
  14.     textAlign: "center",
  15.     lineHeight: "100px"
  16.   }
  17. }
  18. class Demo extends React.Component {
  19.   render() {
  20.     return (
  21.       
    11
  22.     )
  23.   }
  24. }
给props加上类型检查

一定程度上能及时发现问题，当然更好的选择是flow、ts

</>复制代码 
  1. // bad
  2. class Demo extends React.Component {
  3.   // nothing
  4. }
  5. // good
  6. import PropTypes from "prop-types";
  7. class Demo extends React.Component {
  8.   static propTypes = {
  9.     className: PropTypes.string,
  10.     style: PropTypes.object,
  11.     url: PropTypes.oneOfType([
  12.       PropTypes.string,
  13.       PropTypes.array,
  14.     ]),
  15.     onClick: PropTypes.func,
  16.   }
  17. }
尽量不要在渲染组件时传递匿名函数

首先它会影响阅读

每次渲染会生成新的匿名函数，对子组件来说就是新的props，就会触发再一次更新

当然，当函数只有一行的时候，我觉得也是可以这么做的，从代码简洁性考虑

</>复制代码 
  1. // bad
  2. class Demo extends React.Component {
  3.   render() {
  4.     return (
  5.        {
  6.         a++
  7.         this.props.add()
  8.       }}>11
  9.     )
  10.   }
  11. }
  12. // good
  13. class Demo extends React.Component {
  14.   handleClick = () => {
  15.     a++
  16.     this.props.add()
  17.   }
  18.   render() {
  19.     return (
  20.       11
  21.     )
  22.   }
  23. }
补充

大牛快来评论区批评、指正、补充

云服务器 GPU云服务器 漂亮的js表格 js漂亮的效果 漂亮的导航菜单js 用js写自己的网站

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

转载请注明本文地址：https://www.ucloud.cn/yun/92578.html

相关文章

  • 写一手漂亮的js

    摘要：介绍看了很多，却没有人教我怎么去写一手漂亮的代码，今天我来讲讲我自己写的经验不要在代码中留大段注释掉的代码留给去管理，不然你要干嘛适当地换行适当的添加注释，但不要疯狂的添加注释对一段代码或者一行特别需要注意的代码注释不要疯狂的注释，太啰嗦， 介绍 看了很多best practice，却没有人教我怎么去写一手漂亮的js代码，今天我来讲讲我自己写js的经验 不要在代码中留大段注释掉的代码 ...

    BetaRabbit 评论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 评论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 评论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 评论0 收藏0

发表评论

登陆后可评论

0条评论

ad6623

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<