【1分钟了解】React 组件与元素的区别与类型【适合初学者】

委托伟大的前辈们提供详细的解释，本文旨在大致理解两个区别！

索引

• React ComponentとElementの違いとは

• React Componentについて

React Elementについて

React组件和元素的区别是什么？

概括来说，

• Component: React Elementを返り値とする関数

Element: render()を通してDOMに変換される元となるオブジェクト

有关React组件

只需一个选项*以以下方式返回元素

type Hello = () => SX.Element

const Hello: Hello = () => {
  return (
		<p>Hello</p>
  )
}

有一种方法不是传递称为Hello的定义类型，而是从react中导入称为FC的类型并传递它，但是由于有不同的解释，需要根据情况选择使用（下面的文章详细解释了这一点）。

请参考所提供的文章。

因为写了 const Hoge: React.FC=()=>，被称为停止思考系，所以我进行了调查。

在React中的类型定义中，应该使用FC还是JSX.Element更好？

关于React Element

请按照以下方式，用变量而不是函数进行定义。

type Hello = JSX.Element

const Hello: Hello = <p>Hello</p>

可以选择使用ReactElement作为类型，而不是JSX.Element。

由于两者都表示React元素类型作为结果，所以可以根据个人喜好进行选择和使用。（下面的文章提供了非常详细的解释。）

参考文章
JSX.Element 是什么？在 React 中指的是什么？