JsPlumb在react的使用方法及介绍
JsPlumb在react的使用方法及介绍
一．相关资料来源：
1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/ ——— 一个翻译一半就不能打开的文档
2.https://github.com/wangduanduan/jsplumb-chinese-tutorial &nb ...
react 简单轮播图实现
ul{
padding: 0;
margin: 0;
}
.swipper {
width: 50%;
background-color: #99a9bf;
position: relative;
overflow: hidden;
.swipper-item {
top:0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
text-align: center;
background-col ...
深入理解React：事件机制原理
目录
序言
DOM事件流
事件捕获阶段、处于目标阶段、事件冒泡阶段
addEventListener 方法
React 事件概述
事件注册
document 上注册
回调函数存储
事件分发
小结
参考
1.序言
React 有一套自己的事件系统，其事件叫做合成事件。为什么 React 要自定义一套事件系统？React 事件是如何注册和触发的？React 事件与原生 ...
手写React的Fiber架构，深入理解其原理
熟悉React的朋友都知道，React支持jsx语法，我们可以直接将HTML代码写到JS中间，然后渲染到页面上，我们写的HTML如果有更新的话，React还有虚拟DOM的对比，只更新变化的部分，而不重新渲染整个页面，大大提高渲染效率。到了16.x，React更是使用了一个被称为Fiber的架构，提升了用户体验，同时还引入了hooks等特性。那隐藏在 ...
如何用 React 构建前端架构
早期的前端是由后端开发的，最开始的时候仅仅做展示，点一下链接跳转到另外一个页面去，渲染表单，再用Ajax的方式请求网络和后端交互，数据返回来还需要把数据渲染到DOM上。写这样的代码的确是很简单。在Web交互开始变得复杂时，一个页面往往有非常多的元素构成，像社交网络的Feed需要经常刷新，展示内容也五花八门，为了追 ...
React中组件封装
一、JS打包入口文件 main.js
1、代码
/* JS打包入口文件 */
//1、导入react包
import React from "react";
import ReactDOM from "react-dom";
import CommentList from "./components/CommenList.jsx";
import CommentItem from "./components/CommentItem.jsx";
import "./css/CommenList.css" ...
react+ts搭建前端工程
前言
此文为ssr三部曲的第一部，前文在这
这个版本的代码在这
安装依赖
typescript
安装typescript，并初始化一个tsconfig.json出来
npm install -S -D typescript
node_modules/.bin/tsc --init // 局部tsc需要这样使用
babel7开始，新增了@babel/preset-typescript，支持解析ts，所以不再需要ts-loader之类的webpack ...
React Iframe 使用探索
作者后端经验比较丰富，近期要做跨域跨前端框架的前端页面展示，自然联想到了 IFRAME 方法，细致了解下来发现它可以用来解决很多棘手问题，包括：
跨域问题
Ajax 前进后退问题
异步上传问题
跨框架问题
父页面
基础 React 框架
import React, { PureComponent } from 'react';
export default class Iframe extends P ...
express+react
1 开发环境准备（windows）#
1.1 安装nodejs和npm#
1) 下载nodejs安装包：http://nodejs.org/en/download/
nodejs安装时会同时安装npm
2) 安装完成后检查是否安装成功
命令行输入以下命令，查看npm和node版本：npm -vnode -v
若未安装成功可检查环境变量是否安装时自动设置成功
1.2 安装create-react-app(react官方 ...
深入理解React：懒加载（lazy）实现原理
目录
代码分割
React的懒加载
import() 原理
React.lazy 原理
Suspense 原理
参考
1.代码分割
（1）为什么要进行代码分割？
现在前端项目基本都采用打包技术，比如 Webpack，JS逻辑代码打包后会产生一个 bundle.js 文件，而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂，相应打包好的 bundle.js 文件体积 ...
React+electron项目搭建 打包
React+electron项目搭建 打包
一．搭建react+electron项目
1.创建一个react项目
create-react-app my-app
cd my-app
npm start
看下页面是否打开，是否运行正确。
注意：如果页面没有src文件夹，
第一种：卸载全局安装包：
npm uninstall -g create-react-app
yarn global remove create-react-app
然后 npm start，浏览 ...
深入理解 React useLayoutEffect 和 useEffect 的执行时机
我们先看下 React 官方文档对这两个 hook 的介绍，建立个整体认识
useEffect(create, deps):
该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug ...
react怎样封装一个组件
由于近期在涉及到封装组件的时候遇到了一些问题，于是我认真地了解了一下react封装组件过程中应该要涉及和思考到的一些问题，写了下来。（以下主要是针对UI组件，由于水平有限不保证内容正确性，仅仅是一些个人的思考）
一、什么是组件
组件可以将UI切分成一些的独立的、可复用的部件，这样就只需专注于构建每一个单独的部 ...
react 之getFieldDecorator用法
react ant Design组件官网地址：
https://ant.design/components/form-cn/#header
今天来讲下 getFieldDecorator 方法
**登陆注册表单制作时，除了可以引入UI样式，Ant Design 也提供了JS属性对象。**
// 获取 getFieldDecorator JS属性对象，这个值的作用是帮助我们做表单封装 const { getFieldDecorator } = ...
react.js antd-table 可编辑表格验证
最近做需求,需要在一个表格里编辑字段,验证提交.项目用的是antd的组件,看了下table组件,官网有给编辑的例子,好咧,拿过来用了下,发现问题.官网的实现写得很复杂,而且最主要的一点是只能在输入框获取焦点时调验证规则.但是在表格外面不能调用验证方法调用.与实际需求不符合,于是自己写了一个,记录下来.
需求: 表 ...
tsx 编写react 遇见类型“Readonly<{}>”上不存在属性XXX解决办法
这样的问题是TS语法类型检测的时候会报错，这时候可以给state个props生命类型，问题解决，代码如下：
import React from "react";
type StateType = {
name: string;
number: number;
};
type propType = {
name: string;
number: number;
};
interface Test1 {
state: StateType;
props:propType
}
cla ...
react 国际化 react-i18next
重点：
动态切换语言，不刷新页面的情况下切换，无需redux（从官网文档找到）：
选择插件 react-i18next，
先安装npm install i18next react-i18next --save
然后引入依赖代码如下，
import React from 'react';
import ReactDOM from 'react-dom';
import i18n from 'i18next';
import { useTranslati ...
React面试题（超详细，附答案）
生命周期
组件将要挂载时触发的函数：componentWillMount
组件挂载完成时触发的函数：componentDidMount
是否要更新数据时触发的函数：shouldComponentUpdate
将要更新数据时触发的函数：componentWillUpdate
数据更新完成时触发的函数：componentDidUpdate
组件将要销毁时触发的函数：componentWillUnmount
...
8分钟为你详解React、Angular、Vue三大前端技术
【引言】
当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。
【React】
React（也被称为React.js或ReactJS）是一个用于构建用户界面的J ...
react react-router-config
https://www.npmjs.com/package/react-router-config
这是我的目录，router文件 index.js 就是我的路由文件。 assembly 是引入组件的地方，那里配了懒加载
第一步： 安装
npm install --save react-router-config
第二步： 外面 index.js 引入
import React from 'react';
import ReactDOM from 'r ...
