クリーンなフロントエンドコードについて考える

普段はあまり仕事のことは考えていませんし、コードもビジネスベースなので、仕事さえできればそんなことを考える時間も気力もありません。コードがきれいで整頓されています。最近は本当に忙しくありません。すべてを理解しています。考えながらまとめることができます。何かを得ました。

コードタブのインデント

Personal Wall Crackでは、コードをよりコンパクトで美しくするために2つのスペースを推奨しています。

import React from 'react';

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

export default Demo;

コード幅

これはファイル内のコードの最大長です。コードの見栄えを良くするには、これを修正するのが最善です。

これを修正するにはどうすればよいでしょうか? 裏技があります。デスクトップにゲートキーパーとして機能する 2 つの新しいファイルを作成します。
コードが超過していることはどうやってわかりますか? それは簡単で、エディターの下にスクロールバーがありません。

ここに画像の説明を挿入します

コメントについて

コメントと前の行の間にスペースを入れることをお勧めします。
また、長さは長すぎてはならず、編集ビューを超えてはいけません。
ヘッダーにはページの詳細な開発情報を記述することをお勧めします。
ページ内では、統一されたコメント形式 (すべて // またはすべて /* */) を使用するのが最善です。
ロジックが複雑でコメントが多い場合は、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 {
    
    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}
/>

コンポーネントについて

現在コンポーネントファイルをダウンロードし、入り口としてコンポーネント内に新しい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 Demo extends React.Component {
    
    
  
  
  componentDidMount() {
    
    
    
  }
  
  componentDidCatch(error, errorInfo) {
    
    
    
  }
  
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    
    
    
  }
  
  render() {
    
    
    return (
      <div>demo</div>
    )
  }
}

余分なライブラリを使用しないようにしてください

ライブラリを追加するには、ライブラリをもう 1 つインストールする必要があるだけでなく、そのライブラリがあまり有名でない場合は、ドキュメントを読むのにも時間がかかりますよね。

フックの使用

エントリコンポーネントであっても通常のコンポーネントであっても、useState は 3 つ以下、useEffect はできるだけ少なく、できれば 1 つだけにするのが最善です。そうしないと、ロジックが複雑になり、保守が困難になります。それは、単一責任
の原則を強調するためです。

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;

クラスコンポーネントの階層化

複雑なコンポーネントを、インターフェイス呼び出し層、データ層、イベント層、ライフサイクル層、レンダリング層（エントリ層、メイン層）の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;

データ駆動型ではなくイベント駆動型

フックの追加により副作用が強調されがちですが、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 からいくつかの優れたプロジェクトを取得し、専門家から書き方を学ぶのは常に正しいことです。

良い習慣を身につけ、学んだことを応用する

自分が蓄積したものや他人から学んだ良いものを活用し、習慣化する必要があります。