![](https://img-blog.csdnimg.cn/20210605110324883.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
项目地址:https://github.com/skywalk94/react-demo
明知山_
这个作者很懒,什么都没留下…
展开
-
React处理多表单输入
【代码】React处理多表单输入。原创 2023-07-20 14:50:56 · 226 阅读 · 0 评论 -
React性能优化memo+useMemo+useCallback
定义子组件Son.jsxexport default () => { return ( <div>子组件{Math.random()}</div> )}定义父组件组件Father.jsximport { useState } from "react"import Son from "@/components/Son.jsx"export default () => { const [count, setCount] =原创 2022-05-25 17:03:16 · 356 阅读 · 0 评论 -
React引入jszip实现多个文件打包成zip下载
安装两个插件yarn add jszip file-saver可直接复制查看效果import JSZip from 'jszip'import { saveAs } from 'file-saver'export default () => { //通过请求获取文件blob格式 function getFileBlob(url) { return new Promise((resolve, reject) => { let r.原创 2022-04-20 10:25:50 · 1644 阅读 · 0 评论 -
React+vite引入antd并按需引入
安装antdyarn add antd完整引入App.jsx使用.less是为了方便设置主题色import 'antd/dist/antd.less'vite.config.js设置主题色import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'export default defineConfig({ plugins: [react()], css: { preprocess原创 2022-04-15 15:48:06 · 5396 阅读 · 1 评论 -
React使用Mobx/zustand状态管理
文档地址安装mobx、mobx-react-litemobx-react-lite是mobx-react的轻量级版本yarn add mobx mobx-react-lite在src目录下新建store文件夹,新增count.js文件count为共享的数据addCount为共享的方法import { makeAutoObservable } from "mobx"export default makeAutoObservable({ count: 0, addCount.原创 2022-04-01 11:33:37 · 1542 阅读 · 0 评论 -
react-router6.x路由配置及导航
预览效果项目目录router/index.jsximport { lazy } from 'react'const Index = lazy(() => import('@/pages/Index.jsx'))const Home = lazy(() => import('@/pages/Home.jsx'))const HomeLeft = lazy(() => import('@/pages/Home/Home-left.jsx'))const HomeRight =原创 2022-03-22 14:18:50 · 1879 阅读 · 0 评论 -
React高阶组件HOC的使用
高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。高阶组件只提供逻辑代码视图代码会做为参数传递给高阶组件进行渲染withMouse是高阶组件Position是视图代码import React, { Component } from 'react';// withMouse 只提供逻辑代码// WrappendComponent为Dom参数进行渲染function withMouse(WrappendComponent) { class Mouse extends C原创 2021-10-22 10:46:29 · 415 阅读 · 0 评论 -
React通过conetxt实现多组件传值
该功能实现效果类似于vue的provide/inject而React可通过context进行完成定义一个公共的文件context/Theme.jsximport { createContext } from 'react';const theme = createContext()export default theme父组件引入公共文件及子组件并传递theme值import React, { useState } from 'react';import Child from "@/c原创 2021-10-21 10:21:07 · 370 阅读 · 1 评论 -
React引入react-typewriter-hook实现打字效果
npm install react-typewriter-hook核心代码import React from 'react';import useTypewriter from "react-typewriter-hook"const Note = () => { const talk = useTypewriter("种一棵树最好的时间是十年前,其次是现在"); return ( <div>{talk}</div> )原创 2021-08-20 11:14:41 · 794 阅读 · 0 评论 -
React引入react-transition-group实现过渡效果
文档地址安装npm install react-transition-group该组件提供了4个组件Transition、CSSTransition、SwitchTransition、TransitionGroup写法跟Vue ---- transition组件很像这里主要介绍CSSTransitionimport React, { useState } from 'react';import { CSSTransition } from 'react-transition-group'原创 2021-08-19 18:04:49 · 395 阅读 · 0 评论 -
React引入react-contexify代替鼠标右键
尝试antd的社区精选组件 - 右键菜单这里推荐了两个组件,我都安装尝试过,这里比较推荐使用react-contexify,展示及交互效果比较符合我的预取安装yarn add react-contexify引入import React from 'react';import { Menu, Item, useContextMenu } from 'react-contexify';import 'react-contexify/dist/ReactContexify.css';co原创 2021-08-11 15:28:38 · 1063 阅读 · 0 评论 -
React引入swiper6.x版本
官方react安装swiper说明npm i swiper在组件进行导入css样式根据自己的项目自行导入import { Swiper, SwiperSlide } from 'swiper/react';import 'swiper/swiper.less';使用 <Swiper spaceBetween={50} slidesPerView={3} navigation pagination={{ clickable: tr原创 2021-08-07 10:55:52 · 832 阅读 · 0 评论 -
React通过@craco/craco代理接口
craco.config.js文件module.exports = { // 代理接口 devServer: { proxy: { '/api': { target: 'https://api.cn', changeOrigin: true, pathRewrite: { "^/api": ''原创 2021-08-06 15:55:46 · 1485 阅读 · 0 评论 -
React引入antd-mobile+postcss搭建移动端
安装antd-mobile全局引入npm install antd-mobile --save在App.js引入cssimport 'antd-mobile/dist/antd-mobile.css';在jsx使用antd组件import React from 'react';import { Button } from 'antd-mobile';const index = () => { return ( <div>原创 2021-06-18 11:52:57 · 613 阅读 · 1 评论 -
React传送门Portals使用
Portal可以渲染到父节点root之外的节点上第一个参数布局元素,第二个参数是指定渲染到的Dom节点。import React, { Component } from 'react';import { createPortal } from 'react-dom'const doc = window.document //或者可以指定index.html里的元素,参照官方文档class Portals extends Component { constructor(props) {原创 2021-06-17 11:32:48 · 470 阅读 · 0 评论 -
React引入Redux实现组件间共享状态
安装npm install redux -s在src目录下新建store文件夹,新增index.js文件导入redux基本模块import { createStore } from 'redux';const store = createStore();export default store;再新增reducer.js文件,这里存放共享的变量const defaultState = { countNum: 0}export default (state = defaultS原创 2021-06-16 16:33:03 · 383 阅读 · 0 评论 -
React-router路由跳转及传参
标签跳转及传参import { Link } from "react-router-dom";动态路由传参<Link to={`/detail/123`}>跳转到详情</Link>path: "/detail/:id"console.log(this.props.match.params.id)get传参 <Link to={`/detail_t?id=123`}>跳转到详情</Link>console.log(this.props.原创 2021-06-15 15:29:14 · 585 阅读 · 0 评论 -
React-router5.x配置路由模块化及嵌套路由
在src目录下新建router文件夹创建index.js文件import { lazy } from 'react';// 基于路由进行代码分割 // 经测试可进行路由懒加载// https://zh-hans.reactjs.org/docs/code-splitting.html#route-based-code-splittingconst router = [ { path: "/", component: lazy(() => imp原创 2021-06-15 15:11:28 · 890 阅读 · 0 评论 -
React组合(slot插槽)
子组件import React, { Component } from 'react';class Slot extends Component { constructor(props) { super(props); this.state = {}; } componentDidMount() { } render() { return ( <div>{this.props.c原创 2021-06-08 17:55:29 · 612 阅读 · 0 评论 -
React配置antd组件按需加载
antd文档npm install antd -s在App.css中引入@import '~antd/dist/antd.css';在组件中引入import { Button } from 'antd'; render() { return ( <Button type="primary">Button</Button> ) }原创 2021-06-08 16:04:24 · 568 阅读 · 0 评论 -
React导入外部css样式不影响全局
import style from "./style.module.css"color为你的类名 <div className={style.color}>引入外部的css样式</div>后面会自动拼接唯一的hash值React文档说明原创 2021-06-07 17:25:55 · 1184 阅读 · 0 评论 -
React父子组件之间互相传值
父组件import React, { Component } from 'react';import Head from "../components/Head"class Comp extends Component { constructor(props) { super(props); this.state = { value: "" }; } run = () => { co原创 2021-06-06 17:52:01 · 277 阅读 · 0 评论 -
React关闭Eslint代码检查
package.json里找到eslintConfig新增 "eslintConfig": { "rules": { "no-undef": "off", "no-restricted-globals": "off", "no-unused-vars": "off" }, },原创 2021-06-06 15:57:41 · 3392 阅读 · 0 评论 -
React动态绑定全局数据和遍历数组
import React, { Component } from 'react'class News extends Component { constructor() { super() // 定义全局数据 this.data = { list: [{ name: "张三", age: "18" }, {原创 2021-06-05 16:13:33 · 583 阅读 · 0 评论 -
React创建create-react-app项目
react文档第三方react文档创建基于create-react-app工程化项目npx create-react-app react-democd react-demonpm start启动成功我的react练手项目回放在github感兴趣可以一起学习,持续更新git clone https://github.com/skywalk94/react-demo...原创 2021-06-05 12:25:03 · 216 阅读 · 0 评论