随笔分类 -  React

使用 cross-env 配置多环境变量：Vue、React、Angular 全指南
摘要：在开发前端项目时，管理不同环境（开发、测试、生产）的变量是常见的需求。cross-env 是一个跨平台的环境变量设置工具，能帮助开发者在不同操作系统（如 Windows、macOS、Linux）中统一配置环境变量。本文将详细介绍 cross-env 的安装与使用，并覆盖 Vue2、Vue3、Reac 阅读全文
posted @ 2025-05-14 09:59 小短腿奔跑吧 阅读(764) 评论(0) 推荐(0)
请简述 React 16 版本中 commit 阶段的三个子阶段分别做了什么事情
摘要：1. before mutation阶段 (操作 Dom 前) 更新情况下：`主要调用类组件生命周期函数getSnapshotBeforeUpdate,并且把旧的props和旧的states传递进去 // commit 阶段的第一个子阶段 // 调用类组件的 getSnapshotBeforeUpd 阅读全文
posted @ 2021-05-31 18:52 小短腿奔跑吧 阅读(335) 评论(0) 推荐(0)
为什么 React 16 版本中 render 阶段放弃了使用递归
摘要：因为递归是不能被中止的，需要一直占用线程，而 JS 又是属于 单线程, 所以 当我们需要执行操作时，是不能被中断的，一旦执行，则需要全部操作执行完成后，才可释放线程， 在这种情况下，我们在第一次渲染的时候，程序需要将 生成 Dom 和 包含事件 全部准备齐全后，才会添加 元素到 页面，并展示到浏览器 阅读全文
posted @ 2021-05-31 18:27 小短腿奔跑吧 阅读(103) 评论(0) 推荐(0)
React workInProgress Fiber 树存在的意义是什么
摘要：1. React 中使用双缓存的机制，来完成 Firber树的构建与替换，实现 Dom 对象的快速更新。 2. React 中会同时存在两个 Fiber 对象，当前在屏幕中显示的树是 CurrentFiber 树，当发生更新时，React会重新创建一颗新的Firber树是 WorkInProgres 阅读全文
posted @ 2021-05-31 18:25 小短腿奔跑吧 阅读(426) 评论(0) 推荐(0)
React 如何实现骨架屏的展示-Suspense
摘要：React新增了一个功能 Suspense组件，帮助我们“等待”目标代码加载，并且可以直接指定一个加载的界面（像是个 spinner），让它在用户等待的时候显示 一、引入 Suspense import React, { Component, Suspense } from "react"; 二、使 阅读全文
posted @ 2020-11-04 11:59 小短腿奔跑吧 阅读(2187) 评论(0) 推荐(0)
React 全屏Dom
摘要：1. 新建 screen.ts 文件 /** DOM-全屏 */ const requestFullScreen = (domName: any) => { return new Promise(resolve => { let dom: any = document.getElementById( 阅读全文
posted @ 2020-10-21 17:42 小短腿奔跑吧 阅读(336) 评论(0) 推荐(0)
react 使用<a> 标签注意事项
摘要：当我尝试使用a标签跳转页面 <a href="http://baidu.com" target="_blank" ></a> 提示报错：使用 target="_blank" 没有加 rel="noopener noreferrer" 是 有安全风险的，可查看以下链接进行详细查看 Using targ 阅读全文
posted @ 2020-10-12 10:52 小短腿奔跑吧 阅读(4112) 评论(0) 推荐(0)
reactjs-使用useEffect React Hook时如何解决缺少依赖项警告？
摘要：使用React 16.8.6（在以前的版本16.8.3中很好），当我尝试调用封装方法时，出现此错误 React Hook useEffect has missing dependencies: 'CloseSignalRConnection' Either include them or remov 阅读全文
posted @ 2020-10-12 10:33 小短腿奔跑吧 阅读(4059) 评论(0) 推荐(0)
React 产线去掉 console.log 打印
摘要：打开 config / webpack.config.js ， 搜索 optimization module.exports = { optimization:{ minimizer: [ new TerserPlugin({ sourceMap:false, terserOptions:{ com 阅读全文
posted @ 2020-09-29 14:44 小短腿奔跑吧 阅读(1838) 评论(0) 推荐(0)
React , TypeScript, CSS Module , Less , Antd 遇到的坑
摘要：序 因为React 本身的脚手架自身在webpack中已经做了对CSS Module 的配置，因最近遇到了很多坑，所以从头整理了一遍 使用版本 "react": "^16.13.1", "antd": "^4.4.0", "typescript": "~3.7.2", "webpack": "4.4 阅读全文
posted @ 2020-07-01 15:19 小短腿奔跑吧 阅读(12494) 评论(3) 推荐(1)
React 16.3, Antd 4.2, 侧边栏的 Icon 由后端返回，Icon显示问题
摘要：import React, { Component } from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import { Layout, Menu } from 'antd';// 模 阅读全文
posted @ 2020-05-18 18:05 小短腿奔跑吧 阅读(1628) 评论(1) 推荐(1)
移动端悬浮框可移动，可回弹，Vue and React
摘要：一，首先讲 React的悬浮框 示例，可参照链接 Demo文档，可参照链接 1. 安装 npm install suspend-button -S 2. 使用 import React, { Component } from 'react' import ReactDOM from 'react-d 阅读全文
posted @ 2020-03-23 16:09 小短腿奔跑吧 阅读(1408) 评论(1) 推荐(0)
react 瀑布流
摘要：pull.tsx import { View, Image, ScrollView } from '@tarojs/components' import Taro, { Component } from '@tarojs/taro' import './index.scss' type Props 阅读全文
posted @ 2020-03-18 11:44 小短腿奔跑吧 阅读(1099) 评论(0) 推荐(0)
教你如何在项目中如何将Redux写法更方便，更好维护
摘要：因每个页面都有所关联的，请将所有页面新建或修改完毕，再运行 1. 安装 Redux npm install --save redux 2. 安装React-Redux npm install --save react-redux 3.修改src/index.js 2. 创建/src/store/in 阅读全文
posted @ 2019-12-25 11:28 小短腿奔跑吧 阅读(423) 评论(1) 推荐(0)
React 积累
摘要：1. Fragment 标签 使用介绍：因React要求每个组件都需要一个大的外层包裹起来才可以，否则报错，如果你并不想组件外层由一个大大外层包裹，则可以使用Fragment 标签 代码示例： 2. dangerouslySetInnerHTML={{ __html: e }} e可为(html标签 阅读全文
posted @ 2019-12-16 18:57 小短腿奔跑吧 阅读(164) 评论(0) 推荐(0)
React 获取真实Dom v8.6.2版本
摘要：React-props 阅读全文
posted @ 2019-12-11 16:20 小短腿奔跑吧 阅读(268) 评论(0) 推荐(0)
React 如何适用less
摘要：1.使用 create-react-app 创建的项目，默认情况下是看不到 webpack 相关的配置文件，我们需要给它暴露出来，使用下面命令即可： npm run eject 2.添加less npm install less less-loader --save-dev 3.修改webpack配 阅读全文
posted @ 2019-08-22 14:07 小短腿奔跑吧 阅读(1196) 评论(0) 推荐(0)