React

React - Life Cycleと関数コンポーネント

引き続きこちら、Pythonが得意な現役Reactエンジニアのお友達から教えてもらったこの本でお勉強。

https://oukayuka.booth.pm/items/1312652

Reactを体系的に学べるので、オススメです。

 

Life Cycle

  • Mounting......コンポーネントが生成しDOMノードに挿入
  • Updating......変更を検知しコンポーネントを再レンダリングする
    • Propsに変更があったとき
    • Local Stateに変更があったとき
  • Unmounting...... DOMノードからコンポーネントを削除する
  • Error Handling...... コンポーネントのエラーを捕捉する

Reactの Life Cycle メソッド

いっぱいあるけど、大事なの↓

  • componentDidMount()
  • shouldComponentUpdate()
  • componentDidUpdate()
  • componentWillUnmount()

こっちにも書いてる

React Native のチュートリアルを試す

サンプルコードをいろいろ試してみたんだけど、さっぱり理解できないので、本家のチュートリアルをやりました。 ところどころ Qiita みながら。 基礎 React と React Native の違い ...

続きを見る

 

React 17から削除されちゃうメソッド
  • componentWillMount()
  • componentWillReceiveProps()
  • componentWillUpdate()

タイマーのサンプルを写経（色とアイコンだけ変えてみた）

https://react.semantic-ui.com/

これ、眺めてるだけでも楽しいかも。

 

関数コンポーネント

  • 関数型で書くとコードがシンプルになる
  • クラスのthisが難解だから関数型がオススメ
  • 今後実装されていく最適化などが、クラス型だと難しい

らしい。

  • 関数型はLocal Stateを持つことができない→Hooksで実現できるようになった？
  • ライフサイクルメソッドが使えない→Hooksで実現できるようになった？

関数コンポーネントに変更

import React, { Component } from 'react';

↓

import React, { FC } from 'react';
class CharacterList extends Component<CharacterListProps> {
  render() {
    const { school, characters } = this.props;
    return (
      <>

↓

const CharacterList: FC<CharacterListProps> = ({
  school='クラス不明',
  characters,
}) => (
      <>
        <Header as="h2">{school}</Header>

スッキリかける。

Presentational Component

  • 見た目を作るコンポーネント
  • 単にコンポーネントともいう

Container Component

  • 処理を担当するコンポーネント
  • 単にコンテナともいう

コンポーネントの作り方

  • Presentational Componentを先に作る
  • Presentational ComponentをインポートしてContainer Componentを作る

理由

  • コンポーネント再利用性が上がる
  • テスタビリティが向上する

-React