0.img标签必须自是结束标签
1.在public的index.HTML里配置rem适配
2.配置css预编译,less
3.获取数据问题
4.获取数据用map遍历
5.查看redux工具需下载插件，包装store就可以看见工具
6.定时器
7.reducers整合多个函数
8.props数据传递（vue/react）
9.浅拷贝和深拷贝
10.react更新状态
11.二级路由问题
12.swiper轮播图问题
13.根据param.id取数据问题、更新状态问题
14.项目打包

0.img标签必须自是结束标签

如果有图片必须单独引入，写成标签形式，或者写成require 引入用commonenjs语法 Import logo from ‘./images/logo.png’ <img src={logo} alt=’logo’/> <img src={require(‘./images/1ogo.png’)} alt=’logo’/>

1.在public的index.HTML里配置rem适配

<script type="text/javascript">
  //rem适配
  (function () {
    let width=document.documentElement.clientWidth;
    let styleNode=document.createElement('style');
    styleNode.innerHTML="html{font-size: "+width/16+"px !important;}"
    document.head.appendChild(styleNode)
  })();
</script>

2.配置css预编译,less

两种方式配置less解析：
方式一：

1）下载 npm install --save-dev  babel-plugin-import  react-app-rewired   less@2.7.3 less-loader
2）修改配置 package.json
 package.json

"scripts": {
 	 "start": "react-app-rewired start",
 	 "build": "react-app-rewired build",
 	 "test": "react-app-rewired test --env=jsdom",
 	 "eject": "react-scripts eject"
	}

3）配置: config-overrides.js（在根目录上创建config-overrides.js的文件，把下面文件写入）

const {injectBabelPlugin, getLoader} = require('react-app-rewired');

const fileLoaderMatcher = function (rule) {
  return rule.loader && rule.loader.indexOf(`file-loader`) != -1;
}

module.exports = function override(config, env) {
  // babel-plugin-import
  config = injectBabelPlugin(['import', {
    libraryName: 'antd-mobile',
    //style: 'css',
    style: true, // use less for customized theme
  }], config);

  // customize theme
  config.module.rules[1].oneOf.unshift(
    {
      test: /\.less$/,
      use: [
        require.resolve('style-loader'),
        require.resolve('css-loader'),
        {
          loader: require.resolve('postcss-loader'),
          options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: 'postcss',
            plugins: () => [
              require('postcss-flexbugs-fixes'),
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),
            ],
          },
        },
        {
          loader: require.resolve('less-loader'),
          options: {
            // theme vars, also can use theme.js instead of this.
            modifyVars: {
              "@brand-primary": "#1cae82", // 正常
              "@brand-primary-tap": "#1DA57A", // 按下
            },
          },
        },
      ]
    }
  );

  // css-modules
  config.module.rules[1].oneOf.unshift(
    {
      test: /\.css$/,
      exclude: /node_modules|antd-mobile\.css/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: '[local]___[hash:base64:5]'
          },
        },
        {
          loader: require.resolve('postcss-loader'),
          options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: 'postcss',
            plugins: () => [
              require('postcss-flexbugs-fixes'),
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),
            ],
          },
        },
      ]
    }
  );

  // file-loader exclude
  let l = getLoader(config.module.rules, fileLoaderMatcher);
  l.exclude.push(/\.less$/);

  return config;
};

注意：如果出现cannot module。。。可能丢包了，只需输入npm install 就根据package.json文件自动下载了，以上就配置好了less预编译
方式二：

1）暴露出webpack的相关配置文件
npm run eject
可以在项目目录下看到config文件夹，其中的webpack.config.dev.js和webpack.config.prod.js分别是开发环境和生产环境使用的webpack配置文件
2）安装less和less-loader
npm install less-loader less --save-dev
3）修改开发环境配置
在webpack.config.dev.js文件里面修改，找到css的规则
修改三个地方
1.test: /.(css|less)
2.importLoaders: 2
3.添加 { loader: 'less-loader' }
{
    test: /\.(css|less)/,  // 添加less或者css
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 2,  // 改为2
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
      // 先处理文件添加less-loader
      {
        loader: 'less-loader'
      }
    ],
  }
4）生产环境也是同样的配置
1.test: /.(css|less)
2.importLoaders: 1
3.添加 { loader: require.resolve('less-loader')}

3.获取数据问题

1）获取数据在初始化（componentDidMount）里发送请求获取数据

 componentDidMount(){
    this.props.getHeadCateList('headCateList')
    this.props.getFocuslist('focuslist')
    this.props.getPolicydesclist('policyDescList')
    this.setState({
     headCateList:this.props.headCateList,
      focuslist:this.props.focuslist,
      policyDescList:this.props.policyDescList
   })

}

2）轮播图、better-scroll数据显示在更新后（componentDidUpdate）里再显示（注意：不要多次创建swiper用单例（判断实例对象，如果已经创建了就不用再次创建了，可以解决轮播图小圆点滑动问题）解决）

 （1）componentDidUpdate(){//单例解决
     if(!this.swiperId){
       this.swiperId=new Swiper('.swiper-container', {
         loop: true,
         // 如果需要分页器
         pagination: {
           el: '.swiper-pagination',
         }
       })
     }
  }
（2）//单例对象可以实现不重复创建，加判断
  if(!this.swiperId){//轮播图
    this.swiperId=new Swiper('.swiper-container', {
      loop: true,
      autoplay:true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      }
    })
  }
//单例对象可以实现不重复创建，加判断/新品首发
  if(!this.scrollId){//滑动图
    this.scrollId=new BScroll('.inner',{
      scrollX:true,
      eventPassthrough:'vertical'
    })
  }

3）数据获取后不显示问题，报错map is not undefined 必须先取出来判断一下，如果没有值就设置为初始值为空数组避免报错，同时取到数据了 render(){ let {focuslist}=this.props if(!focuslist){ focuslist = [] }

4）符号或语法错误（少标点符号）

5）获取数据（发送请求调用action中的请求函数）

componentDidMount(){
     this.props.getHeadCateList('headCateList')
     this.props.getFocuslist('focuslist')
     this.props.getPolicydesclist('policyDescList')
     this.props.getTaglist('taglist')
//跟新数据
     this.setState({
       headCateList:this.props.headCateList,
       focuslist:this.props.focuslist,
       policyDescList:this.props.policyDescList,
       taglist:this.props.taglist
     })
}

6）容器组件暴露给UI组件状态数据

export default connect(
  state=>({
    headCateList:state.headCateList,
    focuslist:state.focusList,
    policyDescList:state.policyDescList,
    taglist:state.taglist
  }),
  {getHeadCateList,getFocuslist,getPolicydesclist,getTaglist}
)(Recommend)

7）数据里嵌套数据（多层取数据）问题

一层一层存变量，判断没获取数据时就置为当前数据类型，避免初次取不到数据没有数组或对象的方法
render(){
  let {banner,column,recommend,tenfifteen}=this.props
  if(!recommend.recommendBanner){
    recommend.recommendBanner={}
  }
  if(!recommend.recommends){
    recommend.recommends=[]
  }
  if(!recommend){
    recommend = {}
  }
  let recommends = recommend.recommends
  if(!recommends){
    recommends = []
  }

4.获取数据用map遍历

<ul className="new_wrapper" >
  {
    newItemList.map((newitem,index)=>(
      <li className="item_slide" key={index}>
        <img src={newitem.listPicUrl} alt=""/>
        <div className="item_slide_fold">
          <span>{newitem.name}</span>
        </div>
        <div className="item_slide_small">
          <span>{newitem.simpleDesc}</span>
        </div>
        <div className="item_slide_pay">
          <span>￥{newitem.retailPrice}</span>
        </div>
      </li>
    ))
  }
</ul>

5.查看redux工具需下载插件，包装store就可以看见工具

npm install --save redux@3.7.2 react-redux redux-thunk

npm install --save-dev redux-devtools-extension

store: redux/store.js

/*
redux最核心的store对象模块
 */

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import reducers from './reducers'

export default createStore(reducers, composeWithDevTools(applyMiddleware(thunk)))

6.定时器

定时器

7.reducers整合多个函数

import {combineReducers} from 'redux'
import {RECEIVE_COLUMN} from './action-types'

或者写成switch case
function headCateList(state=initHeadCateList,action) {

/*switch (action.type){
  case RECEIVE_HEADCATELIST:
    const headCateList=action.data
        return headCateList
  default:
    return state
}*/
}

reducers整合多个函数

8.props数据传递（vue/react）

父标签向子标签传递数据，通过props标签属性传递的数据特点：只读不可修改的，实际上是可以修改的，我们可以通过控制台看到他的改变，但是因为props传递，实际上他是引用传递存在堆空间内，属于浅拷贝，如果改变了数据会影响之前的数据，所以一般我们说它只读不能修改

9.浅拷贝和深拷贝

浅拷贝和深拷贝

类型存在内存数据类型程度特点值传递栈内存基本数据深拷贝（好）不改变原来的数据引用传递堆内存对象，数组，函数浅拷贝（不好）会改变原来的数据，不建议修改

10.react更新状态

ClassNav里数据里必须更新状态this.setState({})它是异步的，需要有成功的回调，里面写，发布消息，这样才能更新 state={//相当于vue中的data currentIndex:0 } goNav=(obj)=>{ const {path,index}=obj this.props.location.pathname===path this.setState({ currentIndex:index }) PubSub.publish(‘navData’,this.state.currentIndex) console.log(‘publish’,this.state.currentIndex); }

11.二级路由问题

Main管理多个路由组件一级路由下面写二级路由 switch只会匹配唯一一个路由，所以可以写二级路由，复用二级路由问题

12.swiper轮播图问题

//避免多次创建，销毁他（相当于单例，比单例更彻底） if(this.swiperId){ this.swiperId.destroy() } this.swiperId = new Swiper(‘.swiper0’, { loop: true, slidesPerView: ‘auto’ })

//单例对象可以实现不重复创建，加判断 /* if (!this.swiperId) { this.swiperId = new Swiper(‘.swiper0’, { loop: true, slidesPerView: ‘auto’ }) }*/

13.根据param.id取数据问题、更新状态问题

1）头部切换问题,在路由后占位id，获取数据，利用find方法找到每一项的id

param取数据问题

2）头部数据更新问题，setState是异步的，所以写在回调函数里，更快获取数据，保存在sessionStorage中，利用requestAnimationFrame，一直请求浏览器，有空的时候在执行回调函数，利用递归查找，条件判断找到所有，不停循环更新头部切换问题

3）在居家子组件的this.props.match.params.id上添加一个id属性，转为数字型，获取数据，在数据中查找每一项的id让每一项的id等于在params上的id（item.id===id） jujia

4）然后对应显示数据就可以了 jiujia1

14.项目打包

可以看到build打包后文件里index.html在浏览器打开可以看见状态样式就找到了 package.json里最后，加配置下面一句话

}, “homepage”: “./” }

React项目要知道的事