React
react的基础用法和案例
张三疯ts
全栈开发工程师。可独立开发后台管理系统、pc、移动端商城、APP、熟练使用nodejs连接数据库开发接口;主要技术栈react,nodejs,angular,vue,nextjs;微信、支付宝小程序,taro;运维:了解linux。熟练使用nginx;
展开
-
性能优化-react路由懒加载和组件懒加载
随着项目越来越大,打包后的包体积也越来越大,严重影响了首屏加载速度,需要对路由和组件做懒加载处理主要用到了react中的lazy和Suspense。废话不多说,直接上干货。原创 2023-08-03 17:21:03 · 944 阅读 · 0 评论 -
react native的开发环境搭建和出坑指南
最近在用rn开发app,一路走来踩了很多坑,这一篇先说一下开发环境搭建的步骤和坑。成果展示先看下再ios和android模拟器上成功跑起来的样子。电脑环境必须:Xcode, Android Studiorn-ios官网:https://www.react-native.cn/docs/environment-setup安装依赖必须安装的依赖有:Watchman、CocoaPods。* 安装 watchman brew install watchman 检测是否成功:watchman原创 2021-12-15 16:29:01 · 2323 阅读 · 0 评论 -
react hooks中如何关闭setInterval的定时器
react关闭定时器,hooks关闭定时器,react离开页面关闭定时器原创 2022-08-19 14:32:58 · 1405 阅读 · 0 评论 -
react事件解析,class,hooks事件传参剖析
react 事件剖析, react事件传参原创 2022-05-11 11:00:02 · 342 阅读 · 4 评论 -
react中使用swiper7 react中处理swiper垂直显示问题
网上有些使用的是老版本,用法可能不同,先贴出最新版版本"react": "17.0.2","swiper": "^7.4.1"安装yarn add swiper效果图横向效果垂直效果页面中使用import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';import { Swiper, SwiperSlide } from 'swiper/react';import 'swiper/css';import原创 2022-01-11 14:12:23 · 1596 阅读 · 0 评论 -
react 从列表页到详情页返回后保持列表页的状态
react 从列表页到详情页返回后保持列表页的状态痛点解决方案:react-router-cache-route实现页面状态的缓存版本用法详细例子1.配置路由2.修改缓存页面的部分内容-didRecover痛点移动端开发时会遇到在列表页点击进入详情,返回后列表页刷新的情况,对用户体验很不友好。解决方案:react-router-cache-route实现页面状态的缓存版本 "react": "^17.0.2", "react-router-cache-route": "^1.11.原创 2021-07-03 15:45:42 · 3660 阅读 · 4 评论 -
react子组件被rc-form createForm()后,父组件无法获取子组件的ref
今天使用react遇到个小麻烦,废了一个小时,刚出坑,给小伙伴们分享下。需求:父组件里有个子组件,子组件是个表单,父组件要调用子组件的方法。操作:使用常规的refs.child.fn(), 结果试了好几次没成功,差点怀疑人生,坑:后来发现是因为子组件用了rc-form的createForm方法把子组件给封装了一下解决方案:调用一下rc-form提供的wrappedComponentRef来处理。版本 "react": "^17.0.2", "antd-mobile": "^2.3原创 2021-06-22 15:35:17 · 1771 阅读 · 0 评论 -
react跨域和快速解决跨域的方法
文章目录零、先看版本一、跨域1.安装 http-proxy-middleware2.配置3.使用二、后台三、测试零、先看版本"react": "^17.0.2","http-proxy-middleware": "^2.0.0"一、跨域1.安装 http-proxy-middlewarecnpm install --save-dev http-proxy-middleware注:–save-dev 只在本地使用2.配置重点:在src目录下创建setupProxy.jsconst {原创 2021-05-22 15:24:11 · 317 阅读 · 0 评论 -
12.路由嵌套
文章目录一、摘要1.需求2.父路由里配置嵌套路由二、简单的路由嵌套例子1.根路由-App.js2.父路由-User.js3.子路由-info4.样式三、模块化路由嵌套例子1.摘要2.例子1.route.js-配置所有的路由2.根路由-App.js(难点:跟路由传参)3.父路由-User.js4.子路由一、摘要1.需求跟路由首页 用户中心 商户 个人中心 商户列表 用户信息 增加商户2.父路由里配置嵌套路由import { Route, Link } from "react-route原创 2021-05-20 13:53:10 · 169 阅读 · 0 评论 -
11.点餐系统
文章目录一、摘要二、详情1.App.js-配路由2.登录页-js路由跳转3. 列表页4.详情页一、摘要1.登录跳转-js跳转路由2.路由系统 列表页详情页,获取动态路由传值3.数据获取 axios4.数据展示: img, html, 二、详情1.App.js-配路由import './assets/css/App.css';import './assets/css/index.css'import { BrowserRouter as Router, Switch, R原创 2021-05-20 13:42:39 · 121 阅读 · 0 评论 -
10.路由
文章目录一、摘要二、简单的路由例子三、动态路由传值和取值1.摘要2.详细例子1.App.js2.News.js3.NewsDetail.js四、get路由传值和获取(url插件)1.摘要2.详细例子1.App.js - 配置路由2.列表页路由跳转、get传参3.ProductDetail-获取get传参1.使用url插件格式化订传过来的参数五、路由跳转1.html 跳转2.js跳转1.摘要2.详细例子十、其他1.exact一、摘要1.看文档 https://reactrouter.com/web原创 2021-05-20 13:42:10 · 84 阅读 · 0 评论 -
9.生命周期
文章目录一、生命周期1.所有的生命周期2.必会的二、例子1.父组件2.子组件一、生命周期1.所有的生命周期1.组件加载时触发的函数 constructor, componentWillMount, render, componentDidMount 2.组件更新时触发的声明周期函数 shouldComponentUpdate, componentWillMount, render, componentDidMount3.父组件里改变props传值时触发的 componentWillRec原创 2021-05-20 13:41:07 · 70 阅读 · 0 评论 -
8.axios,jsonp的用法
文章目录一、axios1.安装2.使用二、fetch-jsonp1.安装2.使用一、axios1.安装// 安装npm install axios --save2.使用// 1.引入import axios from 'axios';getData = () => { let api = 'http://a.itying.com/api/productlist'; axios.get(api) .then((res) => {原创 2021-05-20 11:42:21 · 388 阅读 · 0 评论 -
7.父子组件间传值和传方法,defaultProps,propTypes
文章目录零、父组件给子组件传值传方法1.总结一、父组件给子组件传值1.父组件2.子组件 - {this.props.xxx}二、父组件给子组件传方法1.父组件2.子组件 - {this.props.xxx}三、父组件将整个组件传给子组件1.父组件2.子组件 - {this.props.xxx}三、父组件获取子组件的数据和方法1.总结2.例子1.父组件2.子组件 - {this.props.xxx}四、其他1.defaultProps2.propTypes零、父组件给子组件传值传方法1.总结<He原创 2021-05-20 11:41:56 · 209 阅读 · 0 评论 -
6.todolist循环增删数据,方法的封装和使用,页面初始化函数
文章目录内容详细例子1.Todolist组件2.方法的封装和使用内容通过案例练习使用1.循环数据,增删数据2.常用方法的封装和使用-storage3.页面初始化时的函数componentDidMount(){}详细例子1.Todolist组件// 内容:封装storage的方法import React from 'react';import storage from '../model/storage'class Todolist extends React.Component {原创 2021-05-20 09:34:22 · 99 阅读 · 0 评论 -
5.表单详解,获取input的text,select,radio,checkbox,textarea的值
文章目录内容详细例子内容详解表单获取input的text,select,radio,checkbox,textarea的值详细例子class ReactForm extends React.Component { constructor(props) { super(props); this.state = { name: '张三', sex: 1, city: '',原创 2021-05-19 17:54:58 · 317 阅读 · 0 评论 -
4.事件对象、表单事件、键盘事件、ref获取dom节点、react实现双向数据绑定
文章目录一、事件对象二、表单事件1.获取input的值1.事件对象法2.ref法2.键盘事件-keydown,keyup三、双向数据绑定一、事件对象class Home extends React.Component { run = (event) => { event.target.style.background = 'red'; let aid = event.target.getAttribute('aid'); console.lo原创 2021-05-19 17:54:35 · 116 阅读 · 0 评论 -
3.react 方法、获取state值,修改state值,方法传参
文章目录一、简单方法的创建和使用二、获取state数据的几种方式(常用箭头函数法)1. html-bind2.构造函数bind3.箭头函数 (常用)4.完整例子三、在方法中修改state值四、方法传值一、简单方法的创建和使用class Home extends React.Component { constructor(props) { super(props) } // 1.创建方法 run() { console.log('run ');原创 2021-05-19 17:18:52 · 3183 阅读 · 0 评论 -
2.新建子组件、jsx语法、绑定数据、class、style、引入图片、遍历数据
文章目录一、创建组件示例1. 创建子组件2. 根组件中引入子组件二、绑定属性0.注意1.普通属性2.绑定class名1.正常模式2.绑定js文件中的变量名3.style4.label for三、react引入图片的几种方式1. img-import2. img-require-暂时失败3.背景图4.img-网络图片四、循环遍历数据1.方式12.方式2五、react中解析html代码十、冷知识super本接内容:创建组件、jsx语法、绑定数据、绑定对象、绑定属性一、创建组件示例注意 :新建组件名首字母大原创 2021-05-19 17:18:19 · 453 阅读 · 0 评论 -
1.概述
文章目录安装 & 运行插件1.vscode生成react组件的插件2.scode生成react组件的插件必装插件页面初始化安装 & 运行npm install -g create-react-appnpx create-react-app my-app 或create-react-app my-appcd my-appnpm run eject //将webpack配置文件暴露出来// 运行npm start插件1.vscode生成react组件的插件vscode搜索原创 2021-05-19 17:17:59 · 51 阅读 · 0 评论