react 全家桶 實現 淘寶返利提現小項目

第一次真正使用 react 去做一個小項目，可能有使用的不合理的地方,可以在 issue 中提意見，以下記錄了項目實現過程中遇到的問題。

---

項目介紹

項目地址：https://github.com/yuanyuansh...

模仿現在比較火的，淘寶返利公衆號的功能，包含訂單頁面，已付、待反利、已反、已失效，提現頁面，提現記錄以及登錄頁。其中部分頁面&使用方式參照react-pxq項目,star 數量 6359 很有參考意義

1.使用 react 創建頁面 √

2.使用 react-router-dom 實現路由 √

3.使用 props-type 做屬性檢查 √

4.搭建 mock server 模擬數據請求 √

5.使用 redux 實現狀態管理 √

6.使用 Immutable

7.項目中添加異步請求

8.redux 中添加異步請求

---

項目使用

npm start

在開發環境運行

瀏覽器打開http://localhost:3000可訪問

npm run build

將工程打包到 build 目錄下

npm run eject

create-react-app 本身的 webpack 配置文件存在於 node_modules/react-scripts/目錄下面，但是這個目錄是 node_modules/，裏面的源碼都是不建議修改的。create-react-app 提供了 eject 命令，用於釋放這些配置。

而且 create-react-app 並不推薦大家這麼做，因爲這個步驟無法逆轉！

npm run eject 之後，react-scripts 命令就失效了哦。因爲在 node_modules/下面，都沒有 react-scripts/的目錄了，它以另外的形式存在於這個項目裏面了。

---

項目 UI 組件

使用 Ant Design ，相比原生 Html 能快速搭建頁面，更專注於 react 相關技術的學習，其實寫的是 app 端的淘寶返利一個小項目，後來發現應該使用 Ant Design Mobile 來做移動端的，不過不要緊，我們的注意力不在頁面適配上。

---

React 開發者工具

下載 chrome 插件，方便 react 項目代碼調試

---

React 類型檢查

react 的類型檢查 PropTypes 自 React v15.5 起已棄用，請使用prop-types

JavaScript 是一門弱類型的語言，允許變量類型做隱式轉換。也正是因爲這個特性，JavaScript 中有很多錯誤都是類型錯誤導致的。爲了減少這種錯誤，我們可以在 React 中引入類型檢查模塊。

常用的檢查類型有一下幾種：

// 屬性可以聲明爲 JS 原生類型
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol

---

react-redux 狀態管理

React-Redux 將所有組件分成兩大類：UI 組件（presentational component）和容器組件（container component）。

UI 組件負責 UI 的呈現，容器組件負責管理數據和邏輯

UI 組件

• 只負責 UI 的呈現，不帶有任何業務邏輯
• 沒有狀態（即不使用 this.state 這個變量）
• 所有數據都由參數（this.props）提供
• 不使用任何 Redux 的 API

容器組件

• 負責管理數據和業務邏輯，不負責 UI 的呈現
• 帶有內部狀態
• 使用 Redux 的 API

connect

React-Redux 提供 connect 方法，用於從 UI 組件生成容器組件。connect 的意思，就是將這兩種組件連起來。

// CashOut.jsx
import { connect } from 'react-redux'
class CashOut extends Component {}
export default connect(
  state => ({
    cashInfo: state.cashInfo
  }),
  { addToCashList, resetUseMoney }
)(CashOut)

爲了定義業務邏輯，需要給出下面兩方面的信息。

• 輸入邏輯：外部的數據（即 state 對象）如何轉換爲 UI 組件的參數
  eg：cashInfo
• 輸出邏輯：用戶發出的動作如何變爲 Action 對象，從 UI 組件傳出去。
  eg： addToCashList resetUseMoney

Provider 組件

connect 方法生成容器組件以後，需要讓容器組件拿到 state 對象，才能生成 UI 組件的參數。
React-Redux 提供 Provider 組件，可以讓容器組件拿到 state。

import { Provider } from 'react-redux'
import store from '@/store/store'

const render = Component => {
  ReactDOM.render(
    //綁定redux、熱加載
    <Provider store={store}>
      <Component />
    </Provider>,
    document.getElementById('root')
  )
}

render(Route)

---

mock server 搭建

使用 mocker-api coss-env

在 webpack-dev-server 的 before 鉤子函數中搭建服務器

運行：npm run start-mock

訪問：localhost:3000/api/getExtractList 查看數據

---

問題記錄

函數傳參數保留 event

<p className="my-drawer" onClick={this.goTo.bind(this,'/home')} >首頁</p>

  goTo (path,e){
    this.setState({
      visible: false,
    });
    this.props.history.push(path)
  };

子組件修改父組件中 state 方法

爲了實現需求網上搜到一種，就用在項目中。看到 React 官方文檔上提供的【狀態提升】溫度的例子，也是通過父組件提供函數，以 pros 形式傳遞給子組件，子組件調用 props 來修改父組件的 state。

父組件代碼如下：

class CashOut extends Component {
  // 在父組件中定義可以改變state值得函數
  transferVisible(visible) {
    this.setState({
      visible
    })
  }
  // 把transferVisible函數作爲屬性傳遞給Dialog子組件上 如 transferVisible
  render() {
    return (
      <div>
        <Dialog
          title="提現成功"
          des="您以提現成功，可到提現記錄中查看"
          visible={this.state.visible}
          transferVisible={visible => this.transferVisible(visible)}
        ></Dialog>
      </div>
    )
  }
}
export default CashOut

子組件代碼如下：

class Dialog extends React.Component {
  // 點擊確認和取消時 調用props修改父組件state值
  handleCancel = () => {
    this.props.transferVisible(false)
  }
  render() {
    return (
      <div>
        <Modal
          title={this.props.title}
          visible={this.props.visible}
          okText="確認"
          cancelText="取消"
          onOk={this.handleCancel}
          onCancel={this.handleCancel}
        >
          <p>{this.props.des}</p>
        </Modal>
      </div>
    )
  }
}
export default Dialog

---

參考

1. create-react-app 工程，如何通過 eject 釋放配置文件？
2. React-Redux 的用法
3. Redux 官方文檔
4. react-redux 工作原理
5. Immutable 介紹學習
6. Redux 中文文檔
7. 前端技術總結 Redux 部分
8. 初學者的 React 全家桶完整實例
9. 關於 React 全家桶的介紹
10. React 學習系列——prop 和 state
11. react-router 之嵌套路由
12. create-react-app 入門教程
13. react 中使用 prop-types 檢測 props 數據類型
14. react 中文文檔
15. react-pxq
16. react + redux 完整的項目，同時寫一下個人感悟