コンポーネントにとっての最大の関心事はpropsとstate

そして、propsの方が断然重要!!

理由は、stateというのは極力コンポーネントに持たせるべきではないものだから

• 関数型プログラミングによってアプリケーションのUI を宣言的に記述するという React の思想を具現化するためには、副作用の原因となるコンポーネントのstateを極力持たせないようにしたい

VFC(VoidFunctionComponent)について

• FunctionComponentの関数のprops からそのコンポーネントの子要素が格納されるchildren を除いたもの

interface VoidFunctionComponent<P = {}> {
	(props: P, context?: any): ReactElement<any, any> | null;
	propTypes?: WeakValidationMap<P>;
	contextTypes?: ValidationMap<any>;
	defaultProps?: Partial<P>;
	displayName?: string;
}

• 従来のFC で定義された関数コンポーネントだと、 子要素の操作が必要ない場合でも暗黙の内にprops の中に子要素のオブジェクトが渡されてた

フラグメントについて

JSX では最上位階層の要素は必ずひとつじゃないといけない!!!

• <div>で囲ってもいいが、不要なdiv要素が生まれる
• そこで<></>で囲う

ループ処理のKeyについて

JSX で要素をループ処理によって記述する場合、各要素にユニークな値をkey属性として設定しなければならない

• 仮想DOM の差分検出処理で再レンダリングを効率的にするため

参考資料