Reactjs系列二reactjs進階須知

前言

上一節複習reactjs的基礎知識，本節主要了解reactjs中一些高階用法。

新概念hook

簡介

什麼是hook：可讓你在不編寫 class 的狀況下使用 state 以及其餘的 React 特性。而且徹底向後兼容，對老項目沒有多大影響。

爲何要使用hook：

• 在reactjs提倡使用函數式編程，而hook能夠在函數中使用state等類中才能使用的屬性
• 解決了在組件之間複用狀態邏輯很難
• 解決了class編寫的組件難以理解，以及編譯較慢的問題

hook使用規則

• 只能在函數最外層調用 Hook。不要在循環、條件判斷或者子函數中調用。
• 只能在 React 的函數組件中調用 Hook。

高階組件（HOC）

• 概念：是基於reactjs的組合特性而造成的一種設計模式。
• 與普通組件的區別：組件是將 props 轉換爲 UI，而高階組件是將組件轉換爲另外一個組件。
• 與類組件的區別：類組件有生命週期，this，state。高階組件沒有。另外類組件須要實例化更佔用內存。
• 優勢：HOC 不會修改傳入的組件，也不會使用繼承來複制其行爲。相反，HOC 經過將組件包裝在容器組件中來組成新組件。HOC 是純函數，沒有反作用。

注意事項（先記着不要這樣寫，緣由咱們下節在講）

• 不要在 render 方法中使用 HOC：這個我看了幾遍官方文檔才明白緣由。
• 務必複製靜態方法：請使用使用 hoist-non-react-statics
• Refs 不會被傳遞

虛擬dom概念簡介

• 概念：將Dom元素以相應的Object對象數據格式化來進行頁面渲染，此種Object對象稱爲虛擬DOM。
• 特色：實現頁面局部刷新大大節省了瀏覽器的內存空間。
• 技術難點：Dom的diff算法
• reactjs實現：生成vNode---->渲染成真實節點 --------->掛載到頁面--------->diff比較
• diff算法：當頁面更新時會產生新對象，比較新舊對象區別的算法咱們稱爲diff算法，其也是實現視圖局部更新的基礎

單元測試簡介（後面會有單獨的章節來談這塊）

• 常見測試工具：Jest，Enzyme
• Jest簡介：Jest是 Facebook 發佈的一個開源的、基於 Jasmine 框架的 JavaScript單元測試工具。
• Enzyme簡介：Airbnb開源的React測試類庫

相關生態簡介

• redux簡介：Redux是一個數據狀態管理插件。
• mobx簡介：與redux同樣是兼容reactjs實現全局狀態的存儲和管理。
• react-router簡介：reactjs項目中前端路由的控制。
• reactjs相關ui庫：Material-UI、Ant-design ...

其餘

設置按需加載UI庫

• react-app-rewire和customize-cra在配置文件config-overrides.js

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
   }),
);
複製代碼

create-react-app環境變量配置

• create-react-app提供了接口eject，能夠自定義配置文件

//項目根目錄運行
  npm run eject
複製代碼

• 第一種方法是不可逆的不建議使用，可使用npm包react-app-rewire增長.env.文件

//package.json文件中
react-scripts start --mode ***//指定環境
複製代碼

總結

本節主要介紹了深刻了解reactjs須要掌握的知識點，下面的章節主要都是圍繞這塊進行展開。