前言：根據公司業務的要求，我最近用react寫了一個專案，已經上線，把道路中遇到的一些坑和一些專案中的經驗分享和大家共勉。
***這是目錄結構***

當然結構是根據自己專案的複雜程度來定義的，但是大體上都是這樣。

1.技術選型

為什麼我要選擇react，首先我看重的是他的單向資料流，他是和js單執行緒保持一致的，然後是因為畢竟是facebook團隊來維護，準確性和可信度就不用說了。最後從2013年react釋出到現在也四年了，坑踩得差不多了。

2.專案的前期準備

先搞個react+react-router+webpack能跑起來的demo，helloworld也可以，具體可以參照官網或http://www.ruanyifeng.com/blog/2015/03/react.html，http://www.ruanyifeng.com/blog/2016/05/react_router.html   
 

3.專案的實戰

根據頁面和頁面的邏輯建好符合自己的資料夾，開始畫頁面了，這裡邊有幾點注意的也是我做的時候遇到的問題：

（1）css在react中的寫法

，網上有很多的例子比如css in js ,CSS Modules,我覺得都不夠靈活，和之前我們的寫法差別太大，我是採用直接引入css的方式來做的

import React from 'react';
import '../../css/ious.less';
export default class IousAgreement extends React.Component {
    render() {
        var a = ['a'
 
,'b','c']
        return (
            <div>
                {a.map((item,index) => {
                    return <p key={index} className="txt">this is{item}</p>
                })}
                這是協議頁面
            </div>
        );
    };
    componentDidMount(){
        document.title = '協議'
 

    }
}

less裡邊還是按照咱們以前的方式寫，很爽，當然這離不開神器webpack

{ test: /\.less$/, exclude: /node_modules/, loader: 'style-loader!css-loader!postcss-loader!less-loader' },

網上很多webpack的配置，webpack2的官網也很詳細，建議大家看下

（2）fetch低端機不能發出請求

ios低端機和紅米手機有問題，主要是profill的問題，所以在請求裡需加上。

require('es6-promise').polyfill();
require('isomorphic-fetch');

然後在使用fetch

（3）後端返回maplist物件

前端處理習慣陣列了，後端有時候會給你返回list物件,那麼前端就需要通過先獲取object中的key然後遍歷key來獲取value.

    let list = Object.keys(tf).sort().reverse().map((name, indexs) => {
      return <div key={indexs}>
        <div class="popup-title">{name}</div>
        <ul>
          {group_bills[name].map((item, index) => {
            return <li key={index} onClick={this.reloadPage.bind(this, item.billId, item.billMonth)}>
              <p>
                <i>{item.serNo.slice(-2)}月賬單</i>
              </p>
              <span class="iconfont icon-icon-angle-right"></span>
            </li>
          })}
        </ul>
      </div>
    })

（4）心中時刻想著狀態驅動資料變化

不要總想著通過dom 獲取，儘量使用state來驅動檢視的變化,例如：

{
    this.state.amount
    ?
    <div class="detail-tip">有退款{this.state.amount}元，已退回</div>
    :
    ''
}

（6）react-router2.X ios機子上頁面一直處於載入中

router後邊的引數導致？k_123之類的，去掉就好了

import { Router, useRouterHistory ,Route, IndexRoute} from 'react-router'
import { createHashHistory } from 'history'
// useRouterHistory creates a composable higher-order function
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })

（6）自己封裝的js引入

webpack中配置
const CopyWebpackPlugin = require('copy-webpack-plugin');//處理自己封裝的js
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'src/js/encrypt'),
        to: 'static/encrypt',
        ignore: ['.svn']
      },
      {
        from: path.resolve(__dirname, 'src/js/utils'),
        to: 'static/utils',
        ignore: ['.svn']
      }
    ])

jsx中引入圖片，要使用require

<img src={require('../../images/noious.jpg')}

東西還有很多，我這裡主要和大家分享這六點,歡迎大家拍磚

4專案的總結
其實還有很多的細節，但是其他的解決起來谷歌很快能找到，我就不一一贅述了。整個專案邏輯還算可以所以沒有引入react-redux,後期我會加入再和大家分享。