![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
diaojw090
人工智能
展开
-
antd Form.item upload 上传检验格式大小
upload上传检验原创 2023-02-25 11:45:57 · 312 阅读 · 0 评论 -
vite.config.ts
vite配置原创 2022-06-15 17:21:18 · 277 阅读 · 0 评论 -
rules校验问题
Form.Item:```handlebarsrules={[{requried:true,message:'必填', type:'类型',transform(val){ // 指定类型: type默认string number array if(val){ // 可以正则表达式 return val // 与类型对应 }}}]}原创 2022-05-13 19:39:55 · 132 阅读 · 0 评论 -
实现遍历异步函数for await of (图片加载canvas绘图)
示例:以下为核心代码:1.异步加载图片的组件<Image style={{width: '100%', height: '120px'}} src={item.image} preview={{ src: imageUrl, visible: !!imageUrl, onVisibleChange: (visible, prevVisible) => { console.log(vi原创 2021-05-19 20:15:11 · 351 阅读 · 0 评论 -
react websocket useState
const data = [{happenTime:'时间', location:'位置',deviceIp:'IP',eventName:'事件类型',status:'处理信息',isMake:0,image:undefined}] const [currentData,setCurrentData] = useState(data) useEffect(()=>{ if(sessionStorage.currentData){ let arr = JSO原创 2021-04-28 20:10:27 · 239 阅读 · 0 评论 -
2021-03-23
react eslint 配置文件文件名:.eslintrc.jsmodule.exports = { 'env': { 'node': true, 'browser': true, 'amd': true, 'es6': true }, 'parser': 'babel-eslint', 'extends': [ 'eslint:recommended', 'plugin:react/recommended' // 新增 ],原创 2021-03-23 15:40:40 · 88 阅读 · 0 评论 -
useMemo和useCallback
useCallback之前如果我们在render中定义了一个方法:render() { const {data} = this.state; const filter = data.filter(e => e.id !== 5); ...}那么我们知道每次render都会执行filter这个方法,其实你是不是觉得当data没变这个方法只要执行一次就好了,看看react hook怎么做的function demo() { ... const filte原创 2021-03-23 15:37:18 · 76 阅读 · 0 评论 -
useMemo 与 useCallback
回顾在介绍一下这两个hooks的作用之前,我们先来回顾一下react中的性能优化。在hooks诞生之前,如果组件包含内部state,我们都是基于class的形式来创建组件。当时我们也知道,react中,性能的优化点在于:调用setState,就会触发组件的重新渲染,无论前后的state是否不同父组件更新,子组件也会自动的更新基于上面的两点,我们通常的解决方案是:使用immutable进行比较,在不相等的时候调用setState;在shouldComponentUpdate中判断前后的props和st原创 2021-02-26 10:46:50 · 126 阅读 · 0 评论 -
TypeScript中解构函数参数
async function update({id, ...todoInfo }: ITodo) { // this line here const db = await makeDb() const foundTodo = await db.collection('todos').updateOne({ _id: transformId(id) }, { $set: { ...todoInfo } }) return foundTodo.modifiedCount > 0 ?原创 2021-02-24 09:58:35 · 4105 阅读 · 0 评论 -
useState修改对象的字段
首先定义一个空对象 const [dataSelect, setDataSelect] = React.useState({})给这个对象附上不同值,但不会把原来的覆盖的掉 const select = (e, item, type) => { const data = { ...dataSelect } if (type == 'price') { setSelectNO(e) data.min_price = item.min_price原创 2021-02-24 09:55:53 · 2549 阅读 · 0 评论 -
ant+transfer+ts
代码可直接运行import React, { useState } from 'react';import { Transfer, Tree } from 'antd';// Customize Table Transferconst isChecked = (selectedKeys:any, eventKey:any) => selectedKeys.indexOf(eventKey) !== -1; interface TreenodeInter { key:any; tit原创 2021-02-23 21:06:09 · 316 阅读 · 0 评论 -
react BrowserRouter情况的配置,部署指定路径出现页面空白
报错: 顺序问题解决方法:引入多个组件时,顺序一=一致。原创 2020-06-10 20:36:34 · 3416 阅读 · 0 评论 -
父子传值相关
react-hooks父子传值原创 2021-02-05 10:37:58 · 67 阅读 · 0 评论 -
用next搭建一个完善的react服务端渲染项目(集成antd、redux、样式解决方案)--------连接
访问地址转载 2019-08-20 17:51:46 · 730 阅读 · 0 评论 -
搭建一个react项目
1.快速搭建如果只是想试试 React,那么建议使用 create-react-app来创建一个react项目npx create-react-app my-appcd my-appnpm start因为 create-react-app 和 vue-cli 不一样,create-react-app将webpack的相关配置直接封装好了,所以自定制化程度不高,所以2.手动构建一个 Re...原创 2019-07-11 21:47:57 · 111 阅读 · 0 评论 -
基于React+Redux的SSR实现方法
为什么要实现服务端渲染(SSR)总结下来有以下几点:1.SEO,让搜索引擎更容易读取页面内容2.首屏渲染速度更快(重点),无需等待js文件下载执行的过程3.代码同构,服务端和客户端可以共享某些代码今天我们将构建一个使用 Redux 的简单的 React 应用程序,实现服务端渲染(SSR)。该示例包括异步数据抓取,这使得任务变得更有趣。如果您想使用本文中讨论的代码,请查看GitHub:...转载 2019-06-03 16:12:38 · 247 阅读 · 0 评论