Please enable JavaScript.

Coggle requires JavaScript to display documents.

React (React UI (React Suite (为后台产品而生, 支持 Typescript, 支持服务端渲染), React…

- - - - 16k+ 的 stars(2019.12.6)
- - - - 類似 HTML Attribute
    - - setState 修改狀態
- - - - 每個節點轉換成函數
    - - React.createClass
      - React.createElement
  - - - 熟悉性
        
        結構可視化呈現
        
        適合席官標籤語言的開發人員
      - 語意
      - 可視化
        
        樹狀結構
      - 抽象化
        
        語法傳換過程
      - 關注點分離
  - - - 指向子元件的參考
    - - 可用來判斷重用或銷毀
      - 提高渲染效率
  - - - 依循html的事件處理
    - - 大寫駝峰
        
        組件名稱
      - 小寫駝峰
        
        其他
      - 只要開頭為 use 的函式，就表示它是個 "Hook"
    - - WHY
        
        避免clssName衝突
        
        每個組件都是獨立可被重複使用
        
        可以把 JS 中的一些邏輯判斷放到 CSS 使用
      - What
        
        CSS 寫在 JS
        
        把樣式連同組件寫在一起寫法
      - How
        
        styled-components
        
        目前使用人數最多
        
        2016年開始
        
        emotion
        
        後勢看漲
        
        2017年開始
        
        套件
        
        emotion/core
        
        emotion/styled
    - - props
    - - 受 React 所控制的資料（Controlled）
        
        把表單的資料儲存在該 React 組件內交給他來處理
        
        先透過 useState 來建立保存資料狀態的地方
        
        在表單元素上透過 onChange 事件來取得該表單元素當前的值
        
        更新到 React 組件的資料狀態內
      - 不受 React 所控制的資料（Uncontrolled）
        
        想要很簡單的去取得表單中某個欄位的值
        
        直接操作 DOM
        
        使用 useRef
        
        資料變化不會觸發重新渲染
      - React 會建議我們使用 Controlled Components
        
        除了上傳檔案用的 <input type="file" /> 例外
        
        因為該元素有安全性的疑慮
        
        JavaScript 只能取值而不能改值
        
        只能透過 Uncontrolled Components 的方式處理
- - - - useEffect的dependencies為函數時用
      - 用來在 dependencies 沒有改變的情況下，把某個 function 保存下來
    - - 監控狀態異動
    - - 渲染後更新數據用
      - 啟動後從遠端抓取資料
      - 數據提取、訂閱、或手工改變來自 React 組件的 DOM。我們稱這些操作為「副作用（side effect）」
    - - 在 dependencies 沒有改變的情況下，把某個運算的結果保存下來
      - 避免重複運算
      - 不應該產生任何Effect
    - - current 屬性可以取得預設值或更動後的值
      - 建立並回傳一個帶有 current 屬性的物件
      - 可以幫助開發者，即使在組建重新渲染後，仍可以去取得同一個物件，並取出內部的值來用
      - 可以在 Functional Component 中定義不會導致畫面重新渲染的變數
  - - - 更容易复用代码
      - 清爽的代码风格
      - 代码量更少
      - 更容易发现无用的状态和函数
      - 更容易拆分组件
    - - 状态不同步
      - 副作用代码从主动式变成响应式