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、编辑时候回填参 ...
react中map的应用
当需要遍历数组时，特别是需要遍历多个数组时，我们就可以封装函数，从而提高代码的复用率，还要注意两点哦，1.数组的map可以进行遍历，需要加唯一的key值，2.封装成函数的话，记得内部需要加return关键字！
<div id="app"></div>
//当为多个数组时。
var arr = ["a","b","c"]
var arr2 = ["d","e","f"]
//封装函数
f ...
React Hook 的底层实现原理
原文
https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba
前言
新的React Hook系统在社区中引起的反响很大。人们纷纷动手尝试，并为之兴奋不已。一想到 hooks 时它们似乎是某种魔法，React 以某种甚至不用暴露其实例（起码没有用到这个关键词）的手段管理了你的组件。 ...
【独家】React Native 版本升级指南
前言
React Native 作为一款跨端框架，有一个最让人头疼的问题，那就是版本更新。尤其是遇到大版本更新，JavaScript、iOS 和 Android 三端的配置构建文件都有非常大的变动，有时候三者的配置文件又互相耦合在一起，往往牵一发而动全身。
本文假定 React Native 升级的主导者是前端同学，比较熟悉 javaScript 为主的一套前 ...
react-router-config的使用
react-router-config
介绍
是一个辅助react-router的插件，主要是使用配置文件集中式管理路由。
import React from 'react'
import { Redirect } from 'react-router-dom'
import Home from '../application/Home';
import Recommend from '../application/Recommend';
import Singers from '../application/Singers';
impo ...
从零搭建基于 react 17.x + antd 4.x 的业务组件库
一些废话
在前端的飞速发展下，这十年里，前端从美工切图仔演变成如今的大前端，在互联网时代中占据越来越重要的位置。前端工程化，模块化成为前端提效利器。越来越多公司也开始重视，开始搭建适用于公司内部，或者业务线内部的组件库。这篇文章将遵循 是什么 为什么 怎么做 来一起搭建业务组件库，或者太长不想看直接看代 ...
react中使用axios + mockjs模拟后台数据
之前写了在vue中使用mockjs模拟后台接口,现在使用react,也把react中的使用写一下.基本方法和vue一样
我这个项目是用react脚手架搭建的,项目源码地址: https://github.com/shengbid/my-react-admin
1. 安装mockjs和axios
yarn add axios -S
yarn add mockjs - D
...
react 入坑学习（八）Hooks React 父组件向子组件传值 react hooks子给父传值
https://blog.csdn.net/qq_40044912/article/details/107812704
react hooks子给父传值
https://blog.csdn.net/zyj12138/article/details/107468389
子组件：
import { useState, useContext } from 'react';
import { FatherContext } from './index';
import { Form, Input, Select } from 'an ...
封装React AntD的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的，比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似，所以很有必要对这些表单来一个简单的封装。
其实，封装组件的意 ...
