weixin_38405133的博客

Props of Transition目录1. Props介绍2. 源码工具函数3. 从生命周期分析组件源码阅读本文你会获得：一个相应的使用案例请看项目react-music-lhy，文档在blog中基于react-transition-group的react过渡动画找到：组件挂载与卸载动画的可以借助appear以及onExit回调函数实现。案例中onExit回调函数主要用于通过路...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy构建store存储的state数据结构state的数据结构为：｛ singer:singer｝因此对应的reducers/index.ts为import { combineReducers } from "redux";import singer from './singer'...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhywithRouter在typescript下的使用利用react-router4官方提供的的withRouter进行路由跳转，在项目引入：import { Route, withRouter } from 'react-router'然后利用withRouter包裹组件：class ...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy面包屑选择页面内容的时候，当推荐页面对应的组件有异步加载未完成的时候，切换到歌手页面，推荐页面组件被卸载，异步加载完成需要setState，此时将会报错：因为组件被卸载无法显示更新后的state。因此组件卸载的时候设置一个标志位unmoutedFlag，并且在setState的时候判断该标志位决...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyListView.tsxmove事件better-scroll组件Scroll的propType的使用 import React,{ Component, TouchEvent } from 'react' import Loading from 'reuse/loading...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhySinger.tsximport React,{ Component } from 'react'import './Singer.scss'import {getSingerList} from 'api/singer.js'import {ERR_OK} from 'api/conf...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy图片懒加载组件优化代码如下：往往一个项目不止一处需要图片懒加载，可能不同的页面不同的场景需要懒加载，对应的目标元素的className不能设置为同一个，因为在切换页面或者场景的时候，可能获取到了不同页面或者场景的元素，会出现bug，因此这里为每个场景都设置不一样的className标志。提高复...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyRecommend.tsximport LazyImage from 'reuse/lazyimg/Lazy-img'...<div className="recommend"> <Scroll scrollStyle="recom...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyloading组件选用纯函数组件实现：import React, {Component} from 'react'import './loading.scss'import loadingGif from './loading.gif';interface loadingProps{...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyscroll组件：移动端滚动import React, {Component} from 'react'import BScroll from 'better-scroll'interface scrollProps{ children:any, scrollStyle:...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhycreate-react-app搭建代理（二）create-react-app搭建代理（一）介绍了如何通过devServer.before自定义路由从而搭建代理，本文给出另外一种方法。经过npm run eject之后配置代理，create-react-app用的是webpack-dev-se...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhycreate-react-app搭建代理（一）经过npm run eject之后配置代理，create-react-app用的是webpack-dev-server实现一个简单的web服务器，webpack-dev-server是基于express实现的。webpack-dev-server相...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyhttp-proxy-middleware本文翻译自Github http-proxy-middleware官方文档核心概念Proxy中间件配置.proxy([context,] config)var proxy = require('http-proxy-middleware')...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy基于better-scroll的react轮播图组件由于beter-scroll官方给出的例子都是vue组件的实现没有react组件的实现，结合项目给出了react的轮播图组件的实现。vue组件代码：vue轮播图组件better-scroll版本以及react的版本分别是"@types/...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyIndex.js关键代码如下：import fastclick from 'fastclick'fastclick.attach(document.body);import { BrowserRouter } from 'react-router-dom'ReactDOM.rend...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy搭建项目利用react官方提供的 create-react-app创建react+typescript的项目(create-react-app版本为2.1.3)npx create-react-app my-app --typescript这条命令会临时安装 create-react-a...

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyalias配置首先在paths.js写好路径，如下module.exports = { dotenv: resolveApp('.env'), appPath: resolveApp('.'), appBuild: resolveApp('build'), appPublic...

项目地址https://github.com/BUPTlhuanyu/react-music-lhy项目运行npm installnpm start项目中用到的一些自定义types在common/js/typings目录下可以通过dts-gen为没有types的npm包自动生成d.ts声明文件项目笔记D11、搭建项目2、alias与tsconfig的配置D21、Tab...

项目地址