安裝 create-react-app

打開電腦裡的終端機來進行 create-react-app 的套件下載

1

npm install create-react-app

建置一個 React.js 的專案

在終端機輸入 cd 你的資料夾名稱

1

npx create-react-app 專案名稱

//cd 專案名稱
npm run start
預設網域在 localhost:3000

JSX 瀏覽器看不懂？要翻譯就靠 Babel

1

npm install @babel/runtime --save-dev

</tr>

三考

長列表效能優化

1. 不做響應式:
   比如會員列表、商品列表之類的，只是純粹的資料展示，不會有任何動態改變的場景下，就不需要對資料做響應化處理，可以大大提升渲染速度。
   Vue3 裡則是新增了響應式flag
2. 虛擬捲動:vue-virtual-scroller、vue-virtual-scroll-list

v-for 遍歷避免同時使用 v-if

列表使用唯一 key

使用 v-show 複用 DOM

無狀態的元件用函數式元件

子元件分割

變數在地化:把會多次參照的變數儲存起來

第三方外掛按需引入

路由懶載入

keep-alive快取頁面

比如在表單輸入頁面進入下一步後，再返回上一步到表單頁時要保留表單輸入的內容、比如在列表頁>詳情頁>列表頁，這樣來回跳轉的場景等

我們都可以通過內建元件 來把元件快取起來，在元件切換的時候不進行解除安裝，這樣當再次返回的時候，就能從快取中快速渲染，而不是重新渲染，以節省效能

• 也可以用 include/exclude 來 快取/不快取 指定元件
• 可通過兩個生命週期 activated/deactivated 來獲取當前元件狀態

事件的銷燬

圖片懶載入:

推薦一個第三方外掛 vue-lazyload
v-LazyLoad 代替 src

SSR優化

i 修飾符是用來執行不區分大小寫的匹配。

g 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。

[a-z] //匹配所有的小寫字母

[A-Z] //匹配所有的大寫字母

[a-zA-Z] //匹配所有的字母

[0-9] //匹配所有的數字

[0-9\.\-] //匹配所有的數字，句號和減號

[ \f\r\t\n] //匹配所有的白字符

[^a-z] //除了小寫字母以外的所有字符

[^\\\/\^] //除了(\)(/)(^)之外的所有字符

[^\"\'] //除了雙引號(")和單引號(')之外的所有字符

^[a-zA-Z_]$ //所有的字母和下劃線

^a$ // 字母a

^a{4}$ // aaaa

^a{2,4}$ // aa,aaa或aaaa

^a{1,3}$ //a,aa或aaa

^[1-9][0-9]{0,}$ // 所有的正整數

^\-{0,1}[0-9]{1,}$ // 所有的整數

^[-]?[0-9]+\.?[0-9]+$ // 所有的浮點數

^[a-zA-Z0-9_]+$ // 所有包含一个以上的字母、數字或下劃線的字符串

^[1-9][0-9]*$ // 所有的正整數

^\-?[0-9]+$ // 所有的整數

^[-]?[0-9]+(\.[0-9]+)?$ // 所有的浮點數

26 個大小寫英文字母表示為 a-zA-Z

數字表示為 0-9

下劃線表示為 _

中劃線表示為 -

const myHeroes = ['蝙蝠俠','蜘蛛人','水行俠','黑寡婦'];
console.log(myHeroes.indexOf('蟻人'));
"沒有找到為-1" -1
console.log(myHeroes.indexOf('水行俠'));
//
//"索引2就是水行俠:" ,2

const age =20;
const result =( age>=18 ) ? true:false;
console.log( result )
// true

Promise.all

function promeseA (){
   return new Premise((resole,reject)=>{
       setTimeout(()=>{
        console.log('A')
        resole('A')
      },1000)
     
   })
}
function promeseB (){
   return new Premise((resole,reject)=>{
     setTimeout(()=>{
        resole('B')
      },3000)
     
   })
}

Promise.all().then(resole=>{
console.log('Promise.all',resole);
})

最终返回的结果
//“[object Array] (2) [“A”,”B”]