最終更新:2022-08-04 (木) 11:23:54 (4d)  

React/関数コンポーネント
Top / React / 関数コンポーネント

概要

  • render メソッドだけを有して自分の state を持たないコンポーネントを、よりシンプルに書くための方法
  • React.Componentを継承するクラスを定義する代わりに、props を入力として受け取り表示すべき内容を返す関数を定義 
    function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  • propsを引数として受け取り、React要素を返す
↑

例 

  • const Example = (props) => {
  // You can use Hooks here!
  return <div />;
}
    function Example(props) {
  // You can use Hooks here!
  return <div />;
}
  • 分割代入で引数を受け取ることもできる 
    const Example = ({color, children}) => {
  // You can use Hooks here!
  return <div />;
}
↑

React/フック

  • もともと関数コンポーネントは、クラスコンポーネントが持つようなstateの機能やcomponentDidMount?を始めとするライフサイクルメソッドを持たなかった
  • →React/フックの導入
↑

参考




検索：