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(){}