react手機端專案注意點,ant design-mobile框架

1.先新建一個專案，下載匯入react, react-dom, react-router-dom包，如果使用sass預編譯就下載匯入node-sass,並用字尾名.scss(常用), .sass字尾名檔案，哪裡需要在哪匯入sass樣式檔案

2.父路由與巢狀子路由

3.TabBar選單欄的切換選中高亮

this.props.location.pathname
注意： 由於這是個父子巢狀路由，如果在子路由裡面改變了瀏覽器localtion,pathname的值後，父路由中的選單欄沒有與之對應選中高亮，那麼就需要用到update鉤子函式

/* 
  問題：點選首頁導航選單，導航到 找房列表 頁面時，找房選單沒有高浪 
  原因：原來我們實現該功能的時候，只考慮了 點選以及第一次載入 Home 元件的情況
    但是，我們沒有考慮不重新載入Home元件時的路由切換，因為，這種情況下，程式碼沒有覆蓋到
  解決： 在路由切換時，也執行 選單高亮 的邏輯程式碼
    1 新增componentDidUpdate 鉤子函式
    2 在鉤子函式中判斷路由地址是否切換
    3 在路由地址切換時，讓 選單高亮
*/
componentDidUpdate (prevProps) {
  // 拿到上一個更新值 prevProps
  // 拿到本次更新的值 this.props
  if (prevProps.location.pathname !== this.props.location.pathname) {
    // 路由發生了改變，那麼就設定當前高亮值
    this.setState({
      selectedTab: this.props.location.pathname
    })
  }
}

4.輪播圖的坑：輪播圖要有預設值，如果沒有預設值就會有bug

解決方法：
設定一個布林狀態值，當輪播圖資料獲取完成後再把這個值設定為true,再進行渲染輪播圖，每執行一次this.setState({})方法時，都會重新渲染render(){}