随笔分类 - react
摘要：const App = () => { const value = `例子：\n今天天气不错`; const value1 = `例子：\r今天天气不错`; return ( <> <TextArea placeholder="例子： 今天天气不错" style={{ height
阅读全文
摘要：React class render props mouse-position.js import React, { Component } from 'react' class MousePosition extends Component { constructor(props) { super
阅读全文
摘要：useState useState，让函数组件拥有了维持状态的功能。维持状态是指在函数的多次渲染之间，这个state是可以在函数中间共享的 使用方式 import React, { useState } from 'react'; const Counter = () => { const [cou
阅读全文
摘要：低版本node与swiper版本导致的错误 最近在nextjs项目中使用swiper，版本信息如下： node版本12.9.1 "next": "11.1.0", "swiper": "7.4.1", 项目打包后报错： (node:159) ExperimentalWarning: The ESM
阅读全文
摘要：antd switch 赋值不成功 最近在使用antd switch时，遇到一个意外的问题，switch组件初始化赋值没成功 import React, { useEffect } from 'react'; import { Form, Switch } from 'antd'; const Mo
阅读全文
摘要：场景1 新建组件Page1与Page2，两个组件的根节点className设置为一样 目录结构如下： src/pages/page1/index.js import React from 'react' import './index.css' function Page1() { return
阅读全文
摘要：项目开发部署流程 创建项目开发 开发完成后，对项目进行打包 上传打包文件到服务器指定目录 配置nginx进行转发即可 以react项目为例 创建项目 // 通过create-react-app来创建一个react项目 npx create-react-app my-app 打包 // 项目打包，生成
阅读全文
摘要：visibilityChange api的使用场景 场景 最近在做网页版视频编辑器相关的工作，页面视频会自动重复的播放，但是发现在页面切换后，音视频还是在自动播放，感觉非常不合理 在没有在当前页面停留时，页面还是不停的请求资源，造成了很大的浪费 后面就发现visibilityChange能够很好的解
阅读全文
摘要：react中的虚拟dom，本质上是一种对象形式到dom的描述，虚拟dom的操作是在js层面的计算，如果把js映射生成真实的dom 调用生命周期中的render方法，生成虚拟dom，然后再调用reactDom.render方法，实现虚拟dom的真实dom转换 组件的再次更新，会再次调用render方法
阅读全文
摘要：怎么使用好useCallback，来达到减少render次数的效果 react优化方式 减少render次数 减少计算量 下面的代码，当handleClick1时间触发时，PageB组件也会重新渲染 import React, { memo, useCallback, useState } from
阅读全文
摘要：高阶函数 使用方式 在导出函数上面使用@HOC，@HOC function() {} @HOC语法通过es7中decorator来实现的，需要配置babel来兼容才可以使用 导出时使用HOC进行包裹，export default HOC(HocComponent) 高阶函数使应用场景 目的：把常用的
阅读全文
摘要：react hooks 实现一个计时器 endTime对应服务端返回的时间 import React, { useState, useEffect } from 'react' const completionFunc = value => { if(String(value).length 1)
阅读全文
摘要：react ref场景的使用场景及使用方式 ref主要用来做什么的 用来直接操作DOM，来完成一些操作 焦点，选中，动画等 两个常见的使用场景 获取元素的宽度来完成某些动画 获取/失去输入框焦点 几种创建方式 this.ref1 = ref => {this.refDom = ref} this.r
阅读全文
摘要：来源掘金小册 - react实战：设计模式和最佳实践 react设计思想 属性展开 - 保留当前组件需要的props，并且使其他的props传递下去 var obj = {a: 1, b: 2, c: 3, d: 4, e: 5} const { a, ...other } = obj consol
阅读全文
摘要：最近在使用umijs进行H5开发工作，在开发的过程中踩了一些坑，在这里记录一下。 1：按需加载在现在是很常见的优化方式了，我在.umirc.js中开启dynamicImport后，运行umi build打包后，在本地开index.js文件后，发现页面运行不起来，后来打开console后发现，是mod
阅读全文
摘要：最近项目中，前端采用react+antd+dva的组合，已经完成了后头管理类系统产品的更新迭代工作。 今天有一个新需求，需要在后台管理系统中实现点击打印完成指定页面的打印功能。 之前也没接触过，只知道浏览器带有打印功能的实现，window.print()。 问题来了，在react中是没有dom节点的
阅读全文
