ReactJSコードをPROのようにする10のヒント

私たちの多く、フロントエンド開発者、js開発者、およびリアクション開発者は、異なるスキルレベルの開発者を含むチームで働いています。コードを改善するための最良の方法は、品質の良いコードレビューです—しかし、すべてがうまくいくかどうかをチェックするのではなく、大学がどのようにこの結果を出したのかをチェックします。

どうして?それは簡単です-あなたのチームが5人まで数えるなら、それがどのように機能するかを尋ねるのは簡単です。しかし、あなたのチームが巨大であるか、多くの動的な変更がある場合、その高品質のコードは私たちと他の開発者がそれを理解するのに役立ち、もちろんあなたはPRO; Pのように感じることができます

10個のベストプラクティスを採用しました。これは、私と私のチームがReactプロジェクトのコードの品質を改善するのに役立ちます。このヒントは一般的にES6の機能に基づいていますが、常に使用するわけではありません。それらを探して、気軽に使用してください!!

1.クラスコンポーネントと機能コンポーネント

ES6でクラスサポートが実装されたことに、私たち全員が非常に満足しています。反応では、「React.Component」という単純なクラスを拡張することでコンポーネントを作成できます。単純な状態管理メソッド、コンポーネントイベントサポートなどがあります。必要なことは多すぎることがありますが、使用できることはわかっています。

Reactからのインポート、{コンポーネント} 'react'から
クラスMyComponent extends Component {
  render(){
    return 

こんにちは{this.props.text}   } }

しかし、React開発では、多くの開発者が、1つのパラメーター(props)を持つ関数である可能性がある機能コンポーネントを使用してコンポーネントを作成する方法を忘れています。

ReactからReactをインポート
const MyComponent =(props)=> 

こんにちは{props.text}

しかし、この2つのコンポーネントの使用法は同じに見えます!

わかりました—では、なぜ機能コンポーネントを使用する必要があるのでしょうか?それは、クラスがより軽量で拡張されているためです。メモリの使用について考えるため、Reactと別のリアクティブフレームワークを使用していることを思い出してください。このフレームワークは、不要な小道具やメソッドを使用せずに仮想DOMを作成します。したがって、最適化について考える場合、この違いについて考える必要があります。

わかりました—では、いつクラスコンポーネントを使用でき、いつ機能コンポーネントを使用できますか?ルールは非常に簡単です。機能コンポーネントにないものを使用する必要がある場合は、クラスコンポーネントを使用してください。

結構簡単?うん!機能コンポーネントのようなスケッチからコンポーネントを書き始めます。状態のようなものを使用する必要があることがわかった場合、またはcomponentWillMount()などのコンポーネントの変更を検出する必要がある場合は、クラスコンポーネントに変換できます。

どのタイプのコンポーネントを使用するかを考えると、PROのようになります!

2.コンポーネントテンプレートの「If」ステートメント

以下をご覧ください... if文のこの方法の何が問題なのか知っていますか?

{a> b? :null}

条件に矛盾がある場合、Reactはnullをレンダリングします。うーん...大丈夫-私は見ないので問題はありません...ない!!!

このnullはまだDOMに存在するため、リストからすべての子を取得するか、n番目の子を呼び出す場合は、このnullがカウントされます!!!

解決?

{a> b && }

とても簡単、とてもエレガント。プロのように!

3.関数バインディング

ES6が大好き!矢印機能が大好き!!!しかし、それらが実際にどのように機能するかを理解すれば、reactでの使用は非常に簡単です。それらの詳細(こちら)。非常に短い-矢印関数は、宣言された直接の親からスコープを取得します。

なぜ関数バインディングへの参照について話しているのですか?コードをきれいにするための非常に簡単なトリックがあるからです。イベントへの標準関数バインディングは次のようになります。

クラスMyComponent extends Component {
  constructor(props){
    スーパー(小道具)
    this.clickHander = this.clickHander.bind(this)
  }
  clickHander(e){
    e.preventDefault();
    alert( 'Hello' + this.props.text)
  }
  render(){
    return  
  }
}

clickHandler関数を宣言しますが、それらのメインコンテキスト(this)はクリックするボタンです。したがって、これをクラスとしてバインドする場合は、constructorでバインドする必要があります。

簡単にできますか?もちろん!!!矢印関数によって、直接の親からスコープを取得するため、宣言がありました(上からコピー)。

クラスMyComponent extends Component {
  clickHander =(e)=> {
    alert( 'Hello' + this.props.text)
  }
 render(){
    return  
  }
}

より簡単で、より速く、PROのように見えます!!!!

**重要**

この構造を使用する場合は、現在実験中であるため、create-react-appの標準であるtransform-class-propertyを使用してbabelで変換する必要があることに注意してください。参照はこちら

4.より短い小道具と州

ES6から使用できるもう1つのことですが、忘れていました-破壊。多くのコードレビューで、小さなオブジェクトの巨大なオブジェクトが非構造化されていることがわかります。

...
var width = this.props.myObject.width、
    height = this.props.myObject.height、
    color = this.props.myObject.color;
...

それは長すぎて、柔軟なソリューションではありません。それをより簡単に分解する非常に簡単な方法があります。

...
var {幅、高さ、色} = this.props.myObject;
...

オブジェクトのキーのような同じ名前の変数を持ちたいときは、とても簡単です。

反応でどのように使用できますか?

Reactからのインポート、{コンポーネント} 'react'から
クラスMyComponent extends Component {
  render(){
    let {name、age} = this.props
    return 

私の名前は{name}です。私は{age}歳です。   } }

または機能コンポーネント付き

ReactからReactをインポート
const MyComponent =({name、age})=> 

私の名前は{name}です。私は{age}歳です。

もう一つの例?小道具や州の大きな構造を使用する場合。

Reactからのインポート、{コンポーネント} 'react'から
クラスMyComponent extends Component {
  状態= {
    チーム:[
      {
        人:{
          basicInfo:{
            名前:「Michal」、
            年齢:27
          }
        }
      }
    ]
  }
  render(){
    let {name、age} = this.props.team [0] .person.basicInfo
    
    return 

私の名前は{name}です。私は{age}歳です。   } }

簡単?簡単!そして、PROのように見えます;)

5.スタイルの分離

非常に迅速なアドバイス—別のスタイル!!! :D

ただし、次の2つの状況があります。

  1. ファイルから外部スタイルを使用できます(.css、.scss)
  2. 建物スタイルを使用するコンポーネントを使用しますが、マテリアルUIのようなインラインのみを使用します

最初の状況は非常に簡単です。webpacksassとスタイルローダーを使用するだけです。

しかし、2番目の状況は少し難しいので、いくつかの解決策を示したいと思います。

#1。スタイルを考慮

Reactからのインポート、{コンポーネント} 'react'から
constスタイル= {
  段落:{
    'fontSize': '10px'、
    'color': '#ff0000'
  }
}
クラスMyComponent extends Component {
  render(){
    リターン(
      
        

これは私の最初のテキストです         

これは2番目のテキストです            )   } }

#2。 CSSモジュール

cssファイルに存在するクラスに、コード内のオブジェクトや参照のようなCSSをロードすることをお勧めします。

Reactからのインポート、{コンポーネント} 'react'から
「./style.css」からクラスをインポートする
クラスMyComponent extends Component {
  render(){
    リターン(
      
        

これは私の最初のテキストです         

これは2番目のテキストです            )   } }

CSSのWebパックを準備する方法の簡単なビデオ

そして、覚えておいてください-ファイルを分離して、簡単に編集できるようにすれば、PROのように動作します!

6.環境の依存関係

私たちは何かをプロトタイプするのが大好きですが、製品版には何かを入れたくありませんでした。フラグメントを隠したり、開発者専用または開発モードでのみ使用できるものをどのように隠しますか?

ENVIRONMENTS VARIABLESを使用します—プロジェクトの開始またはビルド中に割り当てることができる追加の変数。ターミナルからアクションを開始するときに、process.envでノードごとにアプリにプッシュされる追加の変数を配置してから、何でもプッシュできます。

例MY_VARIABLE = "Hello World!" npm run start

次に、process.env.MY_VARIABLEに値が表示されます。

create-react-appを使用している場合、NODE_ENVなどのビルド変数を取得し、development、production、testなどのビルドのモードを返します。そして、それはすべて基本的な使用法です。

const isDebug = process.env.NODE_ENV === 'development'

実際に使用する方法は?

Reactからのインポート、{コンポーネント} 'react'から
const isDebug = process.env.NODE_ENV === 'development'
クラスMyComponent extends Component {
  render(){
    リターン(
      
        

これは私の公開テキストです         {isDebug &&

これは私の開発テキストです}            )   } }

PROのようなものかどうかはわかりませんが、ENV VARIABLEを使用して、APIルートURLやプロジェクトアドレスなどの環境に敏感な情報を渡すことができます。

**重要**

誰かがあなたのソースコードをデコードしたい場合、彼はあなたに依存関係を見ることができることを忘れないでください。

7.コンポーネントテストの可能性について覚えておく

これは非常に簡単に理解できます。アプリケーションの反応をテストすることを考えているなら、おそらくテストにJestを使用したいでしょう。ただし、Apollo(for GraphQL)などのバックエンドまたはReduxや別のHOCなどのステートマシンにコンポーネントを接続する場合、この拡張機能は単純なコンポーネントテストでは使用できないことに注意する必要があります。そしてそれは正常です。 SINGLEコンポーネントをテストする場合は、その機能のみをテストします。コンポーネントの入力小道具とアクションが適切に機能するかどうかを確認します。

それでは、テストのためにコンポーネントを準備する方法は?

HOCがない場合は、通常どおりエクスポートします。

Reactからのインポート、{コンポーネント} 'react'から
クラスMyComponent extends Component {
  render(){
    let {name、age} = this.props
    return 

私の名前は{name}です。私は{age}歳です。   } }

デフォルトのMyComponentをエクスポート

ただし、HOCを使用する場合は、次のパターンを使用します。

Reactからのインポート、{コンポーネント} 'react'から
エクスポートクラスMyComponentはComponent {
  render(){
    let {name、age} = this.props
    return 

私の名前は{name}です。私は{age}歳です。   } }

デフォルトのmyHocFunction(MyComponent)をエクスポートします

どうして? HOCを使用してコンポーネントを他のドキュメントにインポートする場合は、次を使用します。

'./components/MyComponent'からMyComponentをインポートします

しかし、テストでは使用できます

'./components/MyComponent'から{MyComponent}をインポートします

シンプルなコード、シンプルなソリューションですが、使用方法の多くの可能性—もちろん私たちはPROです;)

8.ヘルパーを使用する

非常にシンプルで重要なことです。時々、同じ機能を使用するか、多くのコンポーネントで同じルールを取得します。コードを複製する必要はありません。ヘルパー関数を他のファイルに分離し、グローバルヘルパーディレクトリに配置するだけです。

公
src
  ヘルパー
    globals.js
  モジュール
    ユーザー
      ヘルパー
        index.js
      UserList.js
      User.js
  app.js

**重要**
コードを複製する場合は、改善する必要があります!

ファイル分離は、PROのようになる最良の方法です!

9.反応フラグメント

あなたは最高のレイアウトを用意しました。HTMLマークアップは最高のものです。すべての考えがきれいに見えます…ARHHHH AMAZING、ただ反応を実装…ヘッダー…完璧に見えます…ジャンボトロン…素晴らしい…待って…ラップされていないセクションがあります…OH NO …反応…シット!

ラッパーを持たないコンポーネントを作成したいとき、それは問題でした。長い間、すべてをラップする必要があります。

クラスMyComponent extends Component {
  render(){
    リターン(
      
        

これは私の最初のテキストです         

これは2番目のテキストです            )   } }

なぜなら、リアクションはそれを一人で置くことを許可しなかったからです。理由—内部の各要素が独自のuniqキーを持っている場合は使用されず、DOMのどの部分が彼のコンポーネントであるかを認識できます。

しかし、Reactには「React Fragments」と呼ばれる新しい機能が追加されており、DOMでラップすることなく多くの要素をグループ化するコンポーネントを構築できます。 divのラッピングと同様に機能しますが、代わりにdivとして ステートメントまたは短いバージョン<> を使用します

クラスMyComponent extends Component {
  render(){
    リターン(
      
        

これは私の最初のテキストです         

これは2番目のテキストです            )   } }

または

クラスMyComponent extends Component {
  render(){
    リターン(
      <>
        

これは私の最初のテキストです         

これは2番目のテキストです            )   } }

すばらしい—あなたはプロのようです。ドキュメントから記事全体を読んでください。

10. PROはプロップタイプとデフォルトプロップを使用します

あなたがPROの場合、コンポーネントが必要とするものについて考えます。 PropTypesを使用する必要があるのはなぜですか?

開発中に、他のコンポーネントが適切に値を渡すことを確認できます。あなたが文字列を使用したい場合、あなたの小道具では文字列でなければなりません。文字列に対してコンポーネント固有のことを内部で行うことができます。 propTypeが不要な場合にdefaultPropsを追加すると、プロジェクトカレッジがコンポーネントに一部のpropを追加するのを忘れないように保護できます。

Reactからのインポート、{コンポーネント} 'react'から
「prop-types」からPropTypesをインポートします
クラスMyComponent extends Component {
  render(){
    return 

こんにちは{this.props.text.toLocaleUpperCase()}   } }

MyComponent.propTypes = {
  テキスト:PropTypes.string
}
MyComponent.defaultProps = {
  テキスト:「世界」
}

そして、あなたはPropTypesについてもっと知りたいです—完全なドキュメント

概要

ご覧のとおり、この10のヒントはコードに簡単に実装できます。もう一度読んで、気に入った場合は反応を追加し、不明な点がある場合、またはより具体的なものについて読みたい場合はコメントを書いてください!幸運を!