React
辅助辅助助辅
这个作者很懒,什么都没留下…
展开
-
Antd 按需加载、定制主题
1. 创建react项目2. 引入antd// cnpm i antd -S3.原创 2020-03-27 22:47:54 · 363 阅读 · 0 评论 -
React 兄弟组件传参,或者是没有共同父组件的兄弟组件之间的传参
父组件与子组件通讯经常用的是props,那么兄弟组件呢【标题的情况同样适用】今天记录一下使用自定义事件的方式实现通讯引入一个events包cnpm i events -S我们在utils文件夹里创建个event.jsimport { EventEmitter } from 'events'export default new EventEmitter()在接收/监听的组件里fu...原创 2020-03-12 11:22:02 · 423 阅读 · 0 评论 -
React的生命周期(详细)
React声明周期(16.3版本以前)分为3个阶段:1. 加载阶段1. constructor() // 加载的时候调用一次,可以舒适化state2. render() // 渲染页面3. componentDidMount() // 组件挂在后触发 2. 更新阶段1. componentWillReceiveProps(nextProps) // 接收新的props时触发2....原创 2020-03-12 10:13:21 · 2495 阅读 · 1 评论 -
React redux-react-hook
redux-react-hookimport React, { useState, useEffect, useCallback } from 'react'import { useDispatch, useMappedState } from 'redux-react-hook';import './styles.less'import { hook } from '@/actions/...原创 2020-01-12 16:16:41 · 567 阅读 · 0 评论 -
React redux-actions
// npm install --save redux-actions1:作用:当我们的在开发大型应用的时候,对于大量的action,我们的reducer需要些大量的swich来对action.type进行判断。redux-actions可以简化这一烦琐的过程,它可以是actionCreator,也可以用来生成reducer,其作用都是用来简化action、reducer。主要函数有cr...原创 2020-01-05 15:05:03 · 440 阅读 · 0 评论 -
React 页面请求axios的时候的loading效果
// 通过 reducer 中的变量控制 true, false初始的时候为true, 页面刷新 (有loading效果) trueaxios 加载的时候 (有loading效果)trueaxios 加载完毕 (没有loading效果)falseimport _ from 'loadsh'const homeState = { loading: true, // 控制l...原创 2019-12-31 17:03:40 · 1727 阅读 · 0 评论 -
React 改变底部样式
import React, { PureComponent } from 'react';import './styles.less';import { renderRoutes } from 'react-router-config'import { Link, } from 'react-router-dom'import cs from 'classnames'export de...原创 2019-12-24 13:16:05 · 92 阅读 · 0 评论 -
React 分页
import React from 'react';import './styles.less'import { getTableData } from '@/actions/table'import { connect } from 'react-redux'import { Table, Pagination } from 'antd'import qs from 'qs'exp...原创 2019-12-23 00:39:39 · 111 阅读 · 0 评论 -
React 小功能
react 解析标签 showhtml = htmlString => { var html = { __html: htmlString }; return <div dangerouslySetInnerHTML={html}></div>; }原创 2019-12-18 16:37:33 · 135 阅读 · 0 评论 -
React 文件拆分
// services.js // actionimport { requestPost } from '@/utils/request';// 获取登录 信息export function login(items) { return { type: 'POST_DATA_LOGIN', payload: requestPost('/api/h...原创 2019-12-16 17:01:52 · 321 阅读 · 0 评论 -
React From 表单
import React, { PureComponent } from 'react';import './styles.less';import { connect } from 'react-redux'import { Table, Divider, Tag, Button, message, Popconfirm } from 'antd';import _ from 'load...原创 2019-12-16 08:20:58 · 192 阅读 · 0 评论 -
瀑布流 + 下拉加载 + 监听图片
import React from 'react'import Masonry from 'masonry-layout'import InfiniteScroll from 'react-infinite-scroller'import imagesLoaded from 'imagesloaded'import axios from 'axios'import cs from 'cl...原创 2019-12-14 11:57:58 · 513 阅读 · 0 评论 -
图片加载插件imagesLoaded的配置和使用
import React from 'react';import './styles.less';import imagesloaded from 'imagesloaded'// 安装 npm install imagesloaded// 相关链接: https://segmentfault.com/a/1190000007316974const arr = [ 'http...原创 2019-12-14 10:34:01 · 1435 阅读 · 0 评论 -
React 瀑布流
import React from 'react'import Masonry from 'masonry-layout'import InfiniteScroll from 'react-infinite-scroller'import axios from 'axios'import cs from 'classnames'import './styles.less'// col...原创 2019-12-13 20:23:11 · 666 阅读 · 0 评论 -
React 记录滚动位置
componentDidMount() { // 滚动 const div = document.querySelector('.index_Content') div.addEventListener('scroll', function (e) { localStorage.y = e.target.scrollTop...原创 2019-12-13 10:42:10 · 741 阅读 · 0 评论 -
React 图片懒加载
// 相关链接 https://www.npmjs.com/package/react-lazyloadimport React from 'react'import { Card } from 'antd';import LazyLoad from 'react-lazyload'; // 懒加载const { Meta } = Card;export default class...原创 2019-12-13 10:21:27 · 346 阅读 · 0 评论 -
React 全局路由守卫
// components / PrivateRoute / index.jsximport React from 'react'import { Route, withRouter } from 'react-router-dom'/** * 统一路由监听 * 登录后不做任何处理 未登录跳转到登录页 */export default @withRouterclass exten...原创 2019-12-11 10:17:05 · 1323 阅读 · 0 评论 -
React 安装步骤
1. npx create-react-app 你的项目名 或者 create-react-app 你的项目名2. cnpm i3. git add .4. git commit -m 'xm'5. npm run eject6. cnpm i axios qs classnames react-router-dom redux-promise redux-thunk -S7. cnp...原创 2019-12-10 12:06:53 · 242 阅读 · 0 评论 -
React 中引入字体图标
原创 2019-12-10 16:39:53 · 663 阅读 · 0 评论 -
React 数据持久化 store.js
import { createStore, combineReducers, compose, applyMiddleware } from 'redux'import promise from 'redux-promise'import thunk from 'redux-thunk'// 数据持久化import { persistReducer } from 'redux-persis...原创 2019-12-10 14:26:45 · 833 阅读 · 0 评论 -
React axios拦截 + Promise
import axios from 'axios'let cancelToken = axios.CancelTokenconst cancel = []const removePending = config => { for (let p in cancel) { if (cancel[p].u === config.url) { ...原创 2019-12-10 14:17:08 · 631 阅读 · 0 评论 -
React 路由懒加载
// 相关链接 https://www.npmjs.com/package/react-loadable// utils loader.jsximport React from 'react'import Loadable from 'react-loadable'; const Loading = () => <div> 加载中... </div> //...原创 2019-12-10 13:54:34 · 103 阅读 · 0 评论 -
React静态类型匹配
原创 2019-12-10 13:23:10 · 101 阅读 · 0 评论 -
React数据下拉加载
相关链接:(npm) https://www.npmjs.com/package/react-infinite-scroller原创 2019-12-10 13:20:11 · 578 阅读 · 0 评论