常见react面试题汇总（适合中级前端）
转自https://segmentfault.com/a/1190000016885832?utm_source=tag-newest#item-11
React 中 keys 的作用是什么？
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
render () {
return (
<ul>
{this.state.todoItems.map(({item, key}) => {
return <li key={key}>{item} ...
React路由之BrowserRouter实现原理
一、路由用法
1.安装路由库
npm i react-router-dom
2.引入
import {HashRouter as Router, Route} from 'react-router-dom' //路由库
3.使用
index.js
import React from "react";
import ReactDOM from "react-dom";
import {HashRouter as Router, Route} from 'react-router ...
react嵌套路由
1、结构目录
2、路由配置文件，参照的vue-router
config.js
import Login from '../view/Login.js';
import System from '../view/System.js';
import Bus from '../view/Bus.js';
import Bus22 from '../view/Bus22.js';
const routes = [
{
path: "/",
component: Login,
exact: true,
},
{
pat ...
React VS Vue：2020年选哪个更好？
背景..........
最近我司准备上一新的项目 对前端使用什么框架进行了热烈的讨论 Javascript 框架以及 HTML 和 CSS 已成为每个现代软件项目前端开发的重要组成部分。 2020 年将会是为你的 Web 项目选择正确的 javascript 框架的又一个年头。
React 或 Vue：哪个更适合我的下一个 Web 发项目？
React ...
React：使用手写签名插件：react-canvas-draw 和 react-signature-canvas
1、安装npm install react-canvas-draw --save2、导入
import CanvasDraw from "react-canvas-draw";3、使用组件
signCanvas= React.createRef();
设置签名组件的属性
<CanvasDraw ref={this.signCanvas} brushColor="#000" brushRadius={3} lazyRadius={10} canvasWidth={"100%"} canvasHeight={250}/>
...
React项目解决跨域的两种方式
最近在学习http的相关知识，看到有关跨域的问题。平时工作中也会一直听到跨域问题，自己就深入的学习一下，这里记录一下，方便以后查阅。
1、为什么会出现跨域？
浏览器遵循同源政策(scheme(协议)、host(主机)和port(端口)都相同则为同源)。
非同源站点有这样一些限制:
不能读取和修改对方的 DOM
不读访问对方的 Cookie、 ...
React ref属性
简单来说，ref就是用来获取真实dom元素或者是组件实例的属性。
1. 创建和访问
ref 的值根据节点的类型而有所不同：
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
当 ref 属性用于自定义 class ...
react setState 原理
组件的数据来源有两个地方，分别是属性对象和状态对象
属性是父组件传递过来的，不可更改
状态是自己内部的，改变状态的唯一方式就是setState
属性和状态的变化都会引起视图更新
import React from "react";
import ReactDOM from "react-dom";
/**
* 属性是由父组件传递过来的，不能改变
* 状态是组件内部，由自己维 ...
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", ...
