面包屑 面包react antd

import {useCallback, useRef} from 'react'; import {shallowEqual} from "../utils/shallow-equals"; function useMemoParamsFn(fn: any) { const preParamsRe ......

以下是一个一天快速学习 Next.js 的学习路径，包含了一些具体的资源路径： 学习 React：Next.js 是基于 React 的，因此需要先熟悉 React 的基础知识。可以参考 React 官方文档进行学习，地址为：https://reactjs.org/docs/getting-star ......

调用 ReactDOM.render() 来修改想要渲染的元素 function tick(){ const element1=( <div> <h1>h,w</h1> <h2>it is {new Date().ToLocalTimeString()}.</h2> </div> ); ReactD ......

学习 React 之前，你需要学习 JavaScript，因为 React 是基于 JavaScript 的，所以你需要了解 JavaScript 的基础知识，这样你才能更好地理解 React 的工作原理。本文将帮助你了解 JavaScript 的基础知识，以便你可以更好地学习 React。 ......

修改后的效果图如下： <template> <page-header-wrapper :title="false" :breadcrumb="{routes:[]}" > <div> <div class="list"> <a-table :columns="columns0" :row-key=" ......

在开发过程中，经常会使用到Select、DatePicker等组件，当这些组件在可滚动的区域内滚动时，你会发现该组件的选项框也会跟着滚动，产生分离 解决方法antd的官方API给我们提供了getPopupContainer属性，该属性是菜单渲染的父节点，默认是body。只要添加该属性，设置好父节点， ......

<a-table :columns="columns" :data-source="dataSource"> <template slot="icon" slot-scope="record"> <div style="cursor: pointer;" :draggable="true" @dra ......

react性能问题： 避免在表格的赋值区域直接进行值的输入和转换，因为组件会一次渲染，这个方法将执行多次，造成大量重复和无用的计算，如下图： 正确方法：可在接口调用成功后赋值，如下图 坑：重载或者声明数据变量时，要注意赋值问题 这种声明会集成原变量的所有属性，当这个值再次赋值给原变量的时候，系统会将 ......

react key重复问题 循环渲染按钮或者组件时，不需要的空标签一定要去掉，不然会提示key重复 ......

一、创建ReactNative项目 1.1、React Native 有一个内置的命令行界面，你可以用它来生成一个新项目。您可以使用 Node.js 附带的 访问它，而无需全局安装任何内容。让我们创建一个名为“AwesomeProject”的新 React Native 项目：npx npx rea ......

//在这个代码片段中，handleRemove应该被绑定为一个函数，而不是一个函数调用 //这样，当点击按钮时，handleRemove函数将被调用，而不是在渲染时被立即调用。 ......

通常我们引入图片的方式： <img src=' ' alt=' ' /> 但是在react项目中这样引入的话图片会加载不出来 react项目中引入图片的方式有两种： 第一种：组件的方式引入 import Img from '../img/d1.jpg' <img src={Img} alt='' / ......

React旧版的生命周期 初始化阶段：由ReactDOM.render()触发 初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount() 一般在这个里面做一些初始化的事情，如定时器，发送网络请求，订阅消息 ......

使用ref来处理。 父组件里面 子组件里面 ......

1. 安装插件 npm install pubsub-js --save-dev 2. 在需要发布消息的组件引入使用 import pubsub from 'pubsub-js'; ... // 发布消息 pubsub.publish('name','hello world') 3. 在需要订阅消息 ......

// 动态类名 <div className={flag?'class1':'class2'}>111</div> // 多类名 <div className={[flag?'class1':'class2','class3','class4'].join(' ')}>111</div> ......

1. useRef和useState类似，都是用来更新数据，但是useRef更新数据是同步的 useRef返回一个对象，初始化数据保存在current字段下 import {useRef} from 'react'; const data = useRef(0); const obj = useRe ......

1. 在类组件中，数据保存在state中，更新数据使用setState setState有两种用法 函数式 state={ count:0 } ... setState(state=>(count:state.count+1)) 对象式 state={ count:0 } ... setState( ......

1.准备用到的数据 import React, { useContext, useState } from 'react'; import PropTypes from 'prop-types'; import { useLocation } from 'react-router-dom'; // ......

目录 1. 组件通讯-概念 1.组件的特点 2.知道组件通讯意义 总结： 2. 组件通讯-props 基本使用 1.传递数据和接收数据的过程 2.函数组件使用 props 3.类组件使用 props 总结： 3. 组件通讯-props 注意事项 1.知道什么是单向数据流？ 2.props 可以传递什 ......

上传多个文件，若其中有与已经上传的文件列表中有同名文件，后者覆盖掉同名文件并上传加入到已经上传的文件列表中。 <template> <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true" ......

一、类组件(有状态组件) 有props.控制状态state,可以试用生命周期函数 1. 类名称必须以大写字母开头 2. 类组件必须继承React.Component父类，从而可以使用父类中提供的方法或属性 3. 类组件必须提供render()方法 4. render()方法必须要有返回值 impor ......

React-router v6 路由总结 组件 BrowserRouter：整个前端路由以 history 模式开始，包裹根组件 HashRouter：整个前端路由以 hash 模式开始，包裹根组件 Routes：类似于 v5 版本的 Switch，主要是提供一个上下文环境 Route：在 Rout ......

react-text-loop-next An animated loop of text nodes for your headings. Uses react-motion for the transition so it handles super fast animations and sp ......

react管理状态的工具： 1、利用hooks进行状态管理； 2、利用Redux进行状态管理，这种方式的配套工具比较齐全，可以自定义各种中间件； 3、利用Mobx进行状态管理，它通过透明的函数响应式编程使得状态管理变得简单和可扩展。 2013 年 5 月 React 诞生。但 2015 年之前，大概 ......

react native 储备知识 扎实的JS基础+React相关知识 核心组件 创建项目： npm uninstall -g react-native-cli @react-native-community/cli npx react-native init AwesomeProject 使用示例 ......

场景：使用antd-design-vue中的upload时，通过后端保留上次上传过的文件列表，二次上传文件时，若与已上传文件列表中某个文件同名，则上传后覆盖掉已上传文件列表中的同名文件。 upload代码： <template><a-upload action="https://www.mocky. ......

import React, { Component } from 'react' import ReactDOM from 'react-dom/client' import { nanoid } from 'nanoid' const root = ReactDOM.createRoot(docu ......

import {useRef,} from 'react';function usePersistFn(fn) { const fnRef = useRef(fn); fnRef.current = fn; const persistFn = useRef(); if (!persistFn.cur ......

一、React 是什么 React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。 1.1、React的优点 采用组件化模式，声明式编程（ react是面向数据编程，不需要 ......