[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の変更によってクエリーが失われることはありません.