龙风
## create-react-app 2.x 自定义配置 [create-react-app 2.x 自定义配置](https://segmentfault.com/a/1190000018757322) [自定义配置 create-react-app ](https://zhuanlan.zhihu.com/p/40762397) [react ，基本webpack配置](https://www.cnblogs.com/zyl-Tara/p/10635033.html)
## react react-router中如何应对this.props.history.goBack() 返回两次或多次才生效的问题 > 最近在react项目中，封住了一个返回的组件。 采用this.props.history.goBack() 。返回上一级，但是由于这个页面有跳转编辑信息的页面，然后返回，点击返回按钮，点击两次才能返回到上一级。 ### 解决方案： ```tsx import React from 'react' import './nav-title.scss' import { Iconfont } from '@/components/icon-font/icon-font' import { RouteComponentProps, withRouter } from 'react-router-dom'...
## 对于`keep-alive`需要使用`activated`来代替`mounted`来重新加载数据 ```js data() { return { allCity: [], // 存放城市数据 isLoading: true, cityId: -1 // 优化ID }; }, activated() { // console.log('ok') let cityId = this.$store.state.city.id; if (this.cityId ===...
## 使用vuex进行数据管理 ### 为了方便数据管理。将vuex也进行组件化开发 ```js const state = { nm: window.localStorage.getItem('city_nm') || '北京', id: window.localStorage.getItem('city_id') || 1 } const actions = { } const mutations = { CITY_INFO(state, params) {...
## 为了不必要的发送ajax请求。 ```js mounted() { // 获取本次存储 let cityData = window.localStorage.getItem("cityList"); let hostCity = window.localStorage.getItem("hostCity"); // 判断本地存储是否存在，存在就不发送ajax请求 if (cityData && hostCity) { this.cityData = JSON.parse(cityData); this.hostCity = JSON.parse(hostCity); this.isLoading =...
## 一个全局的css 的加载效果组件 ```html export default {}; .loader { position: relative; width: 2.5em; height: 2.5em; transform: rotate(165deg); } .loader:before, .loader:after { content: ""; position: absolute; top: 50%; left: 50%; display:...
## 如何将scroll进行父子通信 ### 子组件代码 ```js export default { name: "scroller", data() { return {}; }, props: { changeScroll: { type: Function, default: function() {} }, changeTouchEnd: { type: Function, default:...
### 结构方面存在一个bug ### 如何使用上拉刷新的功能。使用`better-scroll`插件就可以解决一切问题。 ```js mounted(){ this.axios.get('/api/movieOnInfoList?cityId=10').then( res =>{ // console.log(res.status) // 作出判断数据是否获取成功 if (res.status) { this.movieList = res.data.data.movieList } }) // this.$nextTick() 作用：$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM this.$nextTick(()...
### 如何使用axios自带的防抖～ ```js export default { name: "searchPage", data() { return { query: "", movieList: [], // 存放电影列表数据 cancelTokenFn: null }; }, // 使用watch发起监听异步请求 watch: { query: function(newVal) { //...
## 如何监听输入框的异步请求？ ``` js watch: { query: function(newVal) { // console.log(newVal); // 发送axios请求 this.axios.get("/api/searchList?cityId=10&kw=" + newVal).then(res => { // console.log(res) // console.log(res.data.data.movies); if (newVal && res.status === 200 && res.data.data.movies.list)...