![](https://img-blog.csdnimg.cn/f767fa129f3e41bd8d2780cfba9b1e0a.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
react
文章平均质量分 57
react
Cirrod
把自己热爱的东西做到了极致就变成了钱
展开
-
解决组件样式覆盖问题
一.概述①问题: 一个组件的样式会影响另一个组件的样式。②原因:在配置路由时, 两个组件都被导入到项目中,那么组件的样式也就被导入到项目中了。如果组件之间样式名称相同,那么一个组件中的样式就会在另一 个组件中也生效,从而造成组件之间样式相互覆盖的问题。③结论:默认:只要导入了组件,不管组件有没有显示在页面中,组件的样式就会生效。④如何解决?手动处理 (起不同的类名) CSS IN JS 二.CSS IN JSCSS IN JS :是使用JavaScript编写CSS的统称,用来解决.原创 2022-04-18 23:39:00 · 2050 阅读 · 0 评论 -
React---在React项目中使用Promise封装获取城市定位函数
在React项目中使用Promise封装获取城市定位函数import axios from "axios";// 1.导出获取定位城市的函数getCurrentCityexport const getCurrentCity = () => { // 2.判断localStorage中是否有定位城市 const LocalCity = JSON.parse(localStorage.getItem('hkzf_city')) if (!LocalCity) { // 3.如原创 2022-04-18 20:41:13 · 478 阅读 · 0 评论 -
React---使用withRouter高阶组件解决react组件获取不到组件路由信息的问题
注意: 默认情况下,只有路由<Router>直接渲染的组件才能够获取到路由信息(比如:history.go()等)如果需要在其他组件中获取到路由信息可以通过withRouter高阶组件来获取1.从react - router - dom中导入withRouter高阶组件import { withRouter } from "react-router-dom"2.使用withRouter高阶组件包装NavHeader组件 目的:包装后,就可以在组件中获取到当前路由信息了..原创 2022-04-15 21:47:07 · 1072 阅读 · 0 评论 -
React---在React项目中使用react-virtualized来对长列表性能优化
1.概述场景:展示大型列表和表格数据(比如:城市列表、通讯录、微博等), 会导致页面卡顿、滚动不流畅等性能问题 产生性能问题的原因 :大量DOM节点的重绘和重排 其他原因:老旧设备 其他问题 :移动设备耗电加快、影响移动设备电池寿命 优化方案: 1.懶渲染(懒加载)2. 可视区域渲染 2.懒加载常见的长列表优化方案,常见于移动端 原理:每次只渲染一部分(比如10条数据), 等渲染的数据即将滚动完时,再渲染下面部分 优点:每次渲染一部分数据,速度快 缺点:数据量大时,页面中依然存在.原创 2022-04-12 17:27:31 · 3333 阅读 · 0 评论 -
React---在React项目中使用百度地图api获取本地的城市名称
一.百度地图API1.介绍H5的地理位置API只能获取到经纬度信息 实际开发中,会使用百度地图/高德地图来完成地理位置的相关功能 项目中,通过百度地图API实现地理定位 百度地图文档( 首页→开发者文档→JavaScript API )(百度地图开放平台 | 百度地图API SDK | 地图开发) 注意:使用前,需要先申请百度账号和ak,获取到的ak 2.申请百度账号和密钥①注册百度账号,登录百度地图开放平台。②点击创建应用。③获取到密钥( ak)。二.在React项目中使.原创 2022-04-06 22:58:42 · 1288 阅读 · 0 评论 -
在Vue或者React项目中初始化axios
初始化的request.js代码// 请求模块import axios from 'axios'import store from '../store/index'const request = axios.create({ baseURL: 'http://toutiao.itheima.net' }) // 请求拦截器 // 添加请求拦截器request.interceptors.request.use(function(config) {原创 2022-03-31 21:30:17 · 424 阅读 · 0 评论 -
React---使用componentDidUpdate钩子函数判断路由地址是否发生变化
在组件更新(例如组件的路由更新)后会执行componentDidUpdate钩子函数componentDidUpdate方法会传入两个参数:prevProps,prevState。prevProps, prevState可以拿到组件更新前的数据因为路由的信息是通过props传递给组件的,所以,通过比较前后的两个props就可以判断路由地址是否发生变化应用: componentDidUpdate(prevProps) { console.log(prevProps); .原创 2022-03-31 20:47:04 · 1924 阅读 · 0 评论 -
React完整文档
http://toutiao.itheima.net/react/index.html#/zh-CN/geek-pc原创 2022-03-27 22:36:36 · 1457 阅读 · 0 评论 -
React---在React项目中使用antd-mobile组件库
一.组件库antd-mobile介绍和使用1.打开antd-mobile的文档2.安装 :yarn add antd-mobile或者npmadd antd-mobile3.在App.js根组件中导入要使用的组件4.渲染组件原创 2022-03-26 22:36:05 · 1597 阅读 · 0 评论 -
React---项目目录介绍和初始化项目的目录结构
一.项目目录介绍二.初始化项目1.初始化项目:npx create-react-app 项目名称2.启动项目,在项目根目录执行命令 : yarn start 或者npm start3.调整项目中 src目录结构如下:原创 2022-03-26 22:09:34 · 1917 阅读 · 0 评论 -
React---React路由
一.路由介绍现代的前端应用大多都是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。前端路由的功能:让用户从一个视图(页面)导航到另一个视图(页面)前端路由是一套映射规则,在React中,是URL路径与组件的对应关系使用React路由简单来说,就是配置路径和组件(配对)二.路由的基本使用1.使用步骤1.安装:yarn add react-rou.原创 2022-03-25 22:28:55 · 703 阅读 · 1 评论 -
React---React原理及优化
一.setState()的说明1.更新数据setState()是异步更新数据的注意:使用该语法时,后面的setState()不要依赖于前面的setState)可以多次调用setState(),只会触发一次重新渲染2.推荐语法推荐:使用setState((state, props)=>{})语法参数state:表示最新的state参数props:表示最新的props3.第二个参数场景:在状态更新(页面完成重新渲染)后立即执行某个操作语法: setState(.原创 2022-03-25 21:35:42 · 1452 阅读 · 0 评论 -
React---React组件进阶
1.组件通讯组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能。而在这个过程中,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯。2.组件的props组件是封闭的,要接收外部数据应该通过props来实现props的作用:接收传递给组件的数据传递数据︰给组件标签添加属性接收数据∶函数组件通过参数props接收数据,类组件通过t.原创 2022-03-24 23:01:08 · 908 阅读 · 0 评论 -
React---React组件基础
1.React组件介绍组件是 React的一等公民,使用React就是在用组件组件表示页面中的部分功能组合多个组件实现完整的页面功能特点:可复用、独立、可组合2.React组件的两种创建方式1.使用函数创建组件函数组件:使用JS的函数(或箭头函数)创建的组件约定1∶函数名称必须以大写字母开头约定2∶函数组件必须有返回值,表示该组件的结构如果返回值为null,表示不渲染任何内容渲染函数组件:用函数名作为组件标签名组件标签可以是单标签也可以是双标签2.使.原创 2022-03-22 22:13:48 · 1534 阅读 · 0 评论 -
React---JXS语法
1.createElement()问题1.繁琐不简洁。2.不直观,无法一眼看出所描述的结构。3.不优雅,用户体验不爽。2.JSX简介JSX是JavaScript XML的简写,表示在JavaScript代码中写XML ( HTML)格式的代码。优势:声明式语法更加直观、与HTML结构相同,降低了学习成本、提升开发效率3. 使用步骤1.使用JSX语法创建react元素2.使用ReactDOM.render()方法渲染react元素到页面中在index.js..原创 2022-03-21 17:51:55 · 3703 阅读 · 0 评论 -
React---react的基本使用
一.React概述1.什么是ReactReact是一个用于构建用户界面的JavaScript库。用户界面:HTML页面(前端)React主要用来写HTML页面,或构建Web应用如果从MVC的角度来看,React仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的M和C的功能。React起源于Facebook的内部项目,后又用来架设Instagram的网站,并于2013年5月开源2.React的特点1.声明式你只需要描述UI( HTML)看起来是什么样,就跟写..原创 2022-03-20 22:57:49 · 2616 阅读 · 1 评论