react
道甚夷
最近都在爬山
展开
-
React移除组件后setState的报错处理
有些时候,我们想在请求后再去更新组件的状态从而更新UI,比如删除一个列表的某一个项。整个流程就是用户先点击按钮,按钮发起删除请求api,api发送成功后执行回调,回调里面执行state的更改,从而从新渲染页面。若获得响应时,组件已经被移除,则会导致互相引用,React 抛出一个错误,告诉你这样会导致内存溢出。index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op原创 2021-10-11 18:42:38 · 499 阅读 · 0 评论 -
react 生命周期按版本汇总
React1617版本生命周期汇总:原创 2021-09-30 17:09:19 · 1572 阅读 · 0 评论 -
react 造成组件更新有两类(三种)情况
一. 父组件重新render1.1直接使用,每当父组件重新render导致的重传props,子组件将直接跟着重新渲染,无论props是否有变化。可通过shouldComponentUpdate方法优化。class写法:import React, {Component} from 'react'class Child extends Component { constructor(props) { super(props) } // 直接使用,每当父组件重新render导致的重传p原创 2021-09-29 13:46:23 · 753 阅读 · 0 评论 -
getDerivedStateFromProps和componentDidUpdate的使用
react 17版本使用getDerivedStateFromProps接收外部数据同步到本地state。componentDidUpdate里面发送异步请求。Foo.jsimport { useState } from 'react'import GetDerivedStateFromProps164plus from './GetDerivedStateFromProps164plus'// 父组件重新render引起子组件重新render的情况有两种const App = () =原创 2021-09-29 11:11:26 · 1137 阅读 · 2 评论 -
浅拷贝及应用
当面试官问你下面的问题:讲讲浅拷贝,可能最后会问到,如果拷贝的对象属性是一个引用,那会怎样?vuex里面的数据是怎么更新的?为什么使用mutaion和action?为什么用mutaion去更新state而不是action?基本类型undefined,null,boolean,number,string,symbol原始值都是不可更改的,都是返回新的值怎么返回新的值?引用类型Object, Array, Function, Date, RegExpjs中不允许直接返回原创 2021-09-27 16:41:32 · 131 阅读 · 0 评论 -
react数组和对象数据更新同时更新视图示例
直接上代码import { Button } from "antd";import { useState } from "react";const UpdateQuestion = () => { let state = { arr: ["a", "b", ["d", "e", "f"], ["1", "2", "3"]], obj: { msg: "ok", data: { page: 10, list: [原创 2021-09-23 11:42:57 · 1058 阅读 · 0 评论 -
react 别名配置汇总
react 别名配置jsconfig.json 配置不成功暂时找不到原因,知道的网友还请留言告诉我。目前我是自己写了一小段端代码加上的。网上的方法:直接在webpack.config.js里面配置。最简单,可以,但嫌弃。alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-nativ原创 2021-09-17 13:58:39 · 1218 阅读 · 0 评论 -
异步加载路由原理
基本原理目录结构 src util asyncRouter.js a.js b.js组件aconst a = () => { return ( <div > a </div> );}export default a组件bconst b = () => { return ( <div > b </div> );}export default原创 2021-09-16 11:04:45 · 1234 阅读 · 0 评论 -
mobx-TodoList-6版本
mobx-TodoList-6版本写react demo不写版本就是不讲武德。(把react去掉)版本:"react": "^17.0.2","mobx": "^6.3.3","mobx-react": "^7.2.0","@babel/core": "7.12.3","@babel/plugin-proposal-decorators": "^7.15.4",安装:npm install mobx mobx-react -Sgit init && git add .原创 2021-09-13 16:27:11 · 164 阅读 · 0 评论 -
Support for the experimental syntax ‘decorators-legacy‘ isn‘t currently enabled
react 安装但没有配置好修饰器项导致报错需要去package.json配置"babel": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ], "presets": [ "react-app" ] },...原创 2021-09-06 18:05:20 · 98 阅读 · 0 评论 -
Parsing error: Using the export keyword between a decorator and a class is not allowed
将class移到最下面导出。。。记录个寂寞。。。原创 2021-09-06 17:34:24 · 313 阅读 · 0 评论 -
npm run eject报错
初始化一下仓库即可。。。记录个寂寞。。。原创 2021-09-06 16:54:53 · 225 阅读 · 0 评论 -
react hook useMemo, memo, useCallback区别
import './App.css';import {useState, useMemo, memo, useCallback} from 'react'let Count = memo(function (props) { // memo缓存整个组件 console.log('子组件渲染') return <div>子组件count值: {props.double}</div>})// 场景// react在使用useState时,会重新渲染组件,包括其子组件。使原创 2021-08-23 16:44:36 · 113 阅读 · 0 评论 -
react 部署服务器上线
主要是page.json里面设置“homepage”: “.”查看api请求,查看代理设置是否对的上线上。原创 2020-08-18 11:52:31 · 217 阅读 · 0 评论 -
react ant design 设置代理 解决跨域问题
简单代理:page.json文件里面加上“proxy”: “http://www.xxx.com/”axios或者flyio里面baseUrl = ‘/api/’ ,这个根据后台需要设置原创 2020-08-18 11:50:01 · 1182 阅读 · 0 评论 -
react ant design upload 多个单文件上传
// 图片上传 async handleUpload(file) { const formData = new FormData(); formData.append("file", file); this.setState({ uploadLoading: true, }); let res = await upload(formData); return res; } // 提交表单 onFinish = async (v.原创 2020-08-18 11:34:43 · 3991 阅读 · 0 评论 -
react ant design 表单验证
金额<Form.Item name="commission" label="佣金" rules={[ { pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '请正确填写佣金' } ]} > <Input placeholder="佣金" /></Form.Item>电子邮箱<Form.Item name="原创 2020-08-18 11:09:36 · 765 阅读 · 0 评论 -
react ant design casecader 联动递归显示
joinJobs(jobs) { let options = [] jobs.map((item, key) => { options.push({ // value: item.id, value: item.name, label: item.name, isLeaf: item.subjobs ? false : true, }) if(item.subjobs) {原创 2020-08-18 11:04:06 · 252 阅读 · 0 评论 -
umi安装报错:文件名、目录名或卷标语法不正确。
文件名、目录名或卷标语法不正确。error Command failed.Exit code: 1Command: D:\soft\wsoft\nvm\global_modules\bin\create-umi-app根据提示找到对应的文件D:\soft\wsoft\nvm\global_modules\bin\create-umi-app找到此文件create-umi-app.cmd注意是带cmd后缀的文件!将原内容修改为@"C:\Users\mayn\AppData\Local\Yar原创 2020-07-12 16:13:56 · 2916 阅读 · 0 评论