React之React.cloneElement
如果把一个页面分为多个组件组成的话(组件多层嵌套)，
想要在Panel和Calendar之间传值就不能用以往的props属性了。
解决方法：
Panel.js
return (
<Form.Root className={`bg-white ${type === 'reading' ? 'reading-min-height' : ''}`}>
<div className="panel-title">
...
React Hooks与setInterval
前言
Hooks出来已经有段时间了，相信大家都用过段时间了，有没有小伙伴们遇到坑呢，我这边就有个 setInterval 的坑，和小伙伴们分享下解决方案。
前言
写个 count 每秒自增的定时器，如下写法结果，界面上 count 为 1 ？
function Counter() {
let [count, setCount] = useState(0);
useEff ...
在 React 中使用 Typescript
前言
用 Typescript 写 react 可比写 vue 舒服太多了，react 对 ts 的支持可谓天生搭档，如果要用 ts 重构项目，不像 vue 对项目破坏性极大，React 可以相对轻松的实现重构。
顺便一提：全局安装的 create-react-app 现已无法再下载完整的 React 项目模版，必须先 npm u ...
如何实现 React 模块动态导入
如何实现 React 模块动态导入
React 模块动态导入
代码分割
webpack & code splitting
https://reactjs.org/docs/code-splitting.html
https://zh-hans.reactjs.org/docs/code-splitting.html
Code-Splitting 可以创建多个可在运行时动态加载的包
https://webpack.js.org/guides/code-splitting/
https://rollupjs.o ...
React入门(增删改查)
话不多说,直接上代码,有哪些细节不会的问题可以直接问我,我会尽我所能回答
添加页面:
@{
ViewData["Title"] = "Add";
}
<h1>添加页面</h1>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdn.static ...
react useCallback的常规使用方式?
怎么使用好useCallback，来达到减少render次数的效果
react优化方式
减少render次数
减少计算量
下面的代码，当handleClick1时间触发时，PageB组件也会重新渲染
import React, { memo, useCallback, useState } from 'react'
function PageA (props) {
const { onClick, children } = props
console.log(111, prop ...
如何快速构建React组件库
前言
俗话说：“麻雀虽小，五脏俱全”，搭建一个组件库，知之非难，行之不易，涉及到的技术方方面面，犹如海面风平浪静，实则暗礁险滩，处处惊险～
目前团队内已经有较为成熟的 Vue 技术栈的 NutUI 组件库[1] 和 React 技术栈的 yep-react 组件库[2]。然而这些组件库大都从零开始搭建，包括 Webpack 的繁杂配置，Markdown ...
redux和react-redux的区别及用法
笔记，参考程墨老师的《深入浅出React和Redux》。阅读之前可以先了解flux框架
Redux框架
Redux原则
Flux的基本原则是“单向数据流”, Redux在此基础上强调三个基本原则：
唯一数据源
唯一数据源指的是应用的状态数据应该只存储在唯一的一个Store上。这个唯一Store上的状态，是一个树形的对象，每个组件往往只是用树形 ...
react监听URL的正确方式
1、原生js硬刚
componentDidMount(){
window.addEventListener('hashchange', this.routerEvent);
}
componentWillUnmount(){
window.removeEventListener('hashchange',this.routerEvent);
}
routerEvent = (e)=>{
// e.target.location.hash.replace("#","")
// 去掉#就能获取即将跳转的那个路由的url了
}
Tips ...
React.createPortal（）
https://blog.csdn.net/sd19871122/article/details/97612107
https://blog.csdn.net/mmzzll2019/article/details/89348085?utm_medium=distribute.pc_relevant.none-task-blog-title-3&spm=1001.2101.3001.4242
createProtal 改造 Modal 组件
在 html 中除了 div#root 之外，给 Modal 预留了一个新的 ...
React 入门(7): 动态加载组件
import()异步加载模块
在webpack中, 调用import()函数可以将依赖模块进行切割, 打包为非入口点文件, 这是通过Promise+ajax完成的. 请求路径是相对路径, 对于单页应用来说没有问题.
非入口点文件的命名由webpack.config.output.chunkFilename(可以定义路径, 使用[name]和[id]变量)以及Magic Comment(定义[name]变量)共同确定 ...
React 监听页面滚动，界面动态显示
当页面滚动时，如何动态切换布局/样式
1. 添加滚动事件的监听/注销
//在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理 componentDidMount() { window.addEventListener('scroll', this.bindHandleScroll) } //在componentWillUnmount，进行scroll事件的注销 c ...
react项目结合echarts,百度地图实现热力图
一.最近在一个react项目（antd pro）中需要展示一个热力地图。需求是：
1.热力地图可缩放；
2.鼠标点击可以展示该点地理坐标，及热力值。
3.初始化时候自适应展示所有的热力点。
4.展示热力标尺。
二.在实现的过程中出现了不少的问题.
引入地图出现问题1.缩放地图的时候中心点会漂移。 解决方案: ...
Flipper & React Native
Flipper & React Native
Flipper
Flipper是一款用于调试移动应用程序的出色开发人员工具，在Android和iOS社区中颇受欢迎。
Flipper is a great developer tool for debugging mobile apps and quite popular in the Android and iOS communities.
https://fbflipper.com/
https://github.com/facebook/flipper
React N ...
react 路由组件懒加载
react 路由组件懒加载
1 主要依赖插件：
react-loadable : npm i react-loadable
antd : npm i antd
2 配置文件：
新建 loadable.js
import React from 'react';
//react 版本17》生命周期名称改为 UNSAFE_componentWillMount
import Loadable from 'react-loadable';
import { Spin } ...
使用Jest和React Test library 进行React单元测试
React单元测试，就是把React 组件渲染出来，看看渲染出来的内容符不符合我们的预期。比如组件加载的时候有loading, 那就渲染组件，看看渲染出的内容中有没有loading. 再比如，ajax请求完成后，组件要显示返回的数据, 那就渲染组件， 等待请求完成，然后看看渲染出来内容是不是请求返回的数据。那怎么渲染？怎么查看渲染 ...
creact-react-app+react-route-dom路由跳转页面不渲染，或者不变化
react-app+react-router-dom路由跳转页面不渲染，或者不变化
路由配置：
import React from 'react'
import {Router, Route, Switch} from 'react-router-dom' //BrowserRouter as
import { createBrowserHistory } from 'history'
import Login from './login';//普通加载模块
import Main from './main';
const histor ...
React前端js跳出ForEach循环的方式
React前端js跳出ForEach循环的方式
今天踩了一个前端的坑。当forEach循环中满足某个条件时候就不在循环了。内心第一反应 添加return false 或 return 搞定~ 但是代码他依旧继续循环。
最后找到问题所在，forEach跳出的方法是throw err次才行，严格意义上说 map forEach 他们本身属于迭代行为 就不支持跳出的。当然这个 ...
React获取DOM元素-ref属性
React获取DOM元素-ref属性
类组件
通过ref给元素做标记（react不推荐使用）
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
componentDidMount(){ //类似于vue中mounted
this.refs.textInput.focus()
}
...
react antd动态增减表单
之前写动态表单遇到过坑，就是用index下标做key会导致bug，而且很严重！
今天有空写下文章记录下：怎么处理和逻辑
我用的是antd3的版本，3和4的表单有点不一样，不过差别应该不大。
需求：
1、选择类型切换展示固定的模板
2、通过新增字段可以动态增减表单里面的每一行
3、控制每一行的字段是否需要必填
4、编辑时候回填参 ...
