質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1226閲覧

ReactComponentのrenderをJavaScriptで書いた場合の疑問

tomo77777

総合スコア15

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/03/03 12:38

JavaScriptを一通り勉強した初学者がreactに挑戦中というレベル感のものです。

ReactのDocumentにて関数コンポーネントとクラスコンポーネントという所で疑問に思ったことを質問させてください。

//関数コンポーネント function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
//クラスコンポーネント class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }

ドキュメントには『上記 2 つのコンポーネントは React の視点からは等価です。』と書かれています。

関数コンポーネントの方はWelcomeのコンストラクタで、クラスコンポーネントはおそらくReact.ComponetのrenderメソッドでJSXをreturnしています。

クラスコンポーネントが下記なら等価な気がしました。

//私が思う等価なクラスコンポーネント class Welcome extends React.Component { constructor() { return <h1>Hello, {this.props.name}</h1>; } }

ReactDOMのLifeサイクルのrenderでJSXを返すようにしているんだろうなというのは理解できます。

質問内容

『クラスコンポーネントと関数コンポーネントがReactの視点からは等価』というのがまだしっくり来ていません。関数コンポーネントはただコンストラクタでJSXをreturnするだけだと思います。

まだドキュメントを読み始めて1日目で、もう少し読み進めれば等価だなと理解できるんでしょうか?
何か私の『上記 2 つのコンポーネントは React の視点からは等価です。』の理解が捗るご説明をして頂けないでしょうか。

大雑把な質問で申し訳ないです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

上記 2 つのコンポーネントは React の視点からは等価です。

こちらは下記ドキュメントに書かれてるかと存じます。
https://ja.reactjs.org/docs/components-and-props.html

“React の視点から”という点が重要になります。
Reactではこれら2つのコンポーネントは <Welcome name=“Taro” /> と利用が可能なので、この観点から”等価”と記載してるのかと想定しています。

英語版ドキュメントでも、同様の表現です。
https://reactjs.org/docs/components-and-props.html
The above two components are equivalent from React’s point of view.

詳しく知りたい場合は、海外の質問サイトに投稿すれば、Reactのコアメンバーやその他詳しい方たちが回答してくれる可能性もあるので、一度聞いて見ると良いかもしれません。

投稿2019/03/05 07:48

engineer_jp_us

総合スコア100

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問