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

2019-09-17 admin

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

[转载]原文链接:https://segmentfault.com/a/1190000020399677

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-75267.html

文章标题:react 全家桶 实现 淘宝返利提现小项目

相关文章
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
Facebook发布React Native!
React.js Conf 2015会议上,Facebook发布了React Native。 React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。 React中,把一切东西都看成组件,而且所有组件...
2015-11-12
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
回到顶部