imkaifan的博客

react项目--修改脚手架配置说明

react项目优化，antd-mobile按需加载

两个路由页面相互传递信息，history.replace，history.replace传递参数，两个页面利用路由来传递参数

防抖、野生版防抖、防抖就是发送一次请求，input输入框

为组件添加一个属性默认值，防止不传的时候报错，defaultProps

PropTypes.node，校验，组件校验，任何可以渲染的内容

鉴权路由的使用：收藏功能(在登陆的前提下才能实现登陆)push的第二个参数就是可选的状态整个代码的精华所在 const { history, location, match } = this.props; history.push('/login',{ from: location })handleFavorite = async() => { if(!isAuth()) { Modal.alert(

路由规则：<Route path="/detail/:id" component={HouseDetail}></Route>import { BrowserRouter as Router, Route,Redirect} from "react-router-dom";import Home from "./pages/Home";import CityList from "./pages/CityList";import Map from "./pages/Map"

登陆访问控制针对登陆才能访问的功能，使用axios拦截器技术手段来实现针对登陆才能访问的页面，使用路由来控制，vue中就是导航守卫，react中也有路由控制的机制登陆访问控制—>使用axios拦截器统一处理token这个时候后台接口也要配合规划，在此处以/user开始的接口是需要添加请求头（token）的。如果状态码是400的话就是token超时或者异常，直接移除tokenimport axios from "axios";import { BASE_URL } from "./ur

formik介绍formik的github地址formik的官网地址具体使用表单验证validate验证线上详细说明validationSchema线上详细说明A Yup schema 的github地址具体操作：完整的登陆代码：import React, { Component } from "react";import { Flex, WingBlank, WhiteSpace, Toast } from "antd-mobile";import { Link }

核心功能基础功能实现import React, { Component } from 'react'import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'import { Link } from 'react-router-dom'import API from '../../utils/api'import NavHeader from '../../components/NavHeader'import st

前三个有自己的样式，三个之后默认就是第三个的样式react： renderTags = () => { const { houseInfo: {tags} } = this.state; console.log("tags",tags) return tags.map((item, index) => { let tagClass = ""; if( index > 2) { tagClass ="tag3" .

componentDidMount() { console.log(this.props.match.params) console.log(this.props) }

实现动画效果的Spring组件，必须每次都要渲染。保证Spring组件一直都被渲染，（Spring组件一旦被销毁就没办法实现动画效果了）所以就曲线救国了spring组件每次都渲染，只是在组件内部来决定返回的ui结构/** * 渲染遮罩层div */ renderMask = () => { const { openType } = this.state; const isHiden = openType === 'more' || openType === '';

网址链接github链接

bug现象：当我切换到北京之后，房屋列表数据并没有更新。而且页面的当前位置现实的还是上海，只有重新刷新页面之后才有效相关代码：原因： 在react中组件外部的代码只会在项目加载时（刷新页面）执行一次。在切换路由时，并不会重新执行解决：利用生命周期来解决...

一般我们直接导入的react，也可以从react中结构出自己用的属性或方法进行使用：import React from "react";class CityList extends React.Component { constructor(props) { super(props); this.state = { cityList: {}, cityIndex: [], activeIndex: 0, }; // 创建ref对象

错误的做法：相当于是直接调用了父组件传过来的onCancel方法 是不对的 <div className={styles.mask} onClick={ onCancel() } />正确的做法：用箭头函数包裹一下 <div className={styles.mask} onClick={() => onCancel()} />import React, { Component } from "react";import FilterFooter from

如果没有传递，那么就是 取消 确定按钮，如果传递了，就是传递的值。<FilterFooter className={styles.footer } cancelText={'清除'} />import React from 'react'import { Flex } from 'antd-mobile'import PropTypes from 'prop-types'import styles from './index.module.css'function Fil.

React内部，key值不相同时，会重新创建组件为FilterPicker 提供一个key值，React内部自然会对组件的key值进行一个判断，当key值不同的时候 会删除改组件 重新创建改组件 renderFilterPicker = () => { const { openType, filterData: { area, subway, rentType, price }, selectedValue } = this.st

// 状态的值const titleSelectedStatus = { area: false, mode: false, price: false, more: false,};// 当状态的中的某个属性变了，怎么更新？ onSave = (type,value) => { this.setState(() => { return { openType: "", selectedValue: {

react中状态提升：在父组件中定义状态，然后通过props传递给子组件

将对象结构出来，后面直接，就可以进行一个覆盖this.setState((prevState) => { return { titleSelectedStatus: { ...prevState.titleSelectedStatus, [type]: true } } })import React, { Component } from 'react'import FilterTitle

父组件把（一个事件函数）props传给子组件，然后子组件通过交互，触发这个事件（将想要改变的值传回）父组件：import React, { Component } from 'react'import FilterTitle from '../FilterTitle'import FilterPicker from '../FilterPicker'import FilterMore from '../FilterMore'import styles from './index.module.

不添加额外元素，返回多个节点

先导入的是这个组件自己的样式后导入的是组件组件的样式就会覆盖这个组件自己的样式。import React from "react";import "./index.css";import { Route } from "react-router-dom";import { TabBar } from "antd-mobile";// 组件import Index from "../Index/index";import List from "../List/index";import

注意命名方式：create-react-app详细说明

8 个超棒的 React 工具库，建议收藏1、UI组件库 Ant Design2、富文本编辑器 braft-editor3、状态管理工具 Dvajs4、拖拽库 React dnd5、可视化图表 echarts-for-react6、markdown 预览器 react-markdown7、二维码展示 qrcode.react8、缓存页面 React-keepalive-router...

很多的是会用到会对激活项进行类名的添加1.react多个类名的添加，在不适用第三方库的条件下利用模板字符串，此时如果原本的类名是通过对象的属性进行添加，那么此时原本的类名也需要用哪个变量的方式进行表达import style from './makePaper.less';<p className={`${style.papername} ${index==this.state.active?style.activepapername:null}`} onClick={()=&gt

解决css样式冲突的解决方案官网链接：CSS IN JSstyled-components 是一种新的语法，需要学习CSS Modules 脚手架中已经集成，学习成本也低CSS Modules是独立于框架的一种编写css方案，可以在react中使用，也可以在vue中使用，任何解决css冲突的地方使用css Modules 说明css Modules 在项目中怎么使用...

react路由的特点：只要通过import导入这个组件了，组件中导入的样式就会生效，比如你此刻打开的是map页面，citylist页面其实是也已经就绪（运行）了的，citylist相应样式文件也会生效。import { BrowserRouter as Router, Route,Redirect} from "react-router-dom";import Home from "./pages/Home";import CityList from "./pages/CityList";imp

注意：默认情况下，只有路由Route直接渲染的组件才能够获取到路由信息（比如：history.go()等），如果需要在其他组件中获取到路由信息可以通过 withRouter 高阶组件获取import React from "react";import "./index.css";import { Route } from "react-router-dom";import { TabBar } from "antd-mobile";// 组件import Index from "../Ind

目前国内主要有以下三种坐标系：WGS84为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。GCJ02又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。BD09为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。非中国地区地图，服务坐标统一使用WGS84坐标。...

只看 rowRenderer（）方法，给div注册的点击事件。建议都是用这种方法： onClick={() => {this.changeCity(item)}}你要是使用：== onClick={this.changeCity(item)}==会都给触发了。 {this.state.cityList[this.state.cityIndex[index]].map((item) => ( <div className="name" key={item.valu

就看： this.renderCityIndex()方法， componentDidMount()，以及在构造函数中创建ref即可为了获取实例，调取实例上的一些方法 React.createRef()==注意：==需要在实例上添加ref属性import React from "react";import axios from "axios";import { getCurrentCity } from "../../utils/index";import { NavBar } from "an.

react-virtualized github地址安装： yarn add react-virtualized 。在项目的入口文件导入样式文件（只导入一次即可）打开文档看看，你所用到的组件的文档，组件文档地址找到自己要的组件代码，复制分析代码 import 'react-virtualized/styles.css';...

项目目录如下：在此index.html中加入如下代码即可：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-s

概述在展示大型列表和表格数据的时候（城市列表、通讯录、微博等），会导致页面卡顿，滚动不流畅等性能问题，这样就会导致移动设备耗电加快，影响移动设备的电池寿命产生性能问题的元素：大量DOM节点的重绘和重排优化方案：懒渲染可视区域渲染懒渲染懒加载，常见的长列表优化方案，常见于移动端原理：每次只渲染一部分，等渲染的数据即将滚动完时，再渲染下面部分优点：每次渲染一部分数据，速度快缺点：数据量大时，页面中依然存在大量DOM节点，占用内存过多，降低浏览器渲染性能，导致页面卡顿使用场景：数据量.

平常的使用中我们都是在函数中return出一个数据，那么问题来了，遇到想要return两个，或多个数据的函数，我们应该怎么办？demo:/** * 数据格式化方法 * @param { Array } list * @returns { Object } 处理好的数据格式对象 */const formatCityData = (list) => { const cityList = {}; list.forEach( item => { const first

封装了获取当前位置的函数，因为涉及到异步操作而且还要返回数据，所以使用了promise解决。当没有promise的操作失败或操作成功时可以使用promise的快捷方法return Promise.resolve(localCity)这个快捷方法import axios from "axios";/** * @param {} */export const getCurrentCity = () => { const localCity = JSON.parse(localStorag