React を始めるためのナレッジポイントをまとめたもの

フロントエンドで働く人なら誰でも、今は Vue、React、Angular という 3 つの主要なフレームワークの時代であることを知っているはずです。 Vue は、そのファイル構造に従来の HTML の影があり、初心者のフロントエンド担当者にとって非常に「フレンドリー」であるため、最も簡単に始めることができると認識されています。 Angular も HTML を保持していますが、始めるのが最も困難です。その理由は、Google のバックエンド プログラマーによって開発され、純粋な Typescript を使用し、Rxjs を非同期的に使用するためであると考えられます。フロントエンドの初心者にとっては敷居が高すぎます。 。 高い。 React の入門は中程度の難易度です。インターネット上のさまざまな意見では、React の入門は Vue よりも難しいと言われています。その難しさは、JSX を深く理解できないこと、または JSX の一部の機能について深く理解していないことが原因である可能性があります。 ES6 は理解するのが難しい点があり、React はさらに使い始めるのが難しいと言われています。今日は、React を始めるために習得する必要があるいくつかの知識ポイントを整理しましょう。

React を導入する理由

React を作成するときは、次のようなコードを作成することがあります:

import React from 'react'

function A() {
  // ...other code
  return <h1 id="前端桃园">前端桃园</h1>
}

You上記のコードでは React が使用されていないのに、なぜ React を導入する必要があるのか​​と疑問に思ったに違いありません。

インポート React を「react」から削除すると、次のエラーが報告されます:

それではどこで使用されますか? この React は、 React を導入するとエラーが発生するのですが、この理由が分からないということは、JSX があまり明確ではないということになります。

上記のコード (インポート ステートメントを無視して) をオンライン Babel に入力して変換すると、Babel が上記のコードを次のように変換することがわかります。 React.createElement(component, props, ...children) 関数の場合。

class の代わりに className を使用する理由

1. React の初期コンセプトは、JSX が JS 拡張機能であるため、HTML ではなくブラウザの DOM API と一貫性を保つことです。 HTML の代替ではなく、要素の作成に近いものです。要素にクラスを設定するには、className API を使用する必要があります:

function A() {
  // ...other code
  return React.createElement("h1", null, "前端桃园");
}

2. ブラウザの問題、ES5 より前では、予約語をオブジェクトで使用できません。次のコードは IE8 でエラーをスローします:

const element = document.createElement("p")
element.className = "hello"

3. 構造化の問題: 属性を構造化するときに、クラス変数を割り当てると問題が発生します:

const element = {
  attributes: {
    class: "hello"
  }
}

属性はキャメルケースを使用します

JSX は構文的に HTML よりも JavaScript に近いため、React DOM は HTML 属性名の代わりにキャメルケース (キャメルケース命名) を使用して属性の名前を定義します。

コンストラクターで super を呼び出して props を渡す必要があるのはなぜですか?

const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }
const { className } = { className: 'foo' } 
const { class: className } = { class: 'foo' }

そして、super を呼び出すだけでなく props も渡すことができる段落があります。しかし、なぜこれを行うのかはわかりません。

なぜ super を呼び出す必要があるのですか?

実は、これは React の制限ではなく、JavaScript の制限です。これをコンストラクターで呼び出したい場合は、次のようにします。事前に電話する必要があります。 React では、コンストラクターで状態を初期化することがよくあります (this.state = xxx)。そのため、super を呼び出す必要があります。

なぜ props を渡す必要があるのですか?

props を super に渡さなければならないと思うかもしれません。そうでないと、React.Component は this.props を初期化できません。 ##

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <p>
        </p><h1 id="Hello-world">Hello, world!</h1>
        <h2 id="It-is-this-state-date-toLocaleTimeString">It is {this.state.date.toLocaleTimeString()}.</h2>
      
    );
  }
}

ただし、うっかり props を渡し忘れて super() を直接呼び出した場合でも、render やその他のメソッドで this.props にアクセスできます (信じられない場合は試してみてください)。

なぜこれで大丈夫なのでしょうか? React は、コンストラクターが呼び出された後、新しく作成されたインスタンス オブジェクトに props を割り当てるため:

class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

しかし、これは、React を使用するときに super(props) の代わりに super() を使用できることを意味しますか?

それでも動作しません。そうしないと、公式 Web サイトでは props を呼び出すことを推奨しません。React は、コンストラクターの実行後、super() 呼び出しの後と、コンストラクターが終了しても、this.props はまだ使用できません。

// React 内 クラスコンポーネント{ コンストラクター(小道具) { This.props = 小道具; // ... } } // コード内で class Button extends React.Component { コンストラクター(小道具) { 素晴らしい（）; //

以上がReact を始めるためのナレッジポイントをまとめたものの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。