応答ライフサイクル(クラスvs関数)

反応器は素子ベースのビューを中心としたライブラリである.したがって、各構成部品には、1つのライフサイクル、すなわち構成部品のライフサイクルが存在する.コンポーネントの寿命は、通常、ページレンダリングの準備中に開始され、ページが消えたときに終了します.

構成部品のライフサイクル(構成部品のライフサイクル)

コンポーネントがレンダリングの準備をしていた瞬間から、ページから消えるまでのライフサイクルです.
ライフサイクル関数はクラス構成部品でのみ使用されます
構成部品の作成:componentDidMount()構成部品の更新:componentDidUpdate()構成部品の除去:componentWillUnmount()インストールは、DOMを作成してWebブラウザに表示することを意味し、逆も同様です.
構成部品の更新は、次の4つの場合に発生します.
1.アイテム変更時
2.状態変化時
3.親構成部品を再レンダリングする場合
4. this.forceUpdateを使用してレンダリングを強制トリガします.

React Hook

hookはクラス素子の機能を関数型素子でも利用できる機能である.hookにより、関数型素子で素子の定数を管理したり、素子のライフサイクル関数を利用したりすることができます.
クラスタイプに比べてHooksを使用する関数型要素が多いので、反応Hooksを使用してライフサイクルを実現することが望ましい.

constructor

構成部品の作成時に初めて実行されます.この方法では、初期状態を決定できます.

// Class
class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
}

// Hooks
const Example = () => {
    const [count,setCount] = useState(0);
}

クラスでは、初期状態を決定する際にconstructorを使用する必要があります.ただし、hookでuserState hookを使用すると初期状態を簡単に設定できます.

render

構成部品のレンダリングに必要な方法
関数型構成部品では、レンダーせずに構成部品をレンダーできます.

// Class
class Example extends React.Component {
  render() {
    return <div>컴포넌트</div>
  }
}

// Hooks
const example = () => {
  return <div>컴포넌트</div>
}

componentDidMount

この方法は、構成部品を作成し、最初のレンダリングが完了した後に実行されます.関数型Hooksでは、UseEffectを利用して次の機能を実現できます.

// Class
class Example extends React.Component {
    componentDidMount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    }, []);
}

userEffectの[]は依存配列である.これが更新条件です.

ComponentDidUpdate

レンダリングが完了すると実行されます.

// Class
class Example extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    });
}

componentWillUnmount

この方法はDOMから構成部品を削除するときに実行されます.

// Class
class Example extends React.Component {
    coomponentWillUnmount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        return () => {
            ...
        }
    }, []);
}

3週目の感想

始まって間もないですが、もう3週間が経ちました.朝9時から夜明けまで勉強していましたが、一日一日が早いですね.ゲームをしていても、毎日9時から明け方まで、疲れてできないことがありますが、Boot campをして勉強しています.疲れたが、課題のプレッシャーでどうしてもやらなければならないので、やらせた.フロントを選んで反応を学び、反応基礎科目の内容の難しさは理解できる.反応の基礎課題もよくできた.深化クラスに入ると、分量が多くなり、考えることも多くなるので、一度に授業内容を理解するのは難しいです.内容を整理して復習することが必要だと思います.使いやすさのために作られた反応なので、今回の厳しい危機を乗り切れば、うまく使えます.