【Reactの基礎1】Reactの概要と特徴、仮想DOM、JSX、プロジェクト構築、コンポーネント、ステート

1. 背景の紹介

1.1 Reactとは何ですか?

React は Facebook の内部プロジェクトとして誕生しました。2013 年に、誰もが使用できるようにオープンソース化されました。ユーザーインターフェイスを構築するための、宣言的で効率的かつ柔軟な JavaScript ライブラリです。React を使用すると、いくつかの短い独立したコードスニペットを組み合わせて複雑な UI インターフェイスを作成できます。これらのコードスニペットは「コンポーネント」と呼ばれます。
React の宣言機能により、DOM を操作する際のパフォーマンスの損失が軽減され、コンポーネントベースの開発により、多数のコンポーネントを再利用できます。内部実装された仮想 DOM および DOM diff アルゴリズムにより、DOM 操作が効率化されます。

1.2 Reactの機能

宣言型設計- React は宣言型パラダイムを採用しているため、アプリケーションの記述が容易になります。
効率的-Reactは、DOMをシミュレートすることにより、DOMとの相互作用を最小限に抑えます。
柔軟性- React は既知のライブラリやフレームワークとうまく連携します。
JSX -JSXはJavaScript構文の拡張です。React 開発では必ずしも JSX を使用する必要はありませんが、JSX を使用することをお勧めします。
コンポーネント-Reactを通じてコンポーネントを構築すると、コードの再利用が容易になり、大規模プロジェクトの開発にうまく適用できます。
一方向応答データフロー- React は一方向応答データフローを実装するため、重複コードが削減され、データセキュリティが維持されます。

1.3 仮想 DOM

仮想 DOM (仮想 DOM) メカニズム: 一連の DOM API は Javascript を使用してブラウザ側に実装されます。React が開発されるとき、すべての DOM 構築は仮想 DOM を通じて行われます。データが変更されるたびに、React は DOM ツリー全体を再構築します。その後、React は現在の DOM ツリー全体と以前の DOM ツリーを比較して、DOM 構造の違いを取得します。その後、変更が必要な部分のみで実際のブラウザ DOM 更新を実行します。さらに、React は仮想 DOM をバッチ更新することができます。たとえば、ノードのコンテンツを A から B に、さらに B から A に継続的に変更すると、React は UI がまったく変更されていないと認識します。

1.4 CDN による React の導入

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

CDN を使用してインポートする場合、スクリプトフラグメントコードはタイプを次のように宣言する必要があります。text/babel

1.4 JSX 構文

JavaScript 言語で直接記述された HTML 言語は JSX です。JSX は、HTML と JavaScript の混合を可能にする JavaScript 構文拡張機能です。JSX は、React フレームワーク用に Facebook によって開発された糖衣構文のセットです。

const dom = <h1>Hello, world!</h1>;

JSX では JavaScript 式を自由に使用できます。JSX の式は中括弧で囲む必要があります。

const name = 'Tina';
const element = (
  <div>
     Hello, {
    
    name}! 
  </div>
);

1.5 JS 構文

React には、仮想 DOM を作成する createElement メソッドが用意されています。このメソッドは 3 つのパラメータを受け取ります。最初のパラメータはラベル名、2 番目はラベル属性、3 番目はラベルの内容です。

 const dom =  React.createElement('h1','','hello,word!')

2. プロジェクトの構築

スキャフォールディングを使用してプロジェクトを作成する

npx は webpack の実行ツールです

npx create-react-app my-app
cd my-app
npm start

ルーティングライブラリの追加

npm i react-router-dom

3.コンポーネント

アプリケーション/セクション/ページは、特定の部分機能 (html、js、css などを含む) を実装するために使用され、これらの部分機能が組み立てられてコンポーネントを形成します。React では、コンポーネントの最小粒度はラベル要素です

3.1 コンポーネントの作成

関数を使用してコンポーネントを定義する

function HelloMessage(props) {
      
      
    return <h1>Hello World!</h1>;
}

クラスを使用してコンポーネントを定義する

class HelloMessage extends React.Component {
      
      
  render() {
      
      
    return <h1>Hello World!</h1>;
  }
}

4.状態状態

React はコンポーネントをステートマシンとして扱います。ユーザーと対話することにより、さまざまな状態が実現され、ユーザーインターフェイスとデータの一貫性を保つために UI がレンダリングされます。

React では、コンポーネントの状態を更新し、(DOM を操作せずに) 新しい状態に基づいてユーザーインターフェイスを再レンダリングするだけで済みます。

React では、クラスコンストラクターをコンポーネント (Class で定義されたコンポーネント) に追加して状態 this.state を初期化できます。クラスコンポーネントは常に props を使用して基本コンストラクターを呼び出す必要があります。

class HelloMessage extends React.Component {
    
    
   constructor(props) {
    
    
    super(props);
    this.state = {
    
    name: 'World'};
  }
  render() {
    
    
    return <h1>Hello {
    
    this.state.name}!</h1>;
  }
}

コンポーネントの name 属性を変更すると、ページのレンダリング結果が変わる可能性があります

class HelloMessage extends React.Component {
    
    
   constructor(props) {
    
    
    super(props);
    this.state = {
    
    name: 'World'};
  }
  nameChange(){
    
    
  	 this.setState({
    
    
         name:'Tina'
     })
  }
  render() {
    
    
    return <div>
        	<h1>Hello {
    
    this.state.name}!</h1>
      		<button onClick={
    
    ()=>{
    
    this.nameChange()}}>变身</button>
        </div>;
  }
}