react
关注
分享
扫一扫
williamyi74
服从感性，抗拒理性
展开
-
react中使用socketio入门
总结: 客户端接收服务器的消息用socket.on 客户端给服务器推送消息用socket.emit。useEffect初始化建立连接 监听服务器推送的消息。客户端给服务器推送消息。原创 2023-03-01 21:02:34 · 1003 阅读 · 0 评论 -
axios无感刷新token
【代码】axios无感刷新token。原创 2023-03-01 20:53:33 · 448 阅读 · 0 评论 -
前端react大文件切片上传
像视频这种大文件上传有很多缺点:1.后台可能设置了请求时长限制,太久会上传失败2.NGINX可能设置了文件上传的最大限制导致失败优点:1.文件太大分片上传能加快上传速度,提高用户体验2.能断点续传 如果上次上传失败或者中途离开的话下一次上传过的就不用重头开始了3.已经上传过的文件根据HASH查询直接秒传。原创 2023-03-01 20:28:35 · 1272 阅读 · 0 评论 -
@craco/craco复写cra项目配置
cra内置了HtmlWebpackPlugin插件,直接用cra的getPlugin方法获取插件实例即可。cra默认打包后的产物文件夹名build,我们习惯性的叫dist。原创 2023-02-04 13:42:06 · 3661 阅读 · 0 评论 -
react-router在非组件中使用history对象
然后我们就可以在其它js文件里导入我们自己创建的history对象即可使用。然后在将history对象注入Router组件。原创 2023-01-05 11:37:39 · 463 阅读 · 0 评论 -
redux的connect注入props到组件中
【代码】redux的connect注入props到组件中。原创 2022-08-30 18:23:34 · 331 阅读 · 0 评论 -
百度地图api杂记
前言准备:首先去百度地图开放平台创建应用获取账号ak,引入脚本加载sdk <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的ak"></script>一.生成地图export default function Map() { useEffect(() => { // 使用浏览器的h5定原创 2021-10-20 21:06:36 · 131 阅读 · 0 评论 -
A string ref, “slider“, has been found within a strict mode tree...报错
将index.js中的React.StrictMode标签去掉即可,这是React的严格模式导致的.原创 2021-09-11 22:42:50 · 499 阅读 · 0 评论 -
Unable to preventDefault inside passive event listener invocation警告
ant-mobile设置轮播图后左右滑动轮播图会报这个错,找到node_modules源码carousel.js中的第400行注释掉重启项目即可:原创 2021-09-11 22:39:04 · 554 阅读 · 0 评论 -
react路由传参详解
1.query传参// 传参:import React, { Component } from 'react'export default class QueryOne extends Component { goTwo = () => { // 跳转传参 this.props.history.push({ pathname: '/paramTwo', query: {原创 2021-08-21 00:19:13 · 1748 阅读 · 0 评论 -
react使用clipboard复制文本数据
首先安装:yarn add clipboardimport React, { useCallback, useState } from 'react';import ClipboardJS from 'clipboard';const Home = () => { const [text, setText] = useState('') // 选择一个按钮初始化一个Clipboard实例 new ClipboardJS('.btn') // 点击按钮请求接口数据复制.原创 2021-08-04 01:47:49 · 1931 阅读 · 0 评论 -
react函数组件特性和memo及useCallback的使用
每次状态更新组件都会重新渲染 每次组件更新就像是在给组件拍照,每次更新就是一张照片,记录了组件在某个时刻的状态 组件每次更新都有自己独立的state/props/事件处理程序等 每次拍照的照片在代码层面来讲都是通过函数的闭包机制实现的...原创 2021-08-03 10:15:46 · 531 阅读 · 0 评论 -
react hooks的使用
useState原创 2021-08-02 01:20:08 · 213 阅读 · 0 评论 -
react组件性能优化
1.减轻statestate中只存放和组件渲染相关的状态数据,和组件渲染无关的比如定时器id等状态数据可以直接放在组件实例this上,这样一样能够通过this在组件别的地方进行共享,尽可能的减轻state的重量,这样能够提高react渲染更新时的效率2.避免不必要的渲染因为react的组件更新机制,只要父组件更新状态重新渲染它的子组件树也会跟着重新渲染,有时我们仅仅只希望部分组件重新render,那么我们就可以在组件重新渲染之前shouldComponentUpdate钩子函数里做手脚,通过条件原创 2021-07-28 19:18:04 · 238 阅读 · 0 评论 -
react组件更新机制
react组件更新时会将其本身和所有它的子组件都进行render更新,比如更新了Parent2,那就只有它本身和它的所有子组件会更新,这里的子组件包括后代组件:原创 2021-07-28 17:07:21 · 520 阅读 · 0 评论 -
setState()的异步更新和第二个参数
我们用setState({})去更新状态时,发现更新后拿到的状态不是最新的,还是更新前的,所以setState是异步更新的,那么怎么拿到更新之后的state再次进行setState呢?state = { count: 1}this.setState({ count: this.state.count + 1})this.setState({ count: this.state.count + 1})// 上面这种方式执行两次后count的值仍然是2,因为是异步更新原创 2021-07-28 16:45:11 · 2558 阅读 · 0 评论 -
cra配置代理
在package.json中配置一个字段:"proxy":"服务器接口的地址+端口"以上配置会先走本地的public文件夹,本地没有找到才会找服务器接口复杂配置:在src下创建一个setupProxy.js编写代理规则信息const proxy = require('http-proxy-middleware')module.exports = function(app) { app.use( proxy('/api1', { //api1是需要转发的请求(所有带有原创 2021-07-27 21:01:32 · 842 阅读 · 0 评论 -
React新旧生命周期
constructor:初始化阶段 componentWillMount:组件将要挂载 componentDidMount:组件完成挂载 componentWillReceiveProps:组件除了第一次以后接收props都会触发 shouldComponentUpdate:组件是否更新的阀门,不写默认返回true,返回false就不会更新,通过forceUpdate强制更新不会触发阀门 render:组件第一次加载和每次更新视图都会触发 componentWillUpdate:组件将要更新原创 2021-07-17 18:09:12 · 183 阅读 · 0 评论 -
react事件接收参数(高阶函数+科里化)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.原创 2021-07-13 19:38:19 · 412 阅读 · 0 评论 -
React的props校验和默认值
基本校验:React v15.5及以下版本:Component.propTypes = {name: React.PropTypes.string.isRequired,age: React.PropTypes.number}以上方式在v15.5以上版本已弃用,React对象上已经不存在PropTypes这个对象,使用prop-types库代替// 新版写法Component.propTypes = {name: PropTypes.string.isRequired,age原创 2021-07-13 17:35:02 · 431 阅读 · 0 评论 -
React的事件相关
1.通过onXxx属性指定事件处理函数(注意大小写) 1)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 (为了更好的兼容性) 2)React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) (减少dom事件注册,为了提高效率) 2.通过event.target得到发生事件的DOM元素对象 ...原创 2021-07-13 17:22:27 · 96 阅读 · 0 评论