[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)
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が初期値
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(
}
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の変更によってクエリーが失われることはありません.
==非構造化割付
名前:「撤退」、
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でも重要ではありません.
ただし,順序が重要であるため,割り当てなくてもスペース和を入力しなければならない.
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と呼ぶ必要はありません
useで始まる
この人たち.
function useAaa(){
}
//use存在
同じもの
その関数です
fucntion bbb(){
}
//useなし
ここで、違いは、useaa()のような関数は、内部的にusState、useEffectなどを用いた関数であり、custom hooksと呼ばれる
useaa()におけるuseの貼り付けの有無にかかわらず、貼り付けたほうがよい
※括弧が2つある場合はawaitに最も近い括弧にasyncを貼り付けます
複雑なのにどうしてするの?
規模が拡大するにつれて、cacheの変更によってクエリーが失われることはありません.
Reference
この問題について([220418]_TIL), 我々は、より多くの情報をここで見つけました https://velog.io/@acwell94/220418TILテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol