React はコンポーネント指向プログラミングのパターンであり、関数コンポーネントとクラスコンポーネントという 2 種類のコンポーネントが含まれています。

機能部品

基本的な機能コンポーネントは次のようになります

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
      // 1、创建函数式组件
      function Demo() {
        return <h1>函数式组件</h1>;
      }
      // 2、渲染组件
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>

ページ効果は次のとおりです。

関数名についての注意

コンポーネントをレンダリングするときは、関数名を html タグの形式で記述する必要があることに注意してください。また、関数名を小文字にすることはできません。

// 1、创建函数式组件
function demo() {
  return <h1>函数式组件</h1>;
}
// 2、渲染组件
ReactDOM.render(<demo />, document.getElementById("test"));

上記のように、小文字で書かれた場合、コンソールはエラーを報告します。

これは、Jsx の文法規則に関連しています。

< で始まるコードを見つけて、タグの構文で解析します。同じ名前の HTML タグは同じ名前の HTML 要素に変換されます。他のタグは特別な解析が必要です。

関数実行者

上記のコードでは Demo 関数を実行しませんでしたが、これをラベルとして使用すると、react がこの関数の実行に役立ちました。

関数内の this は次を指します

通常、関数内の this は window を指す必要がありますが、次の例ではこれは未定義になります。

<script type="text/babel">
  // 1、创建函数式组件
  function Demo() {
    console.log("this", this);
    return <h1>函数式组件</h1>;
  }
  // 2、渲染组件
  ReactDOM.render(<Demo />, document.getElementById("test"));
</script>

理由は非常に単純で、コードは babel 環境で実行されており、bable は strict モードを有効にするため、これのポイントは window ではありません。

bable公式ウェブサイトを開いて確認できます。

上記のコードをコピーします

関数コンポーネントが最終的には通常の関数にコンパイルされることがわかります (これは、JSX が糖衣構文であることを裏付けています)。

クラスコンポーネント

基本的なクラスコンポーネントは次のようになります

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
      // 1、创建类组件
      class MyComponent extends React.Component {
        render() {
          return <h1>这是一个类组件</h1>;
        }
      }
      // 渲染组件
      ReactDOM.render(<MyComponent />, document.getElementById("test"));
    </script>
  </body>
</html>

ページ効果

クラスコンポーネントの書き方

クラスコンポーネントはReact.Componentの親クラスを継承する必要があり、関数内で render 関数を呼び出す必要があります。

class MyComponent extends React.Component {
  render() {
    return <h1>这是一个类组件</h1>;
  }
}

クラスを使用するには new キーワードを使用する必要があることはわかっていますが、上記のコードは使用していません。では、MyComponent のインスタンスはいつ作成されたのでしょうか?

React はコンポーネントをレンダリングするときにそれを実行します。

ReactDOM.render(<MyComponent />, document.getElementById("test"));

コードを実行した後:

反応はコンポーネントタグを解析し、MyComponent コンポーネントを見つけます。
コンポーネントがクラスを使用して定義されていることがわかり、新しいクラスのインスタンスが作成され、そのインスタンスを通じてプロトタイプの render メソッドが呼び出されます。
render によって返された仮想 Dom を実際の Dom に変換し、ページ上にレンダリングします。

レンダリング関数

レンダリング関数定義の場所

クラスの知識によれば、レンダー関数は MyComponent クラスのプロトタイプに定義されているため、コンソールを開いて確認します。

render 関数の this は次を指します

クラスの知識によれば、レンダリングではこれが MyComponent のインスタンスオブジェクトである必要があることがわかります。

私たちは印刷します

// 1、创建类组件
class MyComponent extends React.Component {
  render() {
    console.log("render中的this", this);
    return <h1>这是一个类组件</h1>;
  }
}

これは確かに MyComponent のインスタンスオブジェクトであることがわかり、MyComponent の render メソッドがインスタンスオブジェクトのプロトタイプに存在することも確認できます。

コンポーネント内のプロパティ

出力されたインスタンスオブジェクトを観察すると、インスタンスオブジェクトに context や props などの多くの属性メソッドがあることがわかります。

これらのメソッドは MyComponent クラスで定義していないため、継承された親クラス React.Component から取得する必要があります。次に理解する必要があるのは、これらのコンポーネントの属性メソッドです。

React でコンポーネントを作成する 2 つの方法 (2)