react中map的应用
当需要遍历数组时，特别是需要遍历多个数组时，我们就可以封装函数，从而提高代码的复用率，还要注意两点哦，1.数组的map可以进行遍历，需要加唯一的key值，2.封装成函数的话，记得内部需要加return关键字！
<div id="app"></div>
//当为多个数组时。
var arr = ["a","b","c"]
var arr2 = ["d","e","f"]
//封装函数
f ...
React Hook 的底层实现原理
原文
https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba
前言
新的React Hook系统在社区中引起的反响很大。人们纷纷动手尝试，并为之兴奋不已。一想到 hooks 时它们似乎是某种魔法，React 以某种甚至不用暴露其实例（起码没有用到这个关键词）的手段管理了你的组件。 ...
【独家】React Native 版本升级指南
前言
React Native 作为一款跨端框架，有一个最让人头疼的问题，那就是版本更新。尤其是遇到大版本更新，JavaScript、iOS 和 Android 三端的配置构建文件都有非常大的变动，有时候三者的配置文件又互相耦合在一起，往往牵一发而动全身。
本文假定 React Native 升级的主导者是前端同学，比较熟悉 javaScript 为主的一套前 ...
react-router-config的使用
react-router-config
介绍
是一个辅助react-router的插件，主要是使用配置文件集中式管理路由。
import React from 'react'
import { Redirect } from 'react-router-dom'
import Home from '../application/Home';
import Recommend from '../application/Recommend';
import Singers from '../application/Singers';
impo ...
从零搭建基于 react 17.x + antd 4.x 的业务组件库
一些废话
在前端的飞速发展下，这十年里，前端从美工切图仔演变成如今的大前端，在互联网时代中占据越来越重要的位置。前端工程化，模块化成为前端提效利器。越来越多公司也开始重视，开始搭建适用于公司内部，或者业务线内部的组件库。这篇文章将遵循 是什么 为什么 怎么做 来一起搭建业务组件库，或者太长不想看直接看代 ...
react中使用axios + mockjs模拟后台数据
之前写了在vue中使用mockjs模拟后台接口,现在使用react,也把react中的使用写一下.基本方法和vue一样
我这个项目是用react脚手架搭建的,项目源码地址: https://github.com/shengbid/my-react-admin
1. 安装mockjs和axios
yarn add axios -S
yarn add mockjs - D
...
react 入坑学习（八）Hooks React 父组件向子组件传值 react hooks子给父传值
https://blog.csdn.net/qq_40044912/article/details/107812704
react hooks子给父传值
https://blog.csdn.net/zyj12138/article/details/107468389
子组件：
import { useState, useContext } from 'react';
import { FatherContext } from './index';
import { Form, Input, Select } from 'an ...
封装React AntD的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的，比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似，所以很有必要对这些表单来一个简单的封装。
其实，封装组件的意 ...
封装React AntD的table表格组件
封装组件是为了能在开发过程中高度复用功能和样式相似的组件，以便我们只关注于业务逻辑层的处理，提高开发效率，提高逼格，降低代码重复率，降低劳动时间，减少加班的可能。
本次组件的封装采用了函数式组件即无状态组件的方式来提高页面渲染性能，由于无状态组件在数据变更后不会主动触发页面的重新渲染，所以本次的封装 ...
css(react)中 global
局部作用域
css的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名，但是当我们与其他人共同开发的时候，无法保证一定与其他人不同，这时候就要用到css modules。
下面是一个React组件App.js
import React from 'react';
i ...
react-codemirror2代码编辑器
1、安装
npm install react-codemirror2 codemirror --save
2、使用
1 import {UnControlled as CodeMirror} from 'react-codemirror2'
2 import 'codemirror/lib/codemirror.js'
3 import 'codemirror/lib/codemirror.css';
4 // 主题风格
5 import 'codemirror/theme/solarized.css';
6 // 代码模式，clike是包 ...
React的useEffect与useLayoutEffect执行机制剖析
引言
useEffect和useLayoutEffect是React官方推出的两个hooks，都是用来执行副作用的钩子函数，名字类似，功能相近，唯一不同的就是执行的时机有差异，今天这篇文章主要是从这两个钩子函数的执行时机入手，来剖析一下React的运行原理和浏览器的渲染流程。
官方解释
useLayoutEffect其函数签名与 useEffect 相同，但它会 ...
使用create-react-app 构建react应用(react-scripts)
前言:
create-react-app 是一个全局的命令行工具用来创建一个新的项目
react-scripts 是一个生成的项目所需要的开发依赖
一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖，再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。 ...
React版Ant Design 4.5.4中Table动态获取数据(React)
import React from 'react'
import { Row, Col, Space, Table, Button, notification, Pagination } from 'antd';
import axios from 'axios'
export default class TableCom extends React.Component {
state = {
tableData: [],
selectedRowKeys: [], // Check here to configure the default column
...
React中Refs的使用方法
转载请注明出处原文链接地址 Vincent'Blog-React中Refs的使用方法
什么是Refs
Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
Ref转发是一项将ref自动通过组件传递到子组件的技巧。 通常用来获取DOM节点或者React元素实例的工具。在React中Refs提供了一种方式，允许用户访问dom节点或 ...
React图片预览组件，支持缩放、旋转、上一张下一张功能
1、功能需求：由于项目业务需要一个图片预览的功能，又不想引入太多组件依赖，所以决定自己编写一套，实现了图片放大缩小、旋转、查看下一张或上一张图片功能，如图1.0截图所示。
2、外部资源：这里的icon图标采用的是 iconfont 里面的图标，可自行寻找自己喜欢的图标代替，或者使用默认的图标，默认的图标css地址为
ht ...
React中配置子路由
1、组件First.js下有子组件：
import Admin from './Admin'
import FormCom from './FormCom'
import One from './One'
import ButtonCom from './ButtonCom'
import MenuCom from './MenuCom'
import StepsCom from './StepsCom'
import TabsCom from './TabsCom'
import TableCom from './TableCom'
import MessageCom f ...
React环境搭建
React是当下前端生态圈流行的框架之一，与Vue和Angular并称前端三架马车。今天，我们就一起来学习下React，今天的主要内容有。
利用React脚手架create-react-app搭建项目
编写一个React计数组件
利用React脚手架create-react-app搭建项目
这里笔者例举两种利用create-react-app搭建项目的方式
全局安装
npm i -g create-r ...
react native 第三方富文本编辑器 wxik/react-native-rich-editor（在移动端使用）
//更新2021年8月23日
（1）wxik/react-native-rich-editor 个人认为功能比较全，推荐使用
关于使用的案例，官网上有，我直接粘贴我遇到的几个问题
1. 软键盘弹出时，不把RichToolbar顶上去的解决方法
// 在android/app/src/mian/AndroidManifest.xml
android:windowSoftInputMode="state ...
React 使用 Proxy 代理（create-react-app）
在create-react-app 中配置proxy代理
proxy，默认为NULL，类型为URL，一个为了发送http请求的代理
在平时开发时，尤其前后端分离时，需要假数据来进行模拟请求，这个时候就需要proxy代理来处理
create-react-app < 2.0
package.json 中配置
"proxy":{
"/api/**":{
"target":"https://easymock.spiritling.pub/",
...
