ReactJS-クイックガイド
ReactJSは、再利用可能なUIコンポーネントを構築するために使用されるJavaScriptライブラリです。Reactの公式ドキュメントによると、以下は定義です-
Reactは、構成可能なユーザーインターフェイスを構築するためのライブラリです。時間の経過とともに変化するデータを提示する再利用可能なUIコンポーネントの作成を促進します。多くの人がMVCのVとしてReactを使用しています。ReactはDOMを抽象化し、よりシンプルなプログラミングモデルとより優れたパフォーマンスを提供します。Reactは、Nodeを使用してサーバー上でレンダリングすることもでき、ReactNativeを使用してネイティブアプリを強化することもできます。Reactは、一方向のリアクティブデータフローを実装します。これにより、ボイラープレートが削減され、従来のデータバインディングよりも推論が容易になります。
Reactの機能
JSX−JSXはJavaScript構文拡張です。React開発ではJSXを使用する必要はありませんが、使用することをお勧めします。
Components−Reactはすべてコンポーネントに関するものです。すべてをコンポーネントとして考える必要があります。これは、大規模なプロジェクトで作業するときにコードを維持するのに役立ちます。
Unidirectional data flow and Flux− Reactは一方向のデータフローを実装しているため、アプリについて簡単に推論できます。フラックスは、データを一方向に保つのに役立つパターンです。
License −ReactはFacebookInc。の下でライセンスされています。ドキュメントはCCBY4.0の下でライセンスされています。
Reactの利点
JavaScriptオブジェクトである仮想DOMを使用します。JavaScript仮想DOMは通常のDOMよりも高速であるため、これによりアプリのパフォーマンスが向上します。
クライアント側とサーバー側、および他のフレームワークで使用できます。
コンポーネントとデータのパターンにより読みやすさが向上し、より大きなアプリを維持するのに役立ちます。
Reactの制限
アプリのビューレイヤーのみを対象としているため、開発用の完全なツールセットを入手するには、他のテクノロジーを選択する必要があります。
インラインテンプレートとJSXを使用しますが、これは一部の開発者にとっては扱いにくいように思われるかもしれません。
この章では、Reactの開発を成功させるための環境をセットアップする方法を紹介します。関係する多くのステップがあることに注意してください、しかしこれは後で開発プロセスをスピードアップするのを助けます。必要になりますNodeJS、インストールされていない場合は、次の表のリンクを確認してください。
| シニア番号 | ソフトウェアと説明 |
|---|---|
| 1 | NodeJS and NPM NodeJSは、ReactJS開発に必要なプラットフォームです。私たちのチェックアウトNodeJS環境設定を。 |
NodeJSを正常にインストールしたら、npmを使用してReactのインストールを開始できます。ReactJSは2つの方法でインストールできます
webpackとbabelを使用します。
を使用して create-react-app コマンド。
webpackとbabelを使用したReactJSのインストール
Webpackモジュールバンドラーです（独立したモジュールを管理およびロードします）。依存モジュールを受け取り、それらを単一の（ファイル）バンドルにコンパイルします。このバンドルは、コマンドラインを使用してアプリを開発するとき、またはwebpack.configファイルを使用して構成することで使用できます。
BabelはJavaScriptコンパイラおよびトランスパイラーです。これは、あるソースコードを別のソースコードに変換するために使用されます。これを使用すると、コードで新しいES6機能を使用できるようになります。ここで、babelはそれをすべてのブラウザーで実行できるプレーンな古いES5に変換します。
ステップ1-ルートフォルダを作成する
名前でフォルダを作成します reactApp デスクトップで、mkdirコマンドを使用して、必要なすべてのファイルをインストールします。
C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactAppモジュールを作成するには、を生成する必要があります package.jsonファイル。したがって、フォルダを作成した後、作成する必要がありますpackage.jsonファイル。これを行うには、を実行する必要がありますnpm init コマンドプロンプトからのコマンド。
C:\Users\username\Desktop\reactApp>npm initこのコマンドは、パッケージ名、説明、作成者などのモジュールに関する情報を要求します。–yオプションを使用してこれらをスキップできます。
C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}ステップ2-Reactとreactdomをインストールします
私たちの主なタスクはReactJSをインストールすることなので、ReactJSとそのdomパッケージを install react そして react-domそれぞれnpmのコマンド。インストールしたパッケージをに追加できますpackage.json を使用してファイル --save オプション。
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --saveまたは、次のように1つのコマンドですべてをインストールできます。
C:\Users\username\Desktop\reactApp>npm install react react-dom --saveステップ3-webpackをインストールする
webpackを使用してバンドラーインストールwebpack、webpack-dev-server、webpack-cliを生成しているため。
C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --saveまたは、次のように1つのコマンドですべてをインストールできます。
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --saveステップ4-babelをインストールする
babelとそのプラグインbabel-core、babel-loader、babel-preset-env、babel-preset-react、html-webpack-pluginをインストールします
C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-devまたは、次のように1つのコマンドですべてをインストールできます。
C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env
babel-preset-react html-webpack-plugin --save-devステップ5-ファイルを作成する
インストールを完了するには、特定のファイル、つまりindex.html、App.js、main.js、webpack.config.js、およびを作成する必要があります。babelrc。これらのファイルは手動で作成することも、を使用して作成することもできます。command prompt。
C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrcステップ6-コンパイラ、サーバー、ローダーを設定する
開いた webpack-config.jsファイルを作成し、次のコードを追加します。webpackのエントリポイントをmain.jsに設定しています。出力パスは、バンドルされたアプリが提供される場所です。また、開発サーバーをに設定しています8001港。任意のポートを選択できます。
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}を開きます package.json 削除します "test" "echo \"Error: no test specified\" && exit 1" 内部 "scripts"オブジェクト。このチュートリアルではテストを行わないため、この行を削除します。追加しましょうstart そして build 代わりにコマンド。
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"ステップ7-index.html
これは単なる通常のHTMLです。設定していますdiv id = "app" アプリのルート要素として追加 index_bundle.js バンドルされたアプリファイルであるスクリプト。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>ステップ8-App.jsxとmain.js
これは最初のReactコンポーネントです。Reactコンポーネントについては、次の章で詳しく説明します。このコンポーネントはレンダリングしますHello World。
App.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;このコンポーネントをインポートして、ルートにレンダリングする必要があります App 要素なので、ブラウザで確認できます。
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));Note −何かを使いたいときはいつでも、 import最初に。コンポーネントをアプリの他の部分で使用できるようにする場合は、次のことを行う必要があります。export 作成後にそれを使用したいファイルにインポートします。
名前でファイルを作成する .babelrc 次のコンテンツをコピーします。
{
"presets":["env", "react"]
}ステップ9-サーバーの実行
セットアップが完了し、次のコマンドを実行してサーバーを起動できます。
C:\Users\username\Desktop\reactApp>npm startブラウザで開く必要のあるポートが表示されます。私たちの場合、それはhttp://localhost:8001/。それを開くと、次の出力が表示されます。
ステップ10-バンドルを生成する
最後に、バンドルを生成するには、コマンドプロンプトでビルドコマンドを次のように実行する必要があります。
C:\Users\Tutorialspoint\Desktop\reactApp>npm run buildこれにより、以下に示すように、現在のフォルダーにバンドルが生成されます。
create-react-appコマンドの使用
webpackとbabelを使用する代わりに、インストールするだけでReactJSをより簡単にインストールできます。 create-react-app。
ステップ1-create-react-appをインストールします
デスクトップを参照し、以下に示すようにコマンドプロンプトを使用してCreate ReactAppをインストールします-
C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-appこれにより、デスクトップにmy-appという名前のフォルダーが作成され、そこに必要なすべてのファイルがインストールされます。
ステップ2-すべてのソースファイルを削除します
生成されたmy-appフォルダー内のsrcフォルダーを参照し、以下に示すようにその中のすべてのファイルを削除します-
C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? yステップ3-ファイルを追加する
名前の付いたファイルを追加する index.css そして index.js srcフォルダに-として
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.jsindex.jsファイルに次のコードを追加します
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';ステップ4-プロジェクトを実行する
最後に、startコマンドを使用してプロジェクトを実行します。
npm start
Reactは、通常のJavaScriptの代わりにJSXをテンプレートに使用します。使用する必要はありませんが、以下のプロが付属しています。
コードをJavaScriptにコンパイルする際に最適化を実行するため、より高速です。
また、タイプセーフであり、ほとんどのエラーはコンパイル中にキャッチできます。
HTMLに精通している場合は、テンプレートを簡単かつ迅速に作成できます。
JSXの使用
JSXは、ほとんどの場合、通常のHTMLのように見えます。すでに環境設定の章で使用しています。からのコードを見てくださいApp.jsx 私たちが戻ってくるところ div。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;HTMLに似ていますが、JSXを使用する際に留意する必要のあることがいくつかあります。
ネストされた要素
より多くの要素を返したい場合は、1つのコンテナ要素でラップする必要があります。使用方法に注意してくださいdiv のラッパーとして h1、 h2 そして p 要素。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
);
}
}
export default App;
属性
通常のHTMLプロパティと属性に加えて、独自のカスタム属性を使用できます。カスタム属性を追加する場合は、を使用する必要がありますdata-プレフィックス。次の例では、data-myattribute の属性として p 素子。
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
</div>
);
}
}
export default App;JavaScript式
JavaScript式はJSX内で使用できます。中かっこで囲む必要があります{}。次の例はレンダリングします2。
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{1+1}</h1>
</div>
);
}
}
export default App;
使用できません if else JSX内のステートメント、代わりに使用できます conditional (ternary)式。次の例では、変数i に等しい 1 したがって、ブラウザはレンダリングします true、他の値に変更すると、レンダリングされます false。
import React from 'react';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
);
}
}
export default App;
スタイリング
Reactはインラインスタイルの使用を推奨しています。インラインスタイルを設定する場合は、camelCase構文。Reactも自動的に追加しますpx特定の要素の数値の後。次の例は、追加する方法を示していますmyStyle インラインに h1 素子。
import React from 'react';
class App extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
}
}
export default App;
コメント
コメントを書くときは、中括弧を付ける必要があります {}タグの子セクション内にコメントを書き込みたい場合。常に使用することをお勧めします{} コメントを書くときは、アプリを書くときに一貫性を保ちたいからです。
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
{//End of the line Comment...}
{/*Multi line comment...*/}
</div>
);
}
}
export default App;命名規則
HTMLタグは常に使用します lowercase タグ名、Reactコンポーネントは Uppercase。
Note −使用する必要があります className そして htmlFor 代わりにXML属性名として class そして for。
これはReactの公式ページで次のように説明されています-
JSXはJavaScriptであるため、次のような識別子 class そして forXML属性名としては推奨されません。代わりに、ReactDOMコンポーネントは次のようなDOMプロパティ名を期待しますclassName そして htmlFor、それぞれ。
この章では、コンポーネントを組み合わせてアプリのメンテナンスを容易にする方法を学習します。このアプローチにより、ページの他の部分に影響を与えることなく、コンポーネントを更新および変更できます。
ステートレスの例
次の例の最初のコンポーネントは App。このコンポーネントはの所有者ですHeader そして Content。私たちは作成していますHeader そして Content 個別に、JSXツリー内に追加するだけです App成分。のみApp コンポーネントをエクスポートする必要があります。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}
export default App;これをページにレンダリングできるようにするには、インポートする必要があります main.js ファイルして呼び出す reactDOM.render()。私たちはすでに環境を設定しながらこれを行いました。
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));上記のコードは、次の結果を生成します。
ステートフルな例
この例では、所有者コンポーネントの状態を設定します（App）。ザ・Headerコンポーネントは状態を必要としないため、最後の例のように追加されます。contentタグの代わりに、table そして tbody 動的に挿入する要素 TableRow からのすべてのオブジェクトに対して data アレイ。
古いJavaScript構文よりもはるかにクリーンに見えるEcmaScript2015矢印構文（=>）を使用していることがわかります。これにより、少ないコード行で要素を作成できます。たくさんのアイテムを含むリストを作成する必要がある場合に特に便利です。
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},
{
"id":2,
"name":"Bar",
"age":"30"
},
{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
}
render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) => <TableRow key = {i}
data = {person} />)}
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));Note −使用していることに注意してください key = {i} inside map()関数。これにより、Reactは、何かが変更されたときにリスト全体を再レンダリングするのではなく、必要な要素のみを更新することができます。これは、動的に作成される要素の数が多いほど、パフォーマンスが大幅に向上します。
Stateデータの出所です。状態をできるだけ単純にし、ステートフルコンポーネントの数を最小限に抑えるように常に努める必要があります。たとえば、状態からのデータを必要とする10個のコンポーネントがある場合、それらすべての状態を保持する1つのコンテナーコンポーネントを作成する必要があります。
状態の使用
次のサンプルコードは、EcmaScript2016構文を使用してステートフルコンポーネントを作成する方法を示しています。
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from state...",
content: "Content from state..."
}
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));これにより、次の結果が得られます。
州と小道具の主な違いは props不変です。これが、コンテナコンポーネントが更新および変更できる状態を定義する必要があるのに対し、子コンポーネントは小道具を使用して状態からのデータのみを渡す必要がある理由です。
小道具の使用
コンポーネントに不変のデータが必要な場合は、小道具を追加するだけです。 reactDOM.render() で機能する main.js コンポーネント内で使用します。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
from props..."/>, document.getElementById('app'));
export default App;これにより、次の結果が得られます。
デフォルトの小道具
デフォルトのプロパティ値をコンポーネントコンストラクターに追加する代わりに、コンポーネントコンストラクターに直接設定することもできます。 reactDom.render() 素子。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
App.defaultProps = {
headerProp: "Header from props...",
contentProp:"Content from props..."
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));出力は以前と同じです。
州と小道具
次の例は、組み合わせる方法を示しています stateとあなたのアプリの小道具。親コンポーネントに状態を設定し、それを使用してコンポーネントツリーに渡します。props。内部render 機能、設定中 headerProp そして contentProp 子コンポーネントで使用されます。
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from props...",
content: "Content from props..."
}
}
render() {
return (
<div>
<Header headerProp = {this.state.header}/>
<Content contentProp = {this.state.content}/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));結果は前の2つの例と同じになりますが、異なるのはデータのソースだけです。これは元々は state。更新する場合は、状態を更新するだけで、すべての子コンポーネントが更新されます。詳細については、イベントの章をご覧ください。
プロパティの検証は、コンポーネントを正しく使用するための便利な方法です。これは、開発中にアプリが大きくなったときに将来のバグや問題を回避するのに役立ちます。また、各コンポーネントの使用方法がわかるため、コードが読みやすくなります。
小道具の検証
この例では、作成しています App すべてのコンポーネント props 必要なこと。 App.propTypes小道具の検証に使用されます。一部の小道具が割り当てた正しいタイプを使用していない場合、コンソールの警告が表示されます。検証パターンを指定した後、設定しますApp.defaultProps。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h3>Array: {this.props.propArray}</h3>
<h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
<h3>Func: {this.props.propFunc(3)}</h3>
<h3>Number: {this.props.propNumber}</h3>
<h3>String: {this.props.propString}</h3>
<h3>Object: {this.props.propObject.objectName1}</h3>
<h3>Object: {this.props.propObject.objectName2}</h3>
<h3>Object: {this.props.propObject.objectName3}</h3>
</div>
);
}
}
App.propTypes = {
propArray: React.PropTypes.array.isRequired,
propBool: React.PropTypes.bool.isRequired,
propFunc: React.PropTypes.func,
propNumber: React.PropTypes.number,
propString: React.PropTypes.string,
propObject: React.PropTypes.object
}
App.defaultProps = {
propArray: [1,2,3,4,5],
propBool: true,
propFunc: function(e){return e},
propNumber: 1,
propString: "String value...",
propObject: {
objectName1:"objectValue1",
objectName2: "objectValue2",
objectName3: "objectValue3"
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
この章では、ReactコンポーネントAPIについて説明します。3つの方法について説明します。setState(), forceUpdate そして ReactDOM.findDOMNode()。新しいES6クラスでは、これを手動でバインドする必要があります。我々は使用するだろうthis.method.bind(this) 例では。
状態の設定
setState()メソッドは、コンポーネントの状態を更新するために使用されます。このメソッドは状態を置き換えるのではなく、元の状態に変更を追加するだけです。
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
}
this.setStateHandler = this.setStateHandler.bind(this);
};
setStateHandler() {
var item = "setState..."
var myArray = this.state.data.slice();
myArray.push(item);
this.setState({data: myArray})
};
render() {
return (
<div>
<button onClick = {this.setStateHandler}>SET STATE</button>
<h4>State Array: {this.state.data}</h4>
</div>
);
}
}
export default App;空の配列から始めました。ボタンをクリックするたびに、状態が更新されます。5回クリックすると、次の出力が得られます。
アップデートさせる
コンポーネントを手動で更新したい場合があります。これは、forceUpdate() 方法。
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
};
forceUpdateHandler() {
this.forceUpdate();
};
render() {
return (
<div>
<button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
<h4>Random number: {Math.random()}</h4>
</div>
);
}
}
export default App;ボタンがクリックされるたびに更新される乱数を設定しています。
Domノードを見つける
DOM操作には、 ReactDOM.findDOMNode()方法。まず、インポートする必要がありますreact-dom。
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor() {
super();
this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
};
findDomNodeHandler() {
var myDiv = document.getElementById('myDiv');
ReactDOM.findDOMNode(myDiv).style.color = 'green';
}
render() {
return (
<div>
<button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
<div id = "myDiv">NODE</div>
</div>
);
}
}
export default App;の色 myDiv ボタンがクリックされると、要素が緑色に変わります。
Note − 0.14アップデート以降、ES6に対応するために、古いコンポーネントAPIメソッドのほとんどが非推奨または削除されました。
この章では、コンポーネントのライフサイクルメソッドについて説明します。
ライフサイクルメソッド
componentWillMount サーバー側とクライアント側の両方で、レンダリング前に実行されます。
componentDidMountクライアント側でのみ最初のレンダリングの後に実行されます。これは、AJAXリクエストとDOMまたは状態の更新が発生する場所です。このメソッドは、他のJavaScriptフレームワークや、実行が遅れる関数などとの統合にも使用されます。setTimeout または setInterval。これを使用して状態を更新し、他のライフサイクルメソッドをトリガーできるようにします。
componentWillReceiveProps別のレンダーが呼び出される前に、小道具が更新されるとすぐに呼び出されます。からトリガーしましたsetNewNumber 状態を更新したとき。
shouldComponentUpdate 戻る必要があります true または false値。これにより、コンポーネントが更新されるかどうかが決まります。これはに設定されていますtrueデフォルトでは。コンポーネントが後でレンダリングする必要がないと確信している場合state または props 更新されたら、戻ることができます false 値。
componentWillUpdate レンダリングの直前に呼び出されます。
componentDidUpdate レンダリング直後に呼び出されます。
componentWillUnmountコンポーネントがDOMからアンマウントされた後に呼び出されます。コンポーネントをでアンマウントしていますmain.js。
次の例では、イニシャルを設定します stateコンストラクター関数で。ザ・setNewnumber を更新するために使用されます state。すべてのライフサイクルメソッドは、コンテンツコンポーネント内にあります。
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 0
}
this.setNewNumber = this.setNewNumber.bind(this)
};
setNewNumber() {
this.setState({data: this.state.data + 1})
}
render() {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
}
class Content extends React.Component {
componentWillMount() {
console.log('Component WILL MOUNT!')
}
componentDidMount() {
console.log('Component DID MOUNT!')
}
componentWillReceiveProps(newProps) {
console.log('Component WILL RECIEVE PROPS!')
}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('Component WILL UPDATE!');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component DID UPDATE!')
}
componentWillUnmount() {
console.log('Component WILL UNMOUNT!')
}
render() {
return (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
setTimeout(() => {
ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);最初のレンダリング後、次の画面が表示されます。
この章では、Reactでフォームを使用する方法を学習します。
簡単な例
次の例では、入力フォームを次のように設定します。 value = {this.state.data}。これにより、入力値が変更されるたびに状態を更新できます。使用していますonChange 入力の変化を監視し、それに応じて状態を更新するイベント。
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Initial data...'
}
this.updateState = this.updateState.bind(this);
};
updateState(e) {
this.setState({data: e.target.value});
}
render() {
return (
<div>
<input type = "text" value = {this.state.data}
onChange = {this.updateState} />
<h4>{this.state.data}</h4>
</div>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));入力テキストの値が変わると、状態が更新されます。
複雑な例
次の例では、子コンポーネントのフォームを使用する方法を示します。 onChange メソッドは、子入力に渡される状態更新をトリガーします value画面にレンダリングされます。同様の例がイベントの章で使用されています。子コンポーネントから状態を更新する必要があるときはいつでも、更新を処理する関数を渡す必要があります（updateState）小道具として（updateStateProp）。
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Initial data...'
}
this.updateState = this.updateState.bind(this);
};
updateState(e) {
this.setState({data: e.target.value});
}
render() {
return (
<div>
<Content myDataProp = {this.state.data}
updateStateProp = {this.updateState}></Content>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<input type = "text" value = {this.props.myDataProp}
onChange = {this.props.updateStateProp} />
<h3>{this.props.myDataProp}</h3>
</div>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));これにより、次の結果が得られます。
この章では、イベントの使用方法を学習します。
簡単な例
これは、1つのコンポーネントのみを使用する簡単な例です。追加するだけですonClick トリガーするイベント updateState ボタンがクリックされると機能します。
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Initial data...'
}
this.updateState = this.updateState.bind(this);
};
updateState() {
this.setState({data: 'Data updated...'})
}
render() {
return (
<div>
<button onClick = {this.updateState}>CLICK</button>
<h4>{this.state.data}</h4>
</div>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));これにより、次の結果が得られます。
チャイルドイベント
更新する必要がある場合 state 親コンポーネントの子からのイベントハンドラーを作成できます（updateState）親コンポーネントで、それを小道具として渡します（updateStateProp）それを呼び出すことができる子コンポーネントに。
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Initial data...'
}
this.updateState = this.updateState.bind(this);
};
updateState() {
this.setState({data: 'Data updated from the child component...'})
}
render() {
return (
<div>
<Content myDataProp = {this.state.data}
updateStateProp = {this.updateState}></Content>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<button onClick = {this.props.updateStateProp}>CLICK</button>
<h3>{this.props.myDataProp}</h3>
</div>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));これにより、次の結果が得られます。
ザ・ ref 要素への参照を返すために使用されます。 Refs ほとんどの場合は避ける必要がありますが、DOM測定が必要な場合や、コンポーネントにメソッドを追加する場合に役立ちます。
参照の使用
次の例は、refを使用して入力フィールドをクリアする方法を示しています。 ClearInput 関数は次の要素を検索します ref = "myInput" 値を設定し、状態をリセットし、ボタンがクリックされた後にフォーカスを追加します。
App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: ''
}
this.updateState = this.updateState.bind(this);
this.clearInput = this.clearInput.bind(this);
};
updateState(e) {
this.setState({data: e.target.value});
}
clearInput() {
this.setState({data: ''});
ReactDOM.findDOMNode(this.refs.myInput).focus();
}
render() {
return (
<div>
<input value = {this.state.data} onChange = {this.updateState}
ref = "myInput"></input>
<button onClick = {this.clearInput}>CLEAR</button>
<h4>{this.state.data}</h4>
</div>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));ボタンがクリックされると、 input クリアされ、フォーカスされます。
React keys動的に作成されたコンポーネントを操作する場合、またはリストがユーザーによって変更される場合に役立ちます。の設定key valueは、変更後にコンポーネントを一意に識別し続けます。
キーの使用
動的に作成しましょう Content一意のインデックスを持つ要素（i）。ザ・map 関数は私たちから3つの要素を作成します dataアレイ。以来key 値はすべての要素で一意である必要があります。作成された各要素のキーとしてiを割り当てます。
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:[
{
component: 'First...',
id: 1
},
{
component: 'Second...',
id: 2
},
{
component: 'Third...',
id: 3
}
]
}
}
render() {
return (
<div>
<div>
{this.state.data.map((dynamicComponent, i) => <Content
key = {i} componentData = {dynamicComponent}/>)}
</div>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<div>{this.props.componentData.component}</div>
<div>{this.props.componentData.id}</div>
</div>
);
}
}
export default App;main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));各要素のキー値について、次の結果が得られます。
将来、いくつかの要素を追加または削除したり、動的に作成された要素の順序を変更したりすると、Reactは key 各要素を追跡するための値。
この章では、アプリのルーティングを設定する方法を学習します。
ステップ1-Reactルーターをインストールする
インストールする簡単な方法 react-router 次のコードスニペットをで実行することです command prompt 窓。
C:\Users\username\Desktop\reactApp>npm install react-routerステップ2-コンポーネントを作成する
このステップでは、4つのコンポーネントを作成します。ザ・Appコンポーネントはタブメニューとして使用されます。他の3つのコンポーネント(Home), (About) そして (Contact) ルートが変更されるとレンダリングされます。
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export default Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export default About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export default Contact;ステップ3-ルーターを追加する
次に、アプリにルートを追加します。レンダリングする代わりにApp 前の例のような要素、今回は Routerレンダリングされます。また、ルートごとにコンポーネントを設定します。
main.js
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))アプリを起動すると、ルートの変更に使用できる3つのクリック可能なリンクが表示されます。
Flux はプログラミングの概念であり、データは uni-directional。このデータはアプリに入り、画面に表示されるまで一方向に流れます。
フラックス要素
以下は、の簡単な説明です。 flux概念。次の章では、これをアプリに実装する方法を学習します。
Actions −データフローをトリガーするアクションがディスパッチャに送信されます。
Dispatcher−これはアプリの中心的なハブです。すべてのデータがディスパッチされ、ストアに送信されます。
Store−ストアは、アプリケーションの状態とロジックが保持される場所です。すべてのストアは特定の状態を維持しており、必要に応じて更新されます。
View − view ストアからデータを受信し、アプリを再レンダリングします。
次の画像にデータフローを示します。
フラックスの長所
- 一方向のデータフローは理解しやすいです。
- アプリはメンテナンスが簡単です。
- アプリのパーツは切り離されています。
この章では、Reactアプリケーションでフラックスパターンを実装する方法を学習します。我々は使用するだろうReduxフレームワーク。この章の目的は、接続に必要なすべての部品の最も簡単な例を示すことです。Redux そして React。
ステップ1-Reduxをインストールする
Reduxを経由してインストールします command prompt 窓。
C:\Users\username\Desktop\reactApp>npm install --save react-reduxステップ2-ファイルとフォルダを作成する
このステップでは、フォルダとファイルを作成します actions、 reducers、および components。作業が完了すると、フォルダー構造は次のようになります。
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir actions
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir components
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir reducers
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > actions/actions.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > reducers/reducers.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/AddTodo.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/Todo.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/TodoList.js
ステップ3-アクション
アクションは、を使用するJavaScriptオブジェクトです。 typeストアに送信する必要があるデータについて通知するプロパティ。私たちは定義していますADD_TODOリストに新しいアイテムを追加するために使用されるアクション。ザ・addTodo 関数は、アクションを返し、を設定するアクションクリエーターです。 id 作成されたすべてのアイテムに対して。
アクション/actions.js
export const ADD_TODO = 'ADD_TODO'
let nextTodoId = 0;
export function addTodo(text) {
return {
type: ADD_TODO,
id: nextTodoId++,
text
};
}ステップ4-レデューサー
アクションはアプリの変更をトリガーするだけですが、 reducersそれらの変更を指定します。使用していますswitch 検索するステートメント ADD_TODOアクション。レデューサーは、2つのパラメーターをとる関数です（state そして action）更新された状態を計算して返します。
最初の関数は新しいアイテムを作成するために使用され、2番目の関数はそのアイテムをリストにプッシュします。終わりに向かって、私たちは使用していますcombineReducers 将来使用する可能性のある新しいレデューサーを追加できるヘルパー関数。
reducers / reducers.js
import { combineReducers } from 'redux'
import { ADD_TODO } from '../actions/actions'
function todo(state, action) {
switch (action.type) {
case ADD_TODO:
return {
id: action.id,
text: action.text,
}
default:
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
todo(undefined, action)
]
default:
return state
}
}
const todoApp = combineReducers({
todos
})
export default todoAppステップ5-保存
ストアは、アプリの状態を保持する場所です。レデューサーがあれば、ストアを作成するのは非常に簡単です。店舗の物件をprovider ルートコンポーネントをラップする要素。
main.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './App.jsx'
import todoApp from './reducers/reducers'
let store = createStore(todoApp)
let rootElement = document.getElementById('app')
render(
<Provider store = {store}>
<App />
</Provider>,
rootElement
)ステップ6-ルートコンポーネント
ザ・ Appコンポーネントは、アプリのルートコンポーネントです。ルートコンポーネントのみがreduxを認識している必要があります。注意すべき重要な部分はconnect ルートコンポーネントを接続するために使用される関数 App に store。
この関数はかかります select引数として機能します。Select関数はストアから状態を取得し、小道具を返します（visibleTodos）コンポーネントで使用できます。
App.jsx
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'
import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'
class App extends Component {
render() {
const { dispatch, visibleTodos } = this.props
return (
<div>
<AddTodo onAddClick = {text =>dispatch(addTodo(text))} />
<TodoList todos = {visibleTodos}/>
</div>
)
}
}
function select(state) {
return {
visibleTodos: state.todos
}
}
export default connect(select)(App);ステップ7-その他のコンポーネント
これらのコンポーネントはreduxを認識すべきではありません。
components / AddTodo.js
import React, { Component, PropTypes } from 'react'
export default class AddTodo extends Component {
render() {
return (
<div>
<input type = 'text' ref = 'input' />
<button onClick = {(e) => this.handleClick(e)}>
Add
</button>
</div>
)
}
handleClick(e) {
const node = this.refs.input
const text = node.value.trim()
this.props.onAddClick(text)
node.value = ''
}
}components / Todo.js
import React, { Component, PropTypes } from 'react'
export default class Todo extends Component {
render() {
return (
<li>
{this.props.text}
</li>
)
}
}components / TodoList.js
import React, { Component, PropTypes } from 'react'
import Todo from './Todo.js'
export default class TodoList extends Component {
render() {
return (
<ul>
{this.props.todos.map(todo =>
<Todo
key = {todo.id}
{...todo}
/>
)}
</ul>
)
}
}アプリを起動すると、リストにアイテムを追加できるようになります。
この章では、Reactを使用して要素をアニメーション化する方法を学習します。
ステップ1-ReactCSSトランジショングループをインストールする
これは、基本的なCSSトランジションとアニメーションを作成するために使用されるReactアドオンです。からインストールしますcommand prompt ウィンドウ-
C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-groupステップ2-CSSファイルを追加する
新しいファイルstyle.cssを作成しましょう。
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > css/style.cssアプリで使用できるようにするには、index.htmlのhead要素にリンクする必要があります。
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet" type = "text/css" href = "./style.css">
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>ステップ3-アニメーションを表示する
基本的なReactコンポーネントを作成します。ザ・ReactCSSTransitionGroup要素は、アニメーション化するコンポーネントのラッパーとして使用されます。使用しますtransitionAppear そして transitionAppearTimeout、ながら transitionEnter そして transitionLeave 偽です。
App.jsx
import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
class App extends React.Component {
render() {
return (
<div>
<ReactCSSTransitionGroup transitionName = "example"
transitionAppear = {true} transitionAppearTimeout = {500}
transitionEnter = {false} transitionLeave = {false}>
<h1>My Element...</h1>
</ReactCSSTransitionGroup>
</div>
);
}
}
export default App;main.js
import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));CSSアニメーションは非常にシンプルです。
css / style.css
.example-appear {
opacity: 0.04;
}
.example-appear.example-appear-active {
opacity: 2;
transition: opacity 50s ease-in;
}アプリを起動すると、要素がフェードインします。
ステップ4-アニメーションの開始と終了
リストから要素を追加または削除する場合は、Enter andLeaveアニメーションを使用できます。
App.jsx
import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']
}
this.handleAdd = this.handleAdd.bind(this);
};
handleAdd() {
var newItems = this.state.items.concat([prompt('Create New Item')]);
this.setState({items: newItems});
}
handleRemove(i) {
var newItems = this.state.items.slice();
newItems.splice(i, 1);
this.setState({items: newItems});
}
render() {
var items = this.state.items.map(function(item, i) {
return (
<div key = {item} onClick = {this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<button onClick = {this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName = "example"
transitionEnterTimeout = {500} transitionLeaveTimeout = {500}>
{items}
</ReactCSSTransitionGroup>
</div>
);
}
}
export default App;main.js
import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));css / style.css
.example-enter {
opacity: 0.04;
}
.example-enter.example-enter-active {
opacity: 5;
transition: opacity 50s ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.04;
transition: opacity 50s ease-in;
}アプリを起動してクリックすると Add Item ボタンをクリックすると、プロンプトが表示されます。
名前を入力して[OK]を押すと、新しい要素がフェードインします。
これで、いくつかのアイテムを削除できます（Item 3...）それをクリックして。このアイテムはリストからフェードアウトします。
高階コンポーネントは、既存のコンポーネントに機能を追加するために使用されるJavaScript関数です。これらの機能はpure、つまり、データを受信し、そのデータに従って値を返します。データが変更された場合、高階関数は異なるデータ入力で再実行されます。返されるコンポーネントを更新する場合は、HOCを変更する必要はありません。関数が使用しているデータを変更するだけです。
Higher Order Component（HOC）は「通常の」コンポーネントをラップアラウンドし、追加のデータ入力を提供します。これは実際には、1つのコンポーネントを受け取り、元のコンポーネントをラップする別のコンポーネントを返す関数です。
この概念がどのように機能するかを簡単に理解するために、簡単な例を見てみましょう。ザ・MyHOC データをに渡すためにのみ使用される高階関数です MyComponent。この関数はかかりますMyComponent、でそれを強化します newData 画面にレンダリングされる拡張コンポーネントを返します。
import React from 'react';
var newData = {
data: 'Data from HOC...',
}
var MyHOC = ComposedComponent => class extends React.Component {
componentDidMount() {
this.setState({
data: newData.data
});
}
render() {
return <ComposedComponent {...this.props} {...this.state} />;
}
};
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>{this.props.data}</h1>
</div>
)
}
}
export default MyHOC(MyComponent);アプリを実行すると、データがに渡されることがわかります MyComponent。
Note−さまざまな機能に高次のコンポーネントを使用できます。これらの純粋関数は関数型プログラミングの本質です。慣れると、アプリのメンテナンスやアップグレードがどのように簡単になっているのかがわかります。
この章では、アプリ開発中に一貫性を保つのに役立つReactのベストプラクティス、方法、テクニックをリストします。
State−状態は可能な限り回避する必要があります。状態を一元化し、小道具としてコンポーネントツリーに渡すことをお勧めします。同じデータを必要とするコンポーネントのグループがある場合は常に、状態を保持するコンテナ要素をコンポーネントの周囲に設定する必要があります。フラックスパターンは、Reactアプリで状態を処理するための優れた方法です。
PropTypes−PropTypesは常に定義する必要があります。これは、アプリ内のすべての小道具を追跡するのに役立ち、同じプロジェクトで作業している開発者にも役立ちます。
Render−アプリのロジックのほとんどは、renderメソッド内に移動する必要があります。コンポーネントライフサイクルメソッドのロジックを最小限に抑え、そのロジックをレンダリングメソッドに移動する必要があります。使用する状態と小道具が少ないほど、コードはクリーンになります。状態は常に可能な限り単純にする必要があります。状態または小道具から何かを計算する必要がある場合は、renderメソッド内で計算できます。
Composition− Reactチームは、単一責任の原則を使用することを提案しています。つまり、1つのコンポーネントが1つの機能のみを担当する必要があります。一部のコンポーネントに複数の機能がある場合は、機能ごとにリファクタリングして新しいコンポーネントを作成する必要があります。
Higher Order Components (HOC)−以前のReactバージョンは、再利用可能な機能を処理するためのミックスインを提供していました。ミックスインは現在非推奨であるため、解決策の1つはHOCを使用することです。