react redux-saga
摘要：https://redux-saga-in-chinese.js.org/ redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。 reducer负责处理action
阅读全文
posted @
2021-08-21 20:14
Tsunami黄嵩粟
阅读(38)
推荐(0) 编辑
react Hook
摘要：https://react.docschina.org/docs/hooks-intro.html Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from
阅读全文
posted @
2021-08-21 19:50
Tsunami黄嵩粟
阅读(20)
推荐(0) 编辑
react 数据请求分层
摘要：封装一个接口请求类 数据模型 请求uri配置设置 数据统一存储于redux中，在本项目中创建一个store目录，此目录中就是redux仓库源 定义仓库入口 reducer methods方法 action操作 组件中连接redux数据，高阶组件 组件使用
阅读全文
posted @
2021-08-21 19:46
Tsunami黄嵩粟
阅读(90)
推荐(0) 编辑
react mock数据
摘要：为什么要做假数据，因为后端开发接口没有哪么快，此时就需要自己来模拟请求数据。 模拟的数据字段，需要和后端工程师沟通。 创建所需数据的json文件 json-server 此命令可以帮助我们快速创建一个web服务 npm i -g json-server 启动json文件 使用配置文件来启动json-
阅读全文
posted @
2021-08-21 19:43
Tsunami黄嵩粟
阅读(123)
推荐(0) 编辑
react移动端组件antd-mobile
摘要：使用react移动端组件antd-mobile完成底部导航功能实现。 官网：https://mobile.ant.design/docs/react/introduce-cn antd-mobile 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。 安装 npm
阅读全文
posted @
2021-08-21 19:39
Tsunami黄嵩粟
阅读(2357)
推荐(0) 编辑
redux中集成immutable.js
摘要：安装redux-immutable redux中利用combineReducers来合并reducer并初始化state，redux自带的combineReducers只支持state是原生js形式的，所以需要使用redux-immutable提供的combineReducers来替换原来的方法。
阅读全文
posted @
2021-08-21 19:37
Tsunami黄嵩粟
阅读(46)
推荐(0) 编辑
react immutable.js
摘要：、immutable.js 1.1、概述 官网：https://immutable-js.github.io/immutable-js/ Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在
阅读全文
posted @
2021-08-21 19:32
Tsunami黄嵩粟
阅读(93)
推荐(0) 编辑
Redux之combineReducers方法
摘要：Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。 import { combineReducers } from 'redux'; const reducer = co
阅读全文
posted @
2021-06-23 15:20
Tsunami黄嵩粟
阅读(95)
推荐(0) 编辑
react 样式继承 属性传递
摘要：# 样式 import styled from 'styled-components' const Button = styled.button` font-size: 20px; border: 1px solid red; border-radius: 3px; `; // 一个继承 Butto
阅读全文
posted @
2021-06-23 15:18
Tsunami黄嵩粟
阅读(140)
推荐(0) 编辑
react css-in-js
摘要：CSS-in-JS是一种技术，而不是一个具体的库实现。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些css，scss或less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展
阅读全文
posted @
2021-06-23 15:17
Tsunami黄嵩粟
阅读(146)
推荐(0) 编辑
react 利用高阶组件给页面加上动画
摘要：利用高阶组件给页面加上动画 并不想让所有的路由都有动画效果，只是想对指定的页面有路由切换效果，可以利用高阶组件来完成。 # 定义高阶组件 import React, { Component } from 'react' import { CSSTransition } from 'react-tra
阅读全文
posted @
2021-06-23 15:15
Tsunami黄嵩粟
阅读(74)
推荐(0) 编辑
react路由过渡动画效果
摘要：render() { return ( <div> <li><Link to="/home">Home</Link></li> <li><Link to="/child">Child</Link></li> <TransitionGroup> <CSSTransition timeout={1000
阅读全文
posted @
2021-06-23 15:14
Tsunami黄嵩粟
阅读(289)
推荐(0) 编辑
REACT列表过度
摘要：<TransitionGroup> <CSSTransition> <li>aaaa</li> </CSSTransition> </TransitionGroup>
阅读全文
posted @
2021-06-23 15:07
Tsunami黄嵩粟
阅读(55)
推荐(0) 编辑
react 过渡动画组件
摘要：在项目中可能会有一些动画效果展示或是页面切换效果，css动画的方式，比较局限，涉及到一些js动画的时候没法处理了。react-transition-group是react的第三方模块，借住这个模块可以更方便的实现更加复杂的动画效果 安装 npm i -S react-transition-group
阅读全文
posted @
2021-06-23 14:48
Tsunami黄嵩粟
阅读(147)
推荐(0) 编辑
react多级路由 重定向与404定义
摘要：在有一些功能中，往往请求地址的前缀是相同的，不同的只是后面一部份，此时就可以使用多级路由(路由嵌套)来实现此路由的定义实现。 例： 路由规则如下 admin/index admin/user 它们路由前缀的admin是相同的,不同的只是后面一部份 # 重定向 from从哪里来 to重定向到何处去 <
阅读全文
posted @
2021-06-23 14:45
Tsunami黄嵩粟
阅读(129)
推荐(0) 编辑
react自定义导航组件 路由参数
摘要：为何需要自定义导航？ 因为在项目中往往不是所有的声明式导航都是需要a标签完成，有时候可能需要别的标签，此时如果在需要的地方去写编程式导航就会有代码重复可能性，就在对于公共代码进行提取。 思路： 定义一个普通组件可以是类组件也可以是函数式组件 父组件能向子组件传值 props 不管路由规则是否匹配都要
阅读全文
posted @
2021-06-23 14:44
Tsunami黄嵩粟
阅读(145)
推荐(0) 编辑
react withRouter高阶组件
摘要：作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上 默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.pu
阅读全文
posted @
2021-06-23 14:41
Tsunami黄嵩粟
阅读(72)
推荐(0) 编辑
编程式导航
摘要：react-router-dom中通过history对象中的push/replace/go等方法实现编程式导航功能 this.props.history.push(path) 或 this.props.history.push({ pathname:’’, search:’’, state:{} }
阅读全文
posted @
2021-05-31 12:56
Tsunami黄嵩粟
阅读(90)
推荐(0) 编辑
react路由渲染
摘要：三种渲染方式 component = (组件对象或函数) <Route path="/home" component={Home} /> 或 <Route path="/home" component={()=><Home />} /> render = (函数) <Route path="/hom
阅读全文
posted @
2021-05-31 12:55
Tsunami黄嵩粟
阅读(141)
推荐(0) 编辑
REACT路由
摘要：现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。 前端路由功能：让用户从一个视图(组件)导航到另一个视图(组件) 前端路由是一套映射规则，在React
阅读全文
posted @
2021-04-30 11:47
Tsunami黄嵩粟
阅读(81)
推荐(0) 编辑
