vscode 內建有 emmet，僅需添增設定，即可使用。
setting.json
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true
https://stackoverflow.com/questions/39320393/jsx-or-html-autocompletion-in-visual-studio-code
使用請見
遇到的問題：
製作 animation 時，希望hover 主項目後，子項目動畫淡出；
但子項目在未出現前，不希望被滑鼠偵測到，也就是希望子項目元素 hover 不存在
下列為使用 visibility 達成以上需求的範例
visibility :
隱藏元素但保持元素的浮動位置
被設置為 hidden 的時候，元素雖然被隱藏了，但它仍然佔據它原來所在的位置，
會影響後續元素的版面配置
display :
移除元素
被設置 none，這時元素實際上就從頁面中移除，它下面所在的元素就會被自動補齊，
後續元素不會受其影響
Reference
實例分析CSS屬性Display與Visibility不同
Animation CSS3: display + opacity
Component 中任一 state 、 props 狀態更新，即會整個 component 重新 render ，但 React 底層做法，會根據 dom 去比對實際需要更新哪些 dom ，詳細請見 React Document 關於 一致性比較 ( Reconciliation )
Reference : https://lucybain.com/blog/2017/react-js-when-to-rerender/
關於 Render 的測試
任一 state 變動，會觸發整個 component re-render ，但比對後無需變動的 state 則會維持現有值， ref 則完全存在於 render’s life cycle，不論 re-render 幾次，值都會持續存在；除非整個 component 重新 mount
根據 MDN說明：
You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave the order of all other items unchanged, you can give that item an order of
-1. As this is lower than 0 the item will always be displayed first.
由平面y軸來看，由上而下的順序為，負整數（-2） > 負整數 -1 > 零 > 正整數 (1) > 正整數 (2)
*負整數越大越前面
如果數字相等，則由圖層概念來看，依照 element 順序排列
ex:
<div> First Element </div>
<div> Second Element</div>
則 First Element 會在上面，Second Element 會在下面
前情提要，先備知識：關於 Assignment(賦值) 這檔事
https://medium.com/%E4%B8%80%E5%80%8B%E5%B0%8F%E5%B0%8F%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E9%9A%A8%E6%89%8B%E7%AD%86%E8%A8%98/%E9%97%9C%E6%96%BC-assignment-%E8%B3%A6%E5%80%BC-%E9%80%99%E6%AA%94%E4%BA%8B-5f987e5700a0
如題，Ref傳到子層還保有Ref的特性嗎？
是！！！！！！！
因此可以透過這個特性，傳遞到子層，不論是子層或父層更新，兩邊都會同步更新，基本上是同一個Ref
並且不論子層或父層整個重新 render ，依舊會根據 Ref 特性而存在
以下為測試 code
需要注意的是，轉傳 refs 到 子層的DOM 组件，component 需要掛載 React.forwardRef ，在子層才能使用
詳細可參考官方文件說明 FowardRef
.zshrc..bash_profile to .zsh將原本放在 .bash_profile的指令，通通搬到 .zsh
重開 terminal，輸入 nvm -v ，測試成功！
API Doc :
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
這個Web API幫你監控瀏覽器的捲軸事件，讓我們不需要自己寫傳統的
document.scroll 等事件
在網上找了幾個react hook的範例，以下為我主要參考的範例code
Reference:
https://billyjacoby.dev/intersection-observer-react-hooks
以下為我改良後的版本，
製作成自定義的Hook，
需求： 在scroll 到 loading 時，會再call API，fetch更多的 data 回來
製作原理： 捲軸捲到target 元素時(捲軸與target 元素產生%數的交集)，進入可視範圍，則do something…
%數可藉由 threshold: 1 來設定，
0~1，1為100%可視
參數 -u 等同於 --set-upstream，設定 upstream 可以使分支開始追蹤指定的遠端分支
只要做過一次 git push -u <remote name> <branch name>，並且成功 push 出去；本機端的 master 就會被設定去追蹤遠端的 <remote name>/<branch name> 分支
設定好 upstream 後，第二次以後要上傳分支時，就只需要透過 git push 就可以了，不必再帶 <remote name> 跟 <branch name> 等參數
git push -u <remote name> <branch name>git push --set-upstream <remote name> <branch name> 意義同上EX:
git branch --set-upstream origin sprint
https://zlargon.gitbooks.io/git-tutorial/content/remote/upstream.html
<p>这是上面代码的实现<br />
我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
<span data-descr="small popups which also hide again">提示</span>。<br />
把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
</p>span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}
span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}content: " 內容有無值，決定此元素是否會出現
attr() : 於css中，用以取得特定element值的function
搭配自定義element, data-xx
content中·得已取得父元件的data-xx，接著再彈性的操控此data-xx的值
即可達成動態文字
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after
https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html
http://www.webhek.com/post/css-content-and-attr.html
**不支援input
ES5 : Array.prototype.slice.call(arguments,0)
function list() {
return Array.prototype.slice.call(arguments);
}
console.log(list(1,2,3)); // [1, 2, 3]
var obj = {
'length':4,
1:'123',
2:'223',
3:'333'
}
console.log(list(obj)); // [ <1 empty item>, '123', '223', '333' ]
ES6 : …
function listNew(...args){ return args; } console.log(listNew(1,2,3)) // [ 1, 2, 3] same console.log(listNew(obj)); // [ { 1: '123', 2: '223', 3: '333', length: 4 } ] unexpected
參考：淺談javascript的Array.prototype.slice.call
function myFunction(x, y, z) {
console.log(x,y,z)
}
var args = [0, 1, 2];
//ES5
myFunction.apply(null, args); //1 2 3
//ES6
myFunction(...args); //1 2 3 same
concat:
var ary1 = [1, 2, 3];
var ary2 = [3, 4, 5];
var merge = [...ary1, ...ary2]; //[ 1, 2, 3, 3, 4, 5 ]
push:
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]
slice: 淺拷貝
var arr = [1, 2, 3];
//ES5
var arr3 = arr.slice(); //[1, 2, 3]
arr3.push(5) //[1, 2, 3, 5]
//ES6
var arr2 = [...arr]; // [1, 2, 3]
arr2.push(4); // [1, 2, 3, 4]
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 }; //copy
// Object { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 }; //merge
// Object { foo: "baz", x: 42, y: 13 } 若相同key，後者蓋前者
1. 將不定長度的參數以陣列的形式傳入函示
function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } console.log(sum(1, 2, 3)); // expected output: 6 console.log(sum(1, 2, 3, 4)); // expected output: 10 //多個參數也行 function test(a,...rest){ console.log(a,rest); //1 [ 2, 3, 4, 5 ] } test(1,2,3,4,5);
嗯嗯這邊的用法感覺跟argument很像，
官方文件也有寫到兩者的區別性：
arguments对象的区别剩余参数和 arguments对象之间的区别主要有三个：
arguments 对象包含了传给函数的所有实参。arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。arguments对象还有一些附加的属性 （如callee属性）。
參考：
跟著節奏搖擺的工程師 