Reactコンポーネント–機能とクラス
React-js は、開発者がコードをカプセル化して再利用しやすくするためのJavaScriptフレームワークです。これらのカプセル化されたコードスニペットはと呼ばれます コンポーネント 。 で何が起こっているかを妨げることなく、独自のロジックと状態を保持できます。 ドキュメントオブジェクトモデル（DOM） 。
ウェブサイトの一部をこれらの小さな一口サイズのコンポーネントに抽象化してデータを渡すことで、コードを再利用可能にし、よりドライにすることができます（ D しない R epeat Y 私たち自身）。 Reactで遭遇するコンポーネントには、機能コンポーネントとクラスコンポーネントの2つの主要なタイプがあります。
非常に高いレベルでは、Reactコンポーネントは基本的に小道具を受け入れるJavaScript関数です。 パラメータとして、いくつかのReact要素を返します これは基本的に画面に何を表示するかを説明しています。
import React from 'react';
import ReactDOM from 'react-dom';
const Greeting = (props) => {
return (
<div>
Hello, {props.name}
</div>
);
};
const element = <Greeting name="Yolanda" />;
ReactDOM.render(
element, document.getElementById('root')
)
この場合のReact要素は
この場合、受け継がれた小道具はname。です。 要素 親を表します。
前述したように、機能コンポーネントは基本的にJavaScript関数です。 Reactコンポーネントを作成するときは、EcmaScript 5（ES5）またはEcmaScript a6（ES6）構文を使用できます。経験則として、Reactコンポーネントは、実際にコンポーネントであることを示すために大文字にする必要があります。
これは、JSXを使用していないが、単純なバニラJavaScriptを使用している場合に、ES5機能コンポーネントがどのように見えるかを示す模擬の実例です。 HTMLで何が起こっているかについてあまり心配する必要はありません。 JavaScriptロジックに注目してください。作成中の要素、何かを返す関数があり、その関数はある種のReactDOMにレンダリングされています。
参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。
平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。
JSX（JavaScript XML Extensionの略）で基本的にできることは、JavaScriptでHTMLを記述して、HTMLで見慣れているものに近づけることです。上記のコード例では、純粋にJavaScriptを使用してHTML要素を作成し、次にReactのcreateElementメソッドを使用して
アプリケーションをスケーリングする場合（アプリケーションを実際よりもはるかに大きくする場合）、このタイプの書き込みはかなりすぐに面倒になります。 JSXは、基本的にReact.createElementメソッドのシンタックスシュガーとして作成されており、アプリをより迅速にスケーリングできます。
機能コンポーネントは、ES5またはES6と書くことができます。これは、ES5とES6の両方の機能コンポーネントがJSXを使用してどのように見えるかの例です。
React v.16より前は、機能コンポーネントはステートレスと呼ばれていました。 コンポーネント。これは、コンポーネントの主な目的がプレゼンテーションであり、ページの見栄えを良くすることであったことを意味します。多くの場合、データはこれらの機能コンポーネントに渡され、ユーザーインターフェイスに何かを表示できるようになりました。
React v.16の登場により、すべてが変わりました。これについては、少し後で説明します。今のところ、親またはグローバルオブジェクトから何らかのデータを受信してクライアントに何かを提示する機能コンポーネントが存在することを知っておいてください。
クラスコンポーネントは、JavaScript関数の「単なる」よりも少し複雑です。 Reactのクラスコンポーネントは、ES6JavaScriptクラスの概念を借用しています。 JavaScriptのクラスの構造は、ほとんどの場合、属性とメソッドが関連付けられたオブジェクトです。
Reactでは、ほとんどの場合、構造は同じです。 Reactクラスコンポーネントはオブジェクトのインスタンスであり、このオブジェクトにはstate。と呼ばれるものがあります。 大まかに言えば、状態はコンポーネントが保持する単なるデータです。これは、属性を設定してクラスにバインドする別の方法と考えてください。開発者は、そのデータを使って好きなことを行うことができます。画面に表示したり、他のコンポーネントに渡したり、他のロジックを実行したりすることができます。
ES6クラスのコンポーネントは、機能コンポーネントと同様に常に大文字になります。これは、トランスパイラーがコンポーネントであることを認識できるようにするためのReactルールです。 React自体からコンポーネント構造を継承しているため、拡張する必要があります。 Reactの
状態は、プロパティと値でいっぱいのオブジェクトです。ここの私たちの州は種の特性を持っており、その価値は動物でいっぱいの配列です。この配列を参照または操作するには、
上記のクラスコンポーネントの目的は、動物の名前を
Reactでは、データは親コンポーネントから子コンポーネントに1レベルだけ流れ落ちることを覚えておいてください。 親の孫コンポーネントのデータが必要な場合は、別のレベルに渡す必要があります。
Reactのクラスコンポーネントのもう1つの機能は、ライフサイクルメソッドにアクセスして使用し、状態を追跡できることです。 Reactライフサイクルには通常、3つのフェーズがあります。作成（マウント）、ライブ（更新）、および終了（アンマウント）です。ライフサイクルメソッドの各段階で状態にアクセスおよび/または状態を変更する方法があります。
これらよりも多くのライフサイクルメソッドがあります-リストされているものは単なる主要なものです。これらのメソッドの詳細については、Reactのドキュメントを参照してください。
最後に、機能コンポーネントのreturnステートメントとは対照的に、クラスコンポーネントは
ふぅ！それはたくさんの情報です。
Reactv。16より前の機能コンポーネントを覚えておいてください。 主にプレゼンテーションであり、状態を処理しませんでした。表示するだけでした。クラスコンポーネントは、すべての状態ロジックを詳しく説明し、その情報を小道具として他のコンポーネントに渡しました。
2018年、Reactは React Hooksのアイデアを導入しました 。フックは、機能コンポーネント内のライフサイクルメソッドと状態を利用するためのクリーンで簡潔な方法です。
ほとんどすべてが、これまでに説明したすべてと非常によく似ています。いくつかの状態があり、それを使って何かをする必要があり、それを別の場所に渡す必要があります。主な目的は同じです。構文ははるかにわかりやすく、少し慣れる必要があります。
私がすることは、このサイトをブックマークして練習し、クラスのコンポーネントを繰り返し取得することです。本当に理解 Reactでのデータフローの仕組みを確認してから、ここに戻ってステートフル機能コンポーネントについて学習を終了してください。 。
以前に持っていたコードから始めましょう：
動物とアプリの2つのコンポーネントがあります。アプリがAnimalを返し、「Marshmallow」の値を持つnameという名前の小道具を渡しているようです。
信じられないかもしれませんが、これをステートフルなロジックに変換するために必要なことはそれほど多くありません。
—この行は、フックuseStateをインポートします。
–この行は状態を初期化します。ここでのStateとsetStateは任意の単語です。これらには好きな名前を付けることができます。値にちなんで名前を付けるのが通例です。
–状態は実際の状態です。初期状態は、useState（）の括弧内にあります。
– setStateはthis.setState（）に似ています。これは、アプリケーションを移動するときに状態を変更する方法です。
–「マシュマロ」を{state}に置き換えます。 JSXでJavaScriptを作成する必要がある場合は、中括弧を使用します。ここで中括弧を使用すると、変数を渡すことができます。
クラスコンポーネントを定義した機能の1つであるReactLifecycleは、さまざまなメソッドとともに、すべてのメソッドをカプセル化する1つの基本的なフックにスキムダウンされています。 useEffect（）フックは、それが含まれているReactコンポーネントをマウント、更新、およびアンマウントできます。
React v。16より前は、機能コンポーネントは、クラスコンポーネントから受け継がれた小道具を除いて、状態を使用せずにプレゼンテーションビューレイヤーとして純粋に使用されていました。クラスコンポーネントは、アプリケーションのすべての状態を保持し、データを渡しました。クラスコンポーネントは、Reactコンポーネントをマウント、更新、およびアンマウントするライフサイクルメソッドを利用しました。また、バージョン16でReactによってリリースされた新しいパターンであるReact Hooksを使用すると、機能コンポーネントをステートフルにし、独自のバージョンのライフサイクルメソッドを使用できることがわかりました。
React Hooksの人気が高まっている場合でも、さまざまなタイプのコンポーネントすべてに精通していることが重要です。レガシーコードはおそらくしばらくの間クラスコンポーネントを使用し、それを操作できるように理解する必要があります。
React Nativeは、iOSおよびAndroid用のネイティブモバイルアプリを構築するために特別に設計されたFacebookのオープンソースJavaScriptモバイルフレームワークです。 React Nativeは、モバイルプラットフォーム用のユーザーインターフェイスの構築に役立つReactJSJavaScriptライブラリに基づいています。 React Nativeは、既存のIOSまたはAndroidアプリ内で直接使用することも、ネイティブアプリを最初から作成することもできます。現在、React Nativeは、Facebookモバイルアプリ、Instagram、Pinterest
C＃のConsoleクラスは、コンソールアプリケーションの標準の入力、出力、およびエラーストリームを表すために使用されます。 C＃のコンソールクラスプロパティの例をいくつか見てみましょう- Console.CursorLeftプロパティ C＃でコンソールのCursorLeftを変更するには、Console.CursorLeftプロパティを使用します。 例 例を見てみましょう- using System;
class Demo {
public static void Main (string[] args) {
Cons
/> コンポーネントは小道具オブジェクトに到達し、Greeting内で使用できるようになります。これにより、コンポーネントに任意の名前を渡すことができるため、Greetingは非常に再利用可能になります。 機能コンポーネント
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic React Component</title>
</head>
<body>
<!-- App is inserted at thr root node -->
<div id="root"></div>
<!-- React CDN -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- React-DOM CDN -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- React Components can be rendered here -->
<script async>
'use strict';
const element = React.createElement;
function Greeting() {
return element('h4', null , `Hello, World!`);
};
function App() {
return element(Greeting);
};
const domContainer = document.querySelector('#root');
ReactDOM.render(element(App), domContainer);
</script>
</body>
</html>
を挿入しています。
ES5機能コンポーネント
import React from 'react';
import ReactDOM from 'react-dom';
function Animal(props) {
const element = <h1>My cat's name is {props.name}</h1>;
return element;
}
function App() {
return <Animal name="Marshmallow"/>
};
const domContainer = document.querySelector('#root');
ReactDOM.render(<App/>, domContainer); ES6機能コンポーネント
const Animal = (props) => {
const element = <h1>My cat's name is {props.name}</h1>;
return element;
}
const App = () => {
return <Animal name="Marshmallow"/>
};
const domContainer = document.querySelector('#root');
ReactDOM.render(<App/>, domContainer);
クラスコンポーネント
thisを使用します そのオブジェクトのインスタンスにアクセスして操作するためのキーワード。
コンポーネント クラス。そのコードブロックの中に、状態を配置する場所があります。
import React from 'react';
import ReactDOM from 'react-dom';
import Name from './Name';
// the 'this' keyword needs to be used when we are talking about an instance of a class. So it will go in front of your methods and state when referring to it in your render method.
class Animal extends React.Component {
constructor(props) {
super(props);
this.state = {
species: ['fox', 'tiger', 'bear', 'kangaroo', 'fish', 'cat', 'dog', 'squirrel']
}
}
render() {
return (
<div>
{this.state.species.map(animal => {
return <Name animal={animal}/>
})}
</div>
)
}
}
ReactDOM.render(<Animal />, document.getElementById('root')); this.state.species。を使用します。
に渡すことです。 成分。 <名前/> コンポーネントの仕事は、データを取得したときにそのデータを処理することです。動物の状態は、機能または他のクラスコンポーネントに渡されると、小道具オブジェクトの一部になります。受け継がれ続ける限り、子コンポーネントでアクセスできます。
render（）を使用します 方法。このメソッドは、ReactDOM.render（）がAnimalコンポーネントを渡し、Reactがそのコンストラクターを呼び出した後に呼び出されます。次に、状態が初期化されてから、renderメソッドが呼び出され、実際にコンテンツが画面に表示されます。
機能コンポーネントとuseState（）
import React from 'react';
import ReactDOM from 'react-dom';
const Animal = (props) => {
const element = <h1>My cat's name is {props.name}</h1>;
return element;
}
const App = () => {
const [ state, setState ] = useState('Marshmallow');
return <Animal name={state}/>
};
const domContainer = document.querySelector('#root');
ReactDOM.render(<App/>, domContainer);
import React, {useState} from 'react'; const [ state, setState ] = useState('Marshmallow'); return <Animal name={state}/>
結論