達人專欄前言：
成果(美化之前)：
使用componentDidMount
React生命週期中，componentDidMount是在render()結束後呼叫，可用於建立該元件的基本參數(shù)，在此用來呼叫抓取DOM物件 (因為在render之前該DOM物件並不存在)。
設定React Component 預設值
在上面我們創(chuàng)了一個繼承自React.Component的類別AvatarEditor。
設定該元件的預設值可使用類別.defaultProps
畫四個角的控制器
如圖繪製代表控制點的黑色方塊。
其中rectSize 代表扣掉控制點大小後，實際的內部rect大小。須從內部繪製控制點才不會突出範圍。
拖拉控制
透過控制對角線的x與y的位置，一同移動其餘的三個控制點。
拖拉位置
透過改變與父物件相對位置的top,left值實現(xiàn)移動的效果。
加入拖拉判斷與事件：
同步操作縮圖位置
同樣在操作預覽圖片的top,left值達到效果。
如何使用?
先宣告全域變數(shù)previewResult 乘載編輯結果。
並透過按鈕呼叫本元件的callback方法。
還記得我們在設定元件初始值的時候宣告了onsubmit方法當作傳入參數(shù)。在執(zhí)行建構子時將該方法參數(shù)連接本程式的方法。
注意等號左邊的是傳入的callback方法參數(shù)(property)，右邊的是本程式碼的方法。
至此，本元件腳本結束。
外部呼叫
呼叫開啟編輯器：
將useState()方法當作參數(shù)傳入，使在元件裡面和下確認後能更新資料給外部元件。
透過更新圖片大小、上下錨點呈現(xiàn)效果。
注意圖片大小是紀錄縮放百分比例而不是固定的px數(shù)值，如此在不同大小的物件下才能正常顯示。 (例如：編輯頁面的預覽圖片大小是300*300px，但在小屋清單上是200*200px，若紀錄的是圖片的px數(shù)值，則會發(fā)生跑版)
完成~
秀一下目前美化過的版本
網站開幕了，開心
碎碎念：
昨天打完疫苗，今天整天的頭昏昏的，所以就來打網頁吧，打完腦袋都不痛了
