react
一下子就醒了
何以渡清欢
展开
-
小程序Input表单输入限制最大值、最小值、只能输入数字、小数点位数
import React, { useState, useCallback, FC, useEffect } from 'react'import { t } from 'gm-i18n'import { Flex, View, Dialog, Input, Toast } from '@xx-mobile/mp'import { observer } from 'mobx-react'import _ from 'lodash'import store from '../store'...原创 2021-08-27 14:42:41 · 5291 阅读 · 0 评论 -
JS将数组转化为对象obj:键值对形式{}
目标需求:添加零食种类根据零食种类分配的UUID映射展示出来:获取到零食种类的列表的数据结构是这样子的:这是一个数组,里面包含很多对象,每个对象里面含有相同的属性首先把想要的字段通过工具函数库lodash_.pick()出来: let b = []; classifylist.map( it => { b.push(_.pick(it...原创 2019-07-19 15:32:00 · 45988 阅读 · 11 评论 -
dva+antd+react项目,在antd pro的脚手架的基础上实现订单的增删改查
效果图:该实例是在antd pro 的项目环境下修改实现:https://pro.ant.design/docs/getting-started-cn添加订单页面:订单列表页面:antd pro这个脚手架是使用分层架构,来层层实现数据传递,pages存放页面,从页面获取数据传递到models层,然后再models中调用services的异步请求接口数...原创 2019-06-09 12:46:26 · 4707 阅读 · 0 评论 -
根据请求响应的状态码做判断,给予开发者错误提示:responseCode
根据response来判断错误,获取错误信息提示。//@ts-check/// <reference path="../types.d.ts" />export const ERROR_NO_TOKEN_INFO = 10086;export const ERROR_PASSWD_DIFF = 20488;/** * @param {{code: number, ...原创 2019-06-14 12:19:16 · 4324 阅读 · 0 评论 -
前后端分离,前端请求后端接口的过程
前端的代码是运行在nodejs环境下,前端代码大概分为service层,model层,和view层(page),service层封装请求接口的函数,model层调用service层定义的函数获取参数并存储起来,然后把存储的数据再page中展示出来。下面一步步讲解:由于涉及的前端知识比较多,很多细节并没有讲解得得很充分,只是大概讲一个过程,想学更多得前端知识请看:es6,react,dva,...原创 2019-05-04 15:12:49 · 35194 阅读 · 0 评论 -
React高阶组件
高阶组件定义a higher-order component is a function that takes a component and returns a new component.翻译:高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。函数模拟高阶组件我们通过普通函数来理解什么是高阶组件最普通的方法,一个welcome,一个goodbye。...原创 2019-04-16 14:34:12 · 189 阅读 · 0 评论 -
创建React App + Express 前后台交互项目
创建express app 全局安装 express-generator $ npminstall-g express-generator 创建express app $express react-backend 安装依赖包 $ npminstall目录: 修改react-backend/routes/users.js, 返回简单的...原创 2019-03-30 16:18:49 · 2170 阅读 · 0 评论 -
React数据流和组件间的通信
React单向数据流: React是单向数据流,数据主要从父节点传递到子节点(通过props)。 如果顶层(父级)的某个props改变了,React会重渲染所有的子节点。怎么理解Props呢?Props: props是property的缩写,可以理解为HTML标签的attribute。 不可以使用this.props直接修改props,因为props是只读的,pr...原创 2019-03-26 13:28:55 · 220 阅读 · 0 评论 -
前端技术(五):dva
dva出自于暴雪出品的一款游戏《守望先锋》,援引官方的角色介绍:然后呢,蚂蚁金服的一位架构师sorrycc很迷这位美女,正巧刚开发了一款前端框架没有名字,作为一个向女神献礼的项目,dva框架就此诞生。实际上,dva只是基于现有开源框架的一层轻量封装,并没有引入任何新概念: React:管理View react-router:管理路由 Redux:管理Model ...原创 2019-03-16 13:41:13 · 4060 阅读 · 0 评论 -
前端技术(四):react-router,去中心化式路由
1.静态路由 vs. 动态路由在Web前端开发中,我们经常会需要处理页面路由问题。习惯上,路由信息会在一个地方集中配置好,我们可以称之为“静态路由”,或者叫“中心化式路由”。以react-router v3版本为例,代码类似下面这样:import { Router, Route, IndexRoute, browserHistory } from 'react-router'co...原创 2019-03-16 13:17:50 · 737 阅读 · 0 评论 -
前端技术(三):redux-saga,化异步为同步
1.什么是Saga?实际上,这个术语出自康奈尔大学的一篇论文:http://www.cs.cornell.edu/andru/cs711/2002fa/reading/sagas.pdf最初这篇论文是为了解决分布式系统中的LLT(Long Lived Transaction),也就是长时运行事务的数据一致性问题的。这么说有点抽象,我们来举个具体的例子:假如你在一个在线订票系统上订了一张...原创 2019-03-16 12:57:13 · 1871 阅读 · 1 评论 -
前端技术(二):从Flux到Redux
什么是Redux?首先我们要搞清楚,Redux解决了哪些问题?主要是以下3点:1.如何在应用程序的整个生命周期内维持所有数据?Redux是一个“状态容器”。写过React或者ReactNative的同学可能会有感受,如果多个页面需要共享数据时,需要把数据一层层地传递下去,非常繁琐。如果能有一个全局统一的地方存储数据,当数据发生变化时自动通知View刷新界面,是不是很美好呢?因此,我们需...原创 2019-03-16 12:40:19 · 259 阅读 · 0 评论 -
前端技术(一):从MV*到Flux
最近开始接触react框架,然后学习了关于react周边的一系列技术。react全家桶包括了react,组件化的框架,看官方文档即可react-router,路由管理redux, 是一个状态容器,提供可预测化的状态管理redux-saga,数据获取等异步时间和访问缓存react-redux,redux的官方绑定react-router-redux ,上面三者的结合体...原创 2019-03-16 12:10:44 · 312 阅读 · 0 评论 -
React--使用axios请求数据并把数据渲染到组件
开始这个实例之前需要对es6、react、axios有一定的了解安装一个react项目的脚手架 create react-app在开始之前,你可能需要安装yarn。$ yarn create react-app antd-demo工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请尝试配置代理或使用其他 npm registry。然...原创 2019-03-14 20:01:50 · 5280 阅读 · 0 评论 -
React Native 中组件的生命周期
React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化; 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个...原创 2019-03-04 22:47:09 · 139 阅读 · 0 评论 -
了解React
为什么要使用React可能大家在众多的教程、文章里已经了解过了React的好处,比如说它的虚拟DOM可以被高效的渲染,比如说它的组件化使得项目结构非常清晰,代码复用非常容易,比如说它的数据管理机制也能让你清晰的知晓数据的状态,而React本身就是被这种清晰的数据所驱动的。从虚拟DOM(Virtual DOM)说起想象这么一个场景,客厅里有一把我们不是很喜欢的椅子,想换一把,最合适的做法当然...原创 2019-03-04 21:18:29 · 203 阅读 · 0 评论 -
React数据流和组件间的通信方式
总结下React的单向数据流与组件间的沟通。想了解更多的react框架的知识,请阅读官方文档:https://react.docschina.org/docs/refs-and-the-dom.html首先了解一下:props和stateprops props是property的缩写,可以理解为HTML标签的attribute。作用:给组件传递数据,一般用在父子组件之间 说...原创 2019-03-04 20:46:36 · 261 阅读 · 0 评论