React 入门（4）React+TypeScript
序言
设置淘宝镜像
npm config get cache
npm config get prefix
npm config get registry
npm config set registry https://registry.npmjs.org
npm config set registry https://registry.npm.taobao.org
npm
如果没有crea ...
react引入富文本编辑器TinyMCE
这周做了一个PC端的service后台需求，要求有富文本编辑器，插入图片、表格，字体字号背景色等等，
最后引入了富文本编辑器TinyMCE
对于TinyMCE的简介：
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等 ...
Js React中post方式下载文件/get方式下载文件
一.GET方式下载
方法一：
<a href={systemPdf} download="application/pptx" target="_blank">下载</a>
方法二:
downloadHandler = () => {
const url = '../action?id=3'
window.location.href = url
}
<span onClick={this.downloadHandler}>下载</span>
缺点：get请求参数数据量较小时可以使用，但如果请求 ...
react-hooks简单同步异步处理小技巧
import React, { useState, useEffect, useReducer } from 'react';
import { useImmer } from "use-immer"
import './App.css';
function reducer(state: { count: number; }, action: { type: any; }) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decreme ...
使用UmiJS框架开发React应用
目录1）、简介2）、安装2.1）、安装 nodejs2.2）、安装 yarn2.3）、安装 umi3）、使用 umi3.1）、创建项目3.2）、初始化3.3）、开发工具打开3.4）、运行项目4）、分层开发4.1）、过程图示4.2）、开始开发4.2.1）、添加依赖4.2.2）、antd基本布局4.2.3）、Service异步请求数据4.2.4）、Mock模拟数据4.2.5）、Model层中引入 ...
前端国际化, React 项目多语言：React-i18next 本地化数据 && 请求后台数据
关键词：前端，国际化，多语言，react，react-i18next，i18n, antd
GitHub Examples
参考资料：
react-i18next
react-i18next documentation
i18next documentation
i18next-xhr-backend
i18next-browser-languageDetector
i18next-multiload-backend-adapter
一、搭建 React 项目
npx creat ...
react性能优化之useMemo,useCallback的使用
//useMemo,useCallback
import React, { memo, useMemo, useCallback, useState } from 'react';
// import About from './About';
const Foo = memo((props) => {
let count = props.count;
console.log("函数重新渲染");
return <div onClick={props.addCount}>count:{count}</div>
});
// class App extends Pu ...
React Hook填坑（二）
如果已经使用过 Hook，相信你一定回不去了，这种用函数的方式去编写有状态组件简直太爽啦。
如果还没使用过 Hook，那你要赶紧升级你的 React(v16.8+)，投入 Hook 的怀抱吧。
至于 Hook 的好处这里就不多说了，上一篇已经讲过了——React Hook上车（一）。
Hook 虽好，操作不当可是容易翻车的哦。
下面，我们就来聊聊在使用 ...
使用react搭建组件库(二)：react+typescript
1 使用了react官方脚手架：create-react-app
https://github.com/facebook/create-react-app
npm run eject 可以打开配置文件
自定义配置文件
执行安装： npx create-react-app ts-with-react --typescript
npx 只有在npm5.2以上版本才有
1、避免安装全局模块：临时命令，使用后删除，再次执行的时候再次下载
2 ...
refs转发 React.forwardRef
2020-04-01
refs转发
前几天刚总结完ref&DOM之间的关系，并且想通了3种ref的绑定方式
今天总结一下refs转发
这是react中一直困扰我的一个点
示例:
输入: words = ["time", "me", "bell"]
输出: 10
解释: S = "time#bell#" ， indexes = [0, 2, 5] 。
用途1: 传递refs 到 DOM 组件
在下面的示例中，FancyButton 使用 ...
react + better-scroll 实现下拉刷新 上拉加载更多
1.封装组件
components/Scroll/index.tsx
/**
* 下拉刷新 上拉加载更多
*/
import React, { forwardRef, useState,useEffect, useRef, useImperativeHandle, useMemo } from "react"
import PropTypes from "prop-types"
import BScroll from "better-scroll"
import Loading from '../loading/index';
import Loading2 f ...
react 、请求、使用
1.创建一个ajax.js
import axios from 'axios'
export default function ajax(url = '', data = {}, type = 'GET') {
if (type === 'get') {
return axios({
method: "get",
url,
data
});
}
else {
return axios({
method: "post", ...
react中使用截图组件Cropper组件
--最近项目用react，学习react并使用cropper组件裁剪图片。
（这里开发组件不够统一有用tsx(TypeScript + xml/html)写的组件，有用jsx(javascript+xml/html)写的组件
前言：cropper组件引入到项目中的手顺直接看官方文档；github:https://github.com/fengyuanchen/cropperjs#methods 在线演示url: https://fengy ...
React 拖动布局
安装组件react-grid-layout
yarn add react-grid-layout
引入拖动样式,不然没有拖动效果
import '../../../node_modules/react-grid-layout/css/styles.css'
import React from 'react'
import { IProps } from 'config/models'
import { Row, } from 'antd'
import _ from "lodash";
import GridLayout from " ...
两行代码教你用React useContext代替React-redux
话不多说，先上代码：
import React from 'react';
// 第一行
export const TextContext = React.createContext();
const Wrapper = () => {
return (
// 第二行
<TextContext.Provider value={React.useState(‘Hello World.’)}>
<ComponentA />
<ComponentB />
</TextContext.Provider>
...
聊一聊 React 中的 CSS 样式方案
和 Angular，Vue 不同，React 并没有如何在 React 中书写样式的官方方案，依靠的是社区众多的方案。社区中提供的方案有很多，例如 CSS Modules，styled-components，styles jsx 等等。
接下来会详细地说一下这几种方案，在说这几种方案之前，首先说一下 React 官方提供的构建工具 create-react-app 构建的项目中使用 css 的 ...
React 和 ReactDOM 的区别
如果你是 React 的初学者，一定会对 React 和 ReactDOM 感到迷惑。为什么要分成两个包呢？害得我还要引入两次，说好的减轻开发人员负担呢，这丫的在搞什么飞机。带着这个疑问，我们一起来康康 React 的“野心”。
ReactDOM独立的历史原因
React 在v0.14之前是没有 ReactDOM 的，所有功 ...
聊一聊React中虚拟DOM
1. 什么是虚拟 DOM
在 React 中实际上是 render 函数中return 的内容会生成 DOM，return 中的内容由两部分组成，一部分是 JSX ，另一部分就是 state 中的数据，所以简单来讲，在 React 中 JSX 结合 state 就生成了 DOM。
现在抛开虚拟 DOM 不谈，如果让我们去实现 React 中当数据发生变化时如何操作 DOM 来实现页面内容的变 ...
React TS 组件 Demo
无状态组件
例子：点击查看大图
import React, { MouseEvent, SFC } from 'react'
type Props = {
onClick(e: MouseEvent<HTMLElement>): void
src: string,
show: boolean,
}
const BigImage: SFC<rops> = ({ onClick, show, src }) => {
return show ? <div className="big-img-wrap" onClick={onClick}>
...
React hooks详解
此篇文章仅是对hooks入门的总结，老鸟略过吧~
React从16.8.X以后增加了一个新特性，react hooks 让我们看看这个新特性又带来了哪些惊喜呢~以下内容我们采取不同方式创建组件来进行对比总结
组件的创建方式：
用过react的都了解，传统react创建组件提供了两种方式，函数式与类（class）
class创建无状态组件
class App exte ...
