乐趣区

react-全家桶-实现-淘宝返利提现小项目

jiezi

第一次真正使用 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 完整的项目，同时写一下个人感悟
退出移动版