[React] React component re-render 觸發點

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

[CSS] Flex order 排序 – 負整數、零、正整數，誰先誰後？

根據 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 會在下面

[React 研究會]Ref 傳到子層還是 Ref嗎？

前情提要，先備知識：關於 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