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 完整的项目,同时写一下个人感悟
原文链接:segmentfault.com

上一篇:Vue 自定义标签的 src 属性不能使用相对路径
下一篇:js之数组内置方法

相关推荐

  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    2 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png(https://img.javascriptcn.com/5a33946ad8c0ea8ee7870f74f331d0c0 "clipboard.png") reacta...

    9 个月前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图(https://img.javascriptcn.com/734ce56fe3a37ab11e9744473f56bae1 "效果图") 前言 此 blogreactadmin 项目是基...

    2 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    10 个月前
  • 面试官:请你在React中引入Vue3的@vue/reactivity,实现响应式。

    前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,reacteasystate,在hooks诞生...

    4 个月前
  • 面试官我想做个Reacter(React路由)

    路由的基础用法回顾,源码study,文章首发于docs,求个star 依赖 路由依赖于 reactrouter ,但是一般 pc 路由使用 reactrouterdom ,它依赖于 reactrout...

    3 个月前
  • 面试中React与Vue的比对

    1.virtual dom 用JS模拟DOM结构,DOM变化的对比,放在JS层做,以提高重绘性能 DOM操作昂贵,JS运行效率高,要减少DOM操作 使用:snabbdom的使用 ...

    2 年前

官方社区

扫码加入 JavaScript 社区