React源码 React ref
ref 的功能，在 react 当中。我们写了一个组件，在这个时候，我们的 render function 里面我们会渲染一系列的子组件或者 dom 节点，有时候我们会希望有这样的需求，就是我们要获取某个 dom 节点，或者是某个子组件的实例。去对他进行一些手动的操作，而不仅仅是 pr ...
react实战 : react 与 canvas
有一个需求是这样的。
一个组件里若干个区块。区块数量不定。
区块里面是一个正六边形组件，而这个用 SVG 和 canvas 都可以。我选择 canvas。
所以就变成了在 react 中使用 canvas 的问题。
canvas 和 SVG 有一个很大的不同。
SVG 是标签，所以HTML怎么整，SVG 就怎么整。
而 canvas 是一套相对独立的 web API，以 c ...
react实战 : react 与 svg
有一个需求是这样的。
一个组件里若干个区块。区块数量不定。
区块里面是一个波浪效果组件，而这个一般用 SVG 做。
所以就变成了在 react 中使用 SVG 的问题。
首先是波浪效果需要的样式。
.p{
font-size: 12px;
line-height: 2;
text-align: center;
margin:0;
width: 52px;
color: #fff;
}
.irrigat ...
【React】react&&redux调试工具
一、React调试工具
1、安装 react-developer-tools，在chrome应用商店进行下载，因为网络限制原因，我们可以使用火狐浏览器进行安装下载
a、打开火狐浏览器的附加组件
b、搜索react-developer-tools进行安装
React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到 ...
React - 组件：函数组件
目录：
1. 组件名字首字母一定是大写的
2. 返回一个jsx
3. jsx依赖React，所以组件内部需要引入React
4. 组件传参
a. 传递. <Component list={ arrData }><Component>
b. 接收. function Component( props ){...}
c. 使用. const { list } = props，list就是参数数据
5. 缺点 ...
react项目启动详解（转载）
转载：https://blog.csdn.net/github_squad/article/details/57452333。
前言:
create-react-app 是一个全局的命令行工具用来创建一个新的项目
react-scripts 是一个生成的项目所需要的开发依赖
一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖， ...
react react-draft-wysiwyg使用
import * as React from 'react'
import { Layout, Pagination, Icon, Modal, message, Button, Form, Input, Upload } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import { ContentSta ...
react wangeditor使用
import * as React from 'react'
import { Layout, Pagination, Icon, Modal, message, Button, Form, Input, Upload } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import E from 'wangeditor'
import iframeIp from '@config/index'
import './index.less'
import bgImg from '../../assets/image ...
React 新版生命周期
React 16之后有三个生命周期被废弃(但并未删除)
componentWillMount
componentWillReceiveProps
componentWillUpdate
官方计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，目的是为了向下兼容，但是对于开发者而言应该尽量避免使用他们，而是使用新增的生命周期函数替代它们。
目前React 1 ...
react 使用react-app-rewired后启动不了
使用了
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
后报错信息如下：
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'react-scripts ...
React Ref 和 React forwardRef
用ref来触达dom元素或组件实例
ref是reference(引用)的简写。
在数据流之外直接操作子孙组件：
ref属性赋值给Html元素，那么this.ref.current就获取到html元素
ref属性赋值给常规React组件，那么this.ref.current就获取到组件的实例
不要过度使用：
有需要直接触达和操作子孙组件实例或者操作子dom元素的情况，这时候 ...
React-Native转小程序调研报告：Taro & Alita
一. 我们的要求
期望的要求
基于React语法，将RN项目转化为小程序项目
该小程序能同时在 微信小程序 和 支付宝小程序这两个平台运行
底线要求
底线是能转成微信小程序，因为目前来说，因为微信先发制人，再加上微信本身的用户黏性，导致在小程序这一块大多数其他平台都难以迎头赶上，包括支付宝小程序，百度小程序， ...
react 基础语法使用
刚开始不久react，在菜鸟上及其他前辈网站上学习，下面开始我的自学笔记。
包括：
渲染元素
组件（函数方法定义、es6 class定义）
事件处理
条件渲染
列表
下面代码部分将不会再写html部分，html部分如下：
<div id="example"></div>
多余的话不多说，具体如下：
渲染元素(函数方法，es6方式)
函数 ...
React Diff算法一览
前言
diff算法一直是React系统最核心的部分，并且由于演化自传统diff，使得比较方式从O(n^3)降级到O(n)，然后又改成了链表方式，可谓是变化万千。
传统Diff算法
传统diff算法需要循环比较两棵树，所有节点的循环，那么单纯比较次数就是O(n^2)，n*n
P L
A A
...
react 常用技术
转载自https://www.sohu.com/a/285175900_132276
开源展示了人类共同协作，成果分享的魅力，每一次技术发展都是站在巨人的肩膀上，技术诸多创新和发展往往就是基于开源发展起来的，没有任何一家网络公司可以不使用开源技术，仅靠自身技术而发展起来。阿里巴巴各个团队都是发自内心地将踩过的坑和总结的经验融入到开 ...
React 项目引入 Dva
背景
现在手上在做的 React 项目因为年代久远，用的 Redux，写代码的体验不太好，所以想升级一下引入 dva。以往使用 dva 都是使用 dva-cli 直接生成 dva 项目，或者在使用 ant design pro 的时候使用 umi 直接生成 react + antd + dva 项目，省去了大量配置的成本。但是这些案例都是在项目初期的时候直接引入了 dva，而针 ...
React+后端实现导出Excle表格的功能
最近在做一个基于React+antd前端框架的Excel导出功能，我主要在后端做了处理，这个功能完成后，便总结成一篇技术分享文章，感兴趣的小伙伴可以参考该分享来做导出excle表格功能，以下步骤同样适用于vue框架，或者JSP页面的实现。
在做这类导出文件的功能，其实，在后端进行处理，会更容易些，虽然前端也可以进行处理，但还 ...
无意间做了个 web 版的 JVM 监控端（前后端分离 React+Spring Boot）
之前写了JConsole、VisualVM 依赖的 JMX 技术，然后放出了一个用纯 JMX 实现的 web 版本的 JConsole 的截图，今天源码来了。
本来就是为了更多的了解 JMX，第一步就想把所有的 MBean 和属性都展示出来，开始在控制台输出，但是效果不好，内容太多太长，不够直观，然后就加了个 web 端的树形结构。然后做着做着突然发现，再 ...
react系列---------ReactJS最优秀的UI框架
构建你的下一个 React.js APP，有这些优秀的 UI 框架就够了。
一.Material-UI
Material-UI是一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。使用它可以快速搭建出赏心悦目的应用界面。
英文文档：https://material-ui.com
二.React-Bootst ...
使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目
1、安装、构建
# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app
# 启动编译当前的React项目，并自动打开 http://localhost:3000/
npm start
2、项目目录
//默认├── package.json
├── public # 这个是webpack的配置的静态目录
│ ...
