詳しい説明は偉大な先人の方々に委ねて、この記事ではざっくりと2つの違いを理解することを目的としています！
目次
- React ComponentとElementの違いとは
- React Componentについて
- React Elementについて
React ComponentとElementの違いとは
一言で言うと、
- Component: React Elementを返り値とする関数
- Element: render()を通してDOMに変換される元となるオブジェクト
React Componentについて
下記のように、Elementを返す
type Hello = () => SX.Element
const Hello: Hello = () => {
return (
<p>Hello</p>
)
}
型として定義している Hello を渡すのではなく、reactから FC という型をimoprtして渡す方法もあるが、諸説あるので使い分ける必要がある。(下記の記事がとても詳しく説明してくれています。)
参考記事
const Hoge: React.FC=()=>って書いてたら思考停止系と言われたので調べた
【Reactの型定義】FCとJSX.Elementどっち使えば良い？
React Elementについて
下記のように、関数ではなく変数を定義するように書く
type Hello = JSX.Element
const Hello: Hello = <p>Hello</p>
JSX.Element ではなく、ReactElementを型として使う方法もある。
どちらも結果としてはReact Elementを示す型のため、好みで使い分けて良い。(下記の記事がとても詳しく説明してくれています。