[220418]_TIL


今日の目標
  • constとconst[]原理:構造分解割当
  • オブジェクトからデータを削除しようとするrestパラメータ
  • HOCはクラス向けカスタムHooks
  • ではなくキャッシュ-
  • を変更
  • 分割配分
    ==非構造化割付
  • const child = {
    名前:「撤退」、
    age:13,
    school:「リス小学校」
    }
    const name = child.name
    const age = child.age
    const school = child.school
    非構造配分
    const { name, age, school } = child
    const { data, loading} = useQuery(FETCH_BOARDS)
    		// 함수 실행후 return 값이 객체
    ===
    const aaa = useQuery(FETCH_BOARDS)
    aaa.data
    aaa.loading
    クラスメイト
    const child1 = classmates[0]
    撤退する
    const child2 = classmates[1]
    英姫
    const child3 = classmates[2]
    /勲
    const [child, child2, child3] = classmates
    構造分解の割り当て
    const [state, setState ] =useState("")
    //関数、戻り値が配列
    == const [counter, setCounter]
    構造分解を割り当てない場合
    const bbb = useState("")
    bbb[0] = counter
    bbb[1] = setCounter
    bbb 1 ===
    counter === 20
    しかし、あなたがそう書かなければ、私は狂人の声を直接聞いた.
    useQuery Winry
    function useQuery(aaa){
    //aaaが初期値
    return {
        data: {
            fetchBoard : {
                writer: "철수",
                title: "제목입니다.",
                contents: "내용입니다."
            }
        },
        loading: "로딩중"
    }
    }
    undefined
    useQuery("FETCH_BOARD")
    {データ:{...},ロード:[ロード中]}
    data: {fetchBoard: {…}}
    ≪ロード|Load|ldap≫:「≪ロード中|Load In|ldap≫」
    [[Prototype]]: Object
    const {data, loading} = useQuery("FETCH_BOARD")
    アレイ構造分解分配原理
    クラスメイト
    undefined
    const child1 = classmates[0]
    undefined
    child1
    撤退する
    const [] = classmates
    undefined
    const [, child2, child3] = classmates
    undefined
    useStateの原理を理解する
    function useState(aaa){
    constmyState=aaa//を初期値とする
    const setMyState = (bbb) => {
    console.log( state를 ${bbb}로 바꿔줄게!! )
    }
    return [myState, setMyState]
    }
    undefined
    const [count, setCount] = useState(10)
    undefined
    setCount(20)
    stateを20に変えます!
    オブジェクト構造分解で割り当てられたキー値が重要
    順序は重要ではない
    アレイ構造分解割当の名前は、AAAでもStateでも重要ではありません.
    ただし,順序が重要であるため,割り当てなくてもスペース和を入力しなければならない.
  • RESTパラメータ
  • オブジェクトから特定のキー値をクリアしたい場合.
    deleteを使えばいいのに...
    const child = {
    名前:「撤退」、
    age :8,
    school:「リス小学校」
    money: 2000,
    趣味:「水泳」
    }
    delete child.money
    delete child.hobby
    やるとお金や趣味は消されますが、思いがけないミスが起こります.
    元のファイルが削除されるからです.
    したがって,原本に触れない方法で削除する必要がある.
    この場合はRESTパラメータを使用します
    const{money, hobby, ...rest} = child
    ====money、趣味を構造分解に単独で割り当てる
    ...restは上以外の人に構造分解を割り当てる.
    rest
    {name:「撤退」,age:8,school:「リス小学校」}
    元のオブジェクトに触れずにオブジェクトを削除します.
    必ずしもrestと呼ぶ必要はありません
  • custom hooks
  • ホックって何?
    useで始まる
    この人たち.
    function useAaa(){
    }
    //use存在
    同じもの
    その関数です
    fucntion bbb(){
    }
    //useなし
    ここで、違いは、useaa()のような関数は、内部的にusState、useEffectなどを用いた関数であり、custom hooksと呼ばれる
    useaa()におけるuseの貼り付けの有無にかかわらず、貼り付けたほうがよい
    ※括弧が2つある場合はawaitに最も近い括弧にasyncを貼り付けます
  • apollo cache修正
  • 無限スクロールに適したページ
    複雑なのにどうしてするの?
    規模が拡大するにつれて、cacheの変更によってクエリーが失われることはありません.