[TIL]学習日記#4

ライフサイクルメソッド

マウント

DOMを作成してWebブラウザに表示

方法:

コンストラクション関数:構成部品の作成時に呼び出されるクラスジェネレータメソッド

getDerivedStateFromProps:propsの値を状態に入れる方法

.

レンダリング:UIをレンダリングする方法

コンポーネントDidMount:Webブラウザでコンポーネントを呼び出す方法

更新

次の4つの場合に更新

道具変換時

状態遷移時

親構成部品の再レンダリング時

this.forceUpdateを使用してレンダリングを強制トリガする場合

方法:

getDerivedStateFromProps:インストールと同じ

shouldComponentUpdateを再レンダリングする方法を決定します.true/false値

を返します.

レンダリング:レンダリング方法

getSnapshotBeforeUpdate:構成部品の変更をDOMに反映する前に呼び出す方法

コンポーネントDidUpdate:更新後に呼び出されるメソッド

インストールされていません

DOMからインストールとは逆のコンポーネントを削除

方法:

コンポーネントWillUnmount:コンポーネントがWebブラウザに消える前に呼び出されるメソッド

整理する

ライフサイクルメソッドは、構成部品の状態が変化したときに実行されます.DOMに直接接触する必要がある場合に非常に有用である.

Hooks

どうもありがとう(?)機能

useState

慣れる
useStateは最も基本的なHookです.関数構成部品からステータスを管理する必要がある場合に使用します.
関数を呼び出すと、配列が返され、配列の最初の要素はステータス値であり、2番目の要素はステータスを設定する関数です.
例:

const [value, setValue] = useState(0);

useEffect

構成部品をレンダーするたびにアクションを実行する
前に学習したコンポーネントDidMountとコンポーネントDidUpdateの組み合わせに似ています.
特定の値のみを実行する場合は、2番目のパラメータに条件を追加します.(空の値はマウント時のみ)
例:

useEffect(() => {console.log('메세지');}, []);

useReducer

useStateの親互換性?
1番目のパラメータに関数を追加し、2番目のパラメータに対応するReduserのデフォルト値を追加します.
李杜書の概念は今度もっと詳しく勉強します.
例:

const [state, dispatch] = useReducer(reducer, {value:0});

useMemo

素子内部で生成される演算を最適化できます.
レンダリング中は、特定の値が変更された場合にのみ演算が行われ、変更されていない場合は、以前の演算値が再使用されます.
例:

const avg = useMemo(() => getAverage(list),[list]);

useCallback

上のusemoとかなり似ています.
以前に作成した関数を再使用できます.
例:

const func1 = useCallback(e => {setNumber(e.target.value);}, [])

useRef

refを関数型素子で使いやすくします.

それ以外は

Custom Hooksを作成して使用することもできます.
他の開発者が作成したHooksもライブラリインストールとして使用できます.
新しく作成した構成部品については、関数構成部品とHooksを使用することをお勧めします.必要に応じてクラス構成部品のみを実施する.

例

import React, {useState, useMemo, useCallback, useRef} from 'react';

const getAverage = numbers => {
    console.log('평균값 계산 중..')
    if (numbers.length === 0 ) return 0;
    const sum = numbers.reduce((a,b) => a+b);
    return sum/numbers.length;
}
const Average = () => {
    const [list, setList] = useState([]);
    const [number, setNumber] = useState('')
    const inputEl = useRef(null);

    const onChange = useCallback(e => {
        setNumber(e.target.value);
    }, [])
    const onInsert = useCallback(() => {
        const nextList = list.concat(parseInt(number));
        setList(nextList);
        setNumber('')
        inputEl.current.focus();
    }, [number,list])
    const avg = useMemo(() => getAverage(list), [list])

    return(
        <div>
            <input value={number} onChange={onChange} ref={inputEl}/>
            <button onClick={onInsert}>등록</button>
            <ul>
                {list.map((value,index)=> <li key={index}>{value}</li>)}
            </ul>
            <div>
                <b>평균값:</b> {avg}
            </div>
        </div>
    )
}
export default Average;

ああ...辛い