reactは、class 컴포넌트および함수형 컴포넌트を含む.
stateがなく、ライフサイクルメソッドが不要な愚かな構成部品である場合は、関数型構成部品として宣言することが望ましい.
非常にきれいに見え、ロジックを構成部品から削除することができ、後でテストするのに便利です.
関数構成部品がこの機能にアクセスすることはできません.lifeCycle APIも使用できません.伝達されたpropsにのみ依存する.

Propsの入手方法

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ES 6のdestructure(構造分解割当)機能は、宣言に使用することができる.

function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

大間違い

関数構成部品は、レンダーするためにJSX valueを返さなければなりません.
class素子はrender()関数で明示的に返されるため、エラー値を返す回数は少ないが、関数素子で返す回数は想像以上に多い?JSXを返して生成された構文は返されません.

通常

const Header = () => <div className="Header">POSTS</div>;

最初の関数は{ }であり、returnを囲まないことを示す.

const Header = () => {
  return <div className="Header">POSTS</div>;
};

2つ目は、{ }によって囲まれ、returnキーワードによって関数が明示的に返される.

両方のコードはJSXとして出力されます.

誤り

const Header = () => {
  <div className="Header">POSTS</div>;
};

上のコードとは思えないが、{ }と宣言された関数であるが、returnはないため、JSX構文を実行するコードである.これは、webpackがファイルを変換する過程でerrと認識されないため、多くのエラーを引き起こすコードです.reactレンダリングのために、returnを忘れないでください!

次のerr message出力は렌더링에서 반환 된 항목이 없습니다.です.