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/",
...
【React】react-beautiful-dnd 实现组件拖拽
一个React.js 的 漂亮,可移植性 列表拖拽库。想了解更多react-beautiful-dnd特点适用人群请看 官方文档、 中文翻译文档
npm：https://www.npmjs.com/package/react-beautiful-dnd
.安装
在已有react项目中 执行以下命令 so easy。
# yarn
yarn add react-beautiful-dnd
# npm
npm install react-beautifu ...
React:创建管理后台项目demo
1、全局安装create-react-app
npm install -g create-react-app
2、创建项目，安装依赖
create-react-app my-react-app
3、进入项目
cd my-react-app
4、启动项目
npm start
这是你就有了一个react demo
接着是对demo的改造了。。。这里是改造后的项目目录
1、配置路由：
首先安装路由组件：react-router-dom
npm install ...
React Hooks异步操作防踩坑指南
React Hooks 是 React 16.8 的新功能，可以在不编写 class 的情况下使用状态等功能，从而使得函数式从无状态的变化为有的。React 的类型包 @types/react 中也同步把 .SFC (Stateless Functional Component) 改为了 React.FC (Functional Component)。
通过这一升级，原先 class 写法的组件也就完全可以被函数式组件替代。虽 ...
React如何修改默认端口号
问题
我们在使用React的时候经常会遇到这种情况，3000端口号被占用。有时候可以关掉3000端口，但更多时候，我们需要打开多个项目的时候，就必须要开启多个端口了。这时候就需要修改默认端口号了。
解决办法
修改默认端口号
具体做法
第一步：找到start.js文件
这个文件的位置在：node_modules文件夹下 -> react-s ...
React useEffect
今早来又莫名其妙的遇到了 bug，排查了一下是 useEffect 导致的。今天就再来详细的学习一下 react useEffect。
为什么要？
我们知道，react 的函数组件里面没有生命周期的，也没有 state，没有 state 可以用 useState 来替代，那么生命周期呢？
useEffect 是 react v16.8 新引入的特性。我们可以把 useEffect hook 看 ...
36种免费React模板和主题「干货」
前言
在Internet上搜索模板和主题时，很难找到免费的React资源。
即使您不在乎质量，它们似乎也很难被发现，并出于好奇而感动，我花了数小时在Google和Github上四处挖掘，结果得到了36个免费的React模板和主题的集合。我不会对此打赌，但是它们也是高质量的资源。
因此，在此列表中，您将找到各种各样的模板和主题，可以构 ...
