react-redux 的使用
前言
最近在学 react，看到 react-redux 这里，刚开始觉得一脸懵逼，后面通过查阅相关资料和一些对源码的解释，总算有点头绪，今天在这里总结下。
类似于 vue，React 中组件之间的状态管理 第三方包为：react-redux。react-redux 其实是 Redux的官方React绑定库，它能够使你的React组件 ...
react-leaflet：将React和Leaflet结合起来
https://react-leaflet.js.org/
React Leaflet provides bindings between React and Leaflet. It does not replace Leaflet, but leverages it to abstract Leaflet layers as React components. As such, it can behave differently from how other React components work, notably:
React-Leaflet提供React和Leafl ...
react antDesign hook 大数据表格虚拟滚动
业务使用
// 使用虚拟列表
const virtualComponents = useVirtualTable({
height: 350 // 设置可视高度
})
const components = useMemo(() => {
return {
body: {
wrapper: virtualComponents.body.wrapper
},
table: virtualComponents.table
}
}, [ virtualComponents] ...
使用create-react-app搭建TypeScript+React+Ant Design开发环境
一、使用create-react-app创建一个支持TypeScript+React的开发环境：
要创建一个支持TypeScript的Create React App项目，可以运行：
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript
要将TypeScript添加到已有的Create React App项目，请先安装它：
npm ...
基于React.js网页版弹窗|react pc端自定义对话框组件RLayer
基于React.js实现PC桌面端自定义弹窗组件RLayer。
前几天有分享一个Vue网页版弹框组件，今天分享一个最新开发的React PC桌面端自定义对话框组件。
RLayer 一款基于react.js开发的PC端自定义Layer弹出框组件。支持超过30+参数自由配置，通过轻巧的布局设计、极简的调用方式来解决复杂的弹出层功能，为您呈上不一样的弹窗效果 ...
react-router-dom基本使用+3种传参方式
//App.js
import {
BrowserRouter as Router,
Route,
Link,
} from "react-router-dom";
// 引入组件
import Home from "....";
import News from "...."
function App() {
return (
<Router>
<Link to="/">首页</Link>
<Link to="/news">新闻</Link>
<Route exact path="/" component={Hom ...
手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队，服务于华为云DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。官方网站：devui.designNg组件库：ng-devui（欢迎Star）
引言
“他在正午、黄昏，在一天里的许多时刻去感受它、记录它，结果也就让我们看到了那么多的不同。他描绘它的角度没 ...
图解React SSR中的hydrate
React CSR：水车模型
当初在理解 React CSR 时做过一个比喻，把单向数据流比作瀑布模型：
瀑布模型：由props（水管）和state（水源）把组件组织起来，组件间数据流向类似于瀑布。数据流向总是从祖先到子孙（从根到叶子），不会逆流
（摘自深入 React）
单组件的微观视角下，我们把props理解为水管（数据通道），接收外部 ...
React Native之原理浅析
一、JavaScriptCore
讲react Native之前，了解JavaScriptCore会有帮助，也是必要的。react Native的核心驱动力就来自于js Engine. 你写的所有js和JSX代码都会被JS Engine来执行, 没有JS Engine的参与，你是无法享受ReactJS给原生应用开发带来的便利的。在iOS上，默认的就是JavaScriptCore， iOS 7之后的设备 ...
React Native 使用 react-native-webview 渲染 HTML
在 App 中，渲染 html 是一个非常常见的功能，有可能是直接渲染 html 字符串或者是通过 URL 渲染远程 HTML页面。react Native 提供了一个 WebView 组件以供我们实现 HTML 的渲染。
早先 WebView 是在 react Native 核心包中，后来为了减小 React Native 核心包的体积，便将其单独提出到 ...
使用react 实现拖拽功能
一、关于拖动
图片默认可以拖动，其他元素的拖动效果同图片。正常的 div 是不能被拖动的，鼠标点击选择后移动没有效果，需要加 draggable="true" 使得元素可以被拖动。
二、拖拽相关的几个事件
被拖拽元素的事件：ondragstart，ondragend
放置元素的事件：ondragenter、ondragover、ondragleave、ondrop&nb ...
React教程(二) : TypeScript
使用--typescript参数新建React项目
create-react-app react-ts-demo --template typescript
新建Header.tsx文件，加入以下代码：
import React, { FC } from 'react';
interface MyProps {
Name: string,
ID: number
}
export const Header:FC<MyProps> = props => {
return(
<>
`${pro ...
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上的状态，是一个树形的对象，每个组件往往只是用树形 ...
