前端代码整洁思考

平时工作没怎么细想，代码都是基于业务，能上就行，没时间也没精力去想那些东西，关于怎么把代码写的干净整洁，最近确实是不太忙，懂得都懂，通过思考总结了一点东西。

代码tab缩进

个人墙裂推荐2个空格，让代码看的更加紧凑好看。

import React from 'react';

function Demo() {
    
    
  return (
    <div></div>
  );
}

export default Demo;

代码的宽度

就是一个文件中，代码的最长度，这个最好也固定死，这样代码也会好看。

怎么固定死，本人有个技巧，桌面新建两个文件当看门的。
怎么看代码超出了呢，简单啊，编辑器下边有你没有滚动条。

在这里插入图片描述

关于注释

注释最好和上一行有一行的间隔。
并且长度不要太长，不超出编辑视图。
建议页头写页面的详情开发信息。
页体内，最好注释统一一种格式，要么全是 // 要么全是 /* */。
如果逻辑复杂且注释比较多，可以写到 readme 文件里。

/**
 * 什么什么页面
 * @author somebody
 */
import React, {
    
    useState} from 'react';

function Demo() {
    
    
  
  // info data
  const [data, setData] = useState({
    
    })

  // 列表数据
  const [list, setList] = useState([])

  // 支付数据
  const [order, setOrder] = useState(null)

  return (
    <div>hallo</div>
  );
}

export default Demo;

关于解构或者组件参数过多

如果在 import、解构或者组件参数过多，建议使用多行模式

import {
    
    a, b, c, d} from "moduleA"

// 这么写比较好看,不是么 
import {
    
    
   a,
   b, 
   c, 
   d
} from "moduleA"

<Demo a={
    
    1}  b={
    
    2} c={
    
    3} />

<Demo 
 a={
    
    1}  
 b={
    
    2} 
 c={
    
    3}
/>

关于组件

最好在当前目前下components文件，且在components中新建一个index.js 作为入口

/components
 /AudioControl
  /index.jsx
  /index.less
 /VideoControl
  /index.jsx
  /index.less
 /index.js
/index.jsx
/index.less
/const.js
/helper.js

使用

import {
    
    
  VideoControl,
  AudioControl,
} from "./component"

页面大的模块

如果是页面大的模块，比如是头部，或者尾部，就不适合叫做组件了，当然头部可继续拆组件，我一般是新建 index.header.js 表示从属关系，和入口同级

/index.jsx
/index.header.jsx
/index.footer.jsx

入口类组件推荐使用class组件

为啥推荐使用class组件，可以更好的处理复杂逻辑，错误边界，性能优化等


class Demo extends React.Component {
    
    
  
  
  componentDidMount() {
    
    
    
  }
  
  componentDidCatch(error, errorInfo) {
    
    
    
  }
  
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    
    
    
  }
  
  render() {
    
    
    return (
      <div>demo</div>
    )
  }
}

尽量不使用额外的库

增加额外的库，不仅要多install一个库，如果这个库不是太出名，还得花时间去看文档，不是么

hook的使用

不管是入口组件还是普通组件, 最好 useState 不要超过3个, useEffect尽量越少越好，最好就一个，否则逻辑复杂，不好维护。
也就是强调 单一职责 的原则。

import React, {
    
    useState, useEffect} from 'react';

function Demo() {
    
    

  // info data
  const [data, setData] = useState({
    
    })

  // some effect
  useEffect(() => {
    
    
    return () => {
    
    

    };
  }, []);

  return (
    <div>hallo</div>
  );
}

export default Demo;

class组件分层

我把一个复杂的组件，抽离为5层，接口调用层，数据层，事件层，生命周期层，渲染层（入口层，主层）。不多说，上代码。

/**
 * 数据层
 * /baseClass/data.js
 */
import React from "react"
import {
    
    connect} from "react-redux";
import {
    
    INITIALSTATE} from "../config"

class Main extends React.Component {
    
    

  constructor(props) {
    
    
    super(props);
    this.state = INITIALSTATE;
  }

  // 数据处理和 getter
  get filterList(){
    
    
    return this.state.list.filter(item => item.num > 2)
  }

}


export default Main;

/**
 * api调用层
 * /baseClass/api.js
 */
import Base from "./data";

export default class BaseWithAPI extends Base {
    
    

  constructor(props) {
    
    
    super(props);
  }

  API_getData(){
    
    
     setTimeout(() => {
    
    
       this.setState({
    
    
         list: [1, 2, 3, 4]
       })
     }, 1000)
   }

}

/**
 * 事件处理层
 * /baseClass/handlers.js
 */
import Base from "./api";

export default class extends Base {
    
    

  constructor(props) {
    
    
    super(props);
  }

   clickHandler(){
    
    
      this.setState((prevStates) => {
    
    
        return {
    
    
          age: prevStates.age + 1
        }
      })
   }

}

/**
 * 生命周期层,对外的出口
 * /baseClass/index.js
 */
import Base from "./handers"

class AbstractView extends Base {
    
    

  constructor(props) {
    
    
    super(props);
  }

  componentDidMount() {
    
    
    console.log(1111)
  }

  // 优化渲染 or 使用pureComponent
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    
    

  }

}

export default AbstractView;

/*
 * 入口层-渲染层
 */
import BaseComponent from "./baseClass"

class Work extends BaseComponent {
    
    
  render() {
    
    
    return (
      <div>
        {
    
    
          this.state.name
        }
      </div>
    );
  }
}

export default Work;

事件驱动代替数据驱动

因为hook的加入，过分的强调副作用，但是js本事是基于事件驱动的，数据驱动不好维护，事件驱动很好理解的，晓得伐。

/**
 * 基于数据驱动的demo
 */
import React, {
    
    
  useState,
  useEffect
} from 'react';

function Demo() {
    
    

  // info data
  const [data, setData] = useState({
    
    });

  const [flag, setFlag] = useState({
    
    });

  // some effect
  useEffect(() => {
    
    
    // do something ...
  }, [flag]);

  return (
    <div>
      <button onClick={
    
    () => setFlag(true)}>
        update
      </button>
    </div>
  );
}

export default Demo;

和下边的对比，当数据过多时，数据依赖就会复杂，数据流动就会没那么容易预测，反而事件是最清晰的。

/**
 * 基于事件驱动的demo
 */
import React, {
    
    
  useState,
  useEffect
} from 'react';

function Demo() {
    
    

  // info data
  const [data, setData] = useState({
    
    });
  
  const clickHandler = () => {
    
    
     // do something...
  }

  return (
    <div>
      <button onClick={
    
    clickHandler}>
        update
      </button>
    </div>
  );
}

export default Demo;

写好文档,多总结

好记性不如烂笔头，代码写的再好，没有详尽的文档也是万万不行的。多总结学到的好东西，多一些沉淀。

多优化代码

开发业务的时候，肯定是效率第一，能完成工作就好，但是如果想有提升，那么就要对自己的老代码去想办法优化了，改抽离的抽离，分层的分层，改删的删，坚持久了总是会有收获的，就会知道自己代码的缺点，避免以后再犯。

学习好项目

从github拉几个好项目，跟着高手学着写，总是没错的。

养成好习惯，学以致用

自己总计的好东西，或者从别人那里学来的好东西，一定要用，并形成习惯。