![](https://img-blog.csdnimg.cn/20200530211655977.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 65
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
whyfail
编程界崇尚以简洁优雅为美,很多时候,如果你觉得一个概念很复杂,那么很可能是你理解错了!
展开
-
Hooks是干什么的?
在编程的世界里,“Hooks”是一个你可能会经常听到的术语,特别是在前端开发中。它们为开发者提供了一种优雅且高效的方式来扩展和控制代码的执行流程。本文将深入浅出地介绍Hooks是什么,它们的作用是什么,以及如何在代码中使用它们,并结合React和Vue3这两个流行的前端框架来讲解。原创 2024-08-07 09:02:42 · 326 阅读 · 0 评论 -
React Hooks memo、useMemo 以及 useCallback 的使用详解
memo、useMemo 以及 useCallback 是三个常用的 React Hooks,它们可以帮助您优化组件的性能。但是,过度使用这些 Hooks 可能会降低代码的可读性和可维护性。因此,在使用这些 Hooks 之前,需要仔细考虑组件的性能需求。只有在子组件渲染成本比较高的情况下,才考虑使用 memo 缓存组件。只有在函数的计算成本比较高的情况下,才考虑使用 useMemo 缓存函数的返回值。只有在函数需要在多个地方使用的情况下,才考虑使用 useCallback 缓存函数的引用。原创 2024-05-24 09:15:02 · 307 阅读 · 0 评论 -
图解 history api 和 React Router 实现原理
学习了 history api 和 React Router 的实现原理。length:history 的条数forward:前进一个back:后退一个go:前进或者后退 n 个pushState:添加一个 historyreplaceState:替换当前 historyscrollRestoration:保存 scroll 位置,取值为 auto 或者 manual,manual 的话就要自己设置 scroll 位置了。转载 2023-08-16 21:15:00 · 97 阅读 · 0 评论 -
Recoil:构建可预测的状态管理库
相比于其他状态管理库,Recoil采用了基于原子(Atom)和选择器(Selector)的模型,使开发人员能够以声明式的方式定义和使用状态,并自动处理状态之间的依赖关系。在过去的几年里,React社区中出现了许多状态管理库,其中Recoil凭借其独特的设计理念和强大的功能引起了广泛关注。Recoil还提供了许多其他功能,例如异步状态管理、状态快照和调试工具,以满足不同场景下的需求。在这个例子中,我们定义了一个名为doubledCount的选择器,它通过读取count状态的值并乘以2来计算派生状态的值。原创 2023-06-01 20:30:00 · 806 阅读 · 0 评论 -
React是不是MVVM架构?
React是不是MVVM架构吗?原创 2023-01-28 21:00:00 · 1814 阅读 · 0 评论 -
Redux 的工作过程
Redux 的工作过程转载 2022-11-17 13:27:21 · 178 阅读 · 0 评论 -
React.memo Component definition is missing display name
React.memoComponent definition is missing display name原创 2022-10-20 10:19:07 · 2873 阅读 · 0 评论 -
React15和React16生命周期对比,初识Fiber
React15和React16生命周期对比,初识Fiber转载 2022-10-08 10:32:56 · 1199 阅读 · 0 评论 -
React-Router V6 使用详解
Remix 团队在2020年6月发布了第一个V6.0.0-beta.0版本的React-Router,也预示着V6版本的正式开始,相比V5版本的确有很多方面的升级。本文将结合V6特性和V5如何升级V6两方面来为大家详细讲解React-Router的使用。(使用版本:V6.0.2稳定版)一、基本用法React-Router的安装方法:npm:npm install react-router-domyarn:yarn add react-router-dom目前官方从5开始已经放弃原有的r..转载 2022-03-01 14:16:28 · 1740 阅读 · 0 评论 -
useContext和useReducer结合使用——小型Redux
一、新建Color.jsximport React, { createContext, useReducer } from "react";export const ColorContext = createContext({ color: "blue" });export const UPDATE_COLOR = "updateColor";const reducer = (state, action) => { switch (action.type) { case U.原创 2022-02-25 10:34:59 · 525 阅读 · 0 评论 -
Web 应用的轻量级状态管理工具 zustand
Web 应用的轻量级状态管理工具 zustandWeb 网页向 Web 应用发展的过程中,势必会出现 Web 项目的复杂化问题,而在移动端场景,基于 React.js 的应用中如何管理状态?zustand 也许值得一试。基于 React.js 的 Web 应用如何完成状态管理?社区主流方案是 react-redux,其本质上基于 React 的 Context 特性实现,如果应用足够简单,实际上用 Context 手写一个简单的状态管理工具倒也并不难。不过,考虑到工具的完善性、项目的健壮性,通常采用.转载 2021-12-14 14:23:01 · 1962 阅读 · 0 评论 -
React滚动条组件
一个react文本滚动小组件使用到了styled-components库import React, { useEffect, useRef, useState } from "react";import styled from "styled-components";const Container = styled.div` overflow: hidden; word-break: keep-all; white-space: nowrap; width: 100%;`..原创 2021-11-15 17:25:30 · 1599 阅读 · 0 评论 -
Vite-React-Antd主题定制
一、安装yarn create @vitejs/app my-react-app --template reactcd my-ract-appyarn add antd less二、代码main.jsximport React from "react";import ReactDOM from "react-dom";import App from "./App";// 引入antd的less样式文件import "antd/dist/antd.less";ReactDO.原创 2021-10-19 15:23:50 · 1026 阅读 · 0 评论 -
Rematch是没有样板的Redux最佳实践
Rematch官网使用Rematch可以使全局状态管理更加的简单和方便这里只做基本使用介绍,具体可查阅官网这里的使用是在react hooks组件中一、安装rematchyarn add @rematch/core二、rematch使用新建文件models/count.jsexport const count = { state: 0, reducers: { // 用纯函数处理状态更改 setCountState(values, payload) {..原创 2021-09-15 13:54:36 · 863 阅读 · 2 评论 -
react项目require导入图片不显示,网页查找元素显示[object module]
解决方法后面追加.default<img src={require('./cs.jpg').default}/>原创 2020-10-30 22:29:40 · 978 阅读 · 0 评论 -
解决 npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE
npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE错误今天创建react项目的时候出现npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE 这个错误,查阅资料发现解决方法运行npm config set strict-ssl false可以解决上述问题原创 2020-09-10 09:05:32 · 3151 阅读 · 3 评论 -
React展示html代码
React展示html代码content是内容<p dangerouslySetInnerHTML={{ __html: content }}></p>原创 2020-08-28 17:02:47 · 1386 阅读 · 1 评论 -
Axios传递Body-raw参数
Axios传递Body-raw参数设置export async function (接口名字)( pageNum: any, pageSize: any, status: any ): Promise<Result<unknown>> { try { const response = await http.post(`(url地址)`, { herders: { 'Content-Type': 'application/json', data: JSON.原创 2020-08-21 16:43:01 · 7730 阅读 · 0 评论 -
React添加多个类名
React添加多个类名<button className={['withdrawBtnCancel', this.state.childVisible == false ? 'withdrawBtnClick' : null].join(' ')} onClick={this.withdrawBtnCancel}> 取消</button>原创 2020-08-06 15:42:37 · 814 阅读 · 0 评论 -
Ant-Desgin 的表单获取表单实例的两种方式
函数式组件import { Modal, Form, Input, Button, Space } from 'antd'; const [form] = Form.useForm(); form.resetFields(); <Form {...layout} form={form} name="control-ref" onFinish={onFinish}></Form>Class类组件import { FormInstance } from .原创 2020-07-24 13:12:47 · 2538 阅读 · 2 评论 -
react 获取自定义属性、value等值
获取React.js自定义属性必须data-比如data-index 然后用event.target.getAttribute(“data-index”)或者console.log(this.refs.myInput.getAttribute(“data-index”));获取例:<input type="text" ref="myInput" id='dongtao' data-dd='ddd'/> ;console.log(event.target.g...原创 2020-07-13 14:26:02 · 1416 阅读 · 0 评论 -
当React在 this.props 中找不到 history 时
在 React 中正常来说只有在 包裹的组件中才能在 this.props 属性中找到 history 对象但有些情况下我们就是希望在一个没被 包裹的组件中用到 history 对象,比如:异步加载数据后跳转网上有些方法提到可以在 class 前加上 @withRouter 的修饰import { withRouter } from 'react-router-dom'@withRouterclass ...这种做法有时候会出现 Support for the e...原创 2020-07-02 16:05:24 · 1883 阅读 · 0 评论 -
React-Router简单了解(下)
一、React-Router重定向-Redirect使用标签式重定向:就是利用<Redirect>标签来进行重定向,业务逻辑不复杂时候可以使用这种。编程式重定向:这种是利用编程的方式,一般用于业务逻辑当中,比如登录成功挑战到会员中心页面。重定向和跳转有一个重要的区别,就是跳转式可以用浏览器的回退按钮返回上一级的,而重定向是不可以的。1、标签重定向这个一般用在不是很复杂的业务逻辑中,比如进入Index组件,然后Index组件,直接重定向到Home组件。建立一个 Home.js组.原创 2020-06-29 22:06:20 · 238 阅读 · 0 评论 -
React-Router简单了解(上)
一、React-Router安装与基础环境搭建1、使用create-react-app 脚手架初始化项目npm install -g create-react-app安装脚手架-g代表的是系统全局安装的意思npm start 预览项目2、使用npm 安装React Routernpm install --save react-router-dom3、简单的使用index.jsimport React from 'react';import ReactDOM from 'r.原创 2020-06-26 23:50:22 · 227 阅读 · 0 评论 -
正则匹配对应复杂字符
一、正则匹配"centerp": "{\"x\":619826.0803465,\"y\":3183643.0874653,\"longitude\":106.22691945736472,\"latitude\":28.763216234382515}"匹配其中的经纬度,只要经纬度匹配后为字符串格式,要想得到数字格式,可以使用parseFloat转化,或者Number//经度centerp.match(/(?<="longitude\":).*?(?=,\"latitu.原创 2020-06-23 09:08:21 · 220 阅读 · 0 评论 -
React-HOOKs的setState的使用
1、数字类型import React, { useState } from 'react';const Index = ()=> { const [count, setCount] = useState(0); return ( <> <h2>{count}</h2> <button onClick={()=>(setCount(count+1))}>Add</button> .原创 2020-06-21 21:51:34 · 3778 阅读 · 0 评论 -
React中的条件渲染方法
条件渲染由于react的jsx语法在dom标签中无法写if判断语句,可以使用三元运算符或者&&来进行条件判断1、&&条件判断<div className="checkResult"> {this.state.messageContent['secondApproverStatus'] == 0 && ( <span style={{ color: 'rgba(207, 0, 0, 1)' }}>待处理</spa.原创 2020-06-16 16:14:10 · 252 阅读 · 0 评论 -
如何使用React-Redux
React是一款非常优秀的前端框架,但是我们不能说它是尽善尽美的。比如说React在做大型项目时,在处理状态管理的问题时就显得捉襟见肘。因此针对于状态管理的问题就衍生出了很多的技术,比如flux,redux等等。在这篇文章中我们只探讨redux,如果小伙伴们学会了redux,就不用再去学习redux,因为redux是flux的一个升级。当然有的小伙伴会问如果他用的是vue或者是angular可不可以用redux呢,这里明确的说明一下都是可以的,哪怕是原生的js也是可以的。在这篇文章中我将会分为七个步...原创 2020-06-12 23:27:11 · 897 阅读 · 0 评论 -
React开发环境搭建
React开发环境搭建原创 2020-06-09 22:11:27 · 123 阅读 · 0 评论 -
JSX语法细节补充
一、注释注释:必须要用花括号括起来单行注释{//这里是单行注释}多行注释{/*这是多行注释*/}二、样式名称引入样式名称引入:将class改为className因为class这个和定义组件“类”有冲突<input className="inputClass" />三、表单label for属性的引用要将for改为htmlFor防止for和 js 中循环for引起冲突<label htmlFor="inputAr.原创 2020-06-08 21:19:54 · 188 阅读 · 0 评论 -
了解一下Axios
一、什么是AxiosAxios 是一个基于 promise 的 HTTP 库,类似 jQuery 中的 AJAX它可以用于浏览器和 node.js 中二、Axios 的特性支持 Promise API拦截请求和相应转换请求数据和相应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF三、Axios 方法的基本使用1、axios请求方法:get、post、put、patch、deleteget:获取数据post:提交数据(表单提交/文件上传)put:更新数据.原创 2020-06-07 23:24:25 · 98 阅读 · 0 评论 -
React私有化样式
一、官方建议由于react的样式管理是比较弱的,官方是建议把style直接写到jsx标签里当然这种处理的方式显然不是特别适合,这样就造成了样式与标签耦合在一起了我们知道在VUE中的利用scoped做到了样式私有化React的样式私有化也有几种处理方法:二、利用css module来解决在create-react-app中使用css modules的方法import React from 'react';import style from './App.modul.原创 2020-06-06 19:11:47 · 509 阅读 · 0 评论 -
React的生命周期
一、React的生命周期生命周期即是组件从实例化到渲染到最终从页面中销毁,整个过程就是生命周期在这生命周期中,我们有许多可以调用的事件,也俗称为钩子函数1、生命周期的3个状态:Mounting:将组件插入到DOM中Updating:将数据更新到DOM中Unmounting:将组件移除DOM中2、生命周期中的钩子函数(方法,事件)CompontWillMount :组件将要渲染,AJAX,添加动画前的类CompontDidMount:组件渲染完毕,添加动画compontWill.原创 2020-06-06 17:32:41 · 156 阅读 · 0 评论 -
React事件以及条件、列表渲染
一、React 事件特点:react事件,绑定事件的命名,驼峰命名法。{},传入1个函数,而不是字符串<button onClick={this.sendData}>传递helloworld给父元素</button>事件对象:React返回的事件对象是代理的原生的事件对象,如果想要查看事件对象的具体值,必须之间输出事件对象的属性。原生,阻止默认行为时,可以直接返回return false;React中,阻止默认必须e.preventDefault(.原创 2020-06-04 22:17:28 · 204 阅读 · 0 评论 -
理解React组件以及组件传值
一、React组件函数式组件与类组件的区别和使用函数式比较简单,一般用于静态没有交互事件内容的组件页面。类组件,一般又称为动态组件,那么一般会有交互或者数据修改的操作。1、函数组件function Childcom(props){ console.log(props) let title = <h2>我是副标题</h2> let weather = props.weather //条件判断 let isGo = weath.原创 2020-06-03 22:23:13 · 191 阅读 · 0 评论 -
React初次认识
一、特点1、声明式的设计2、高效,采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作。3、灵活,跟其他库灵活搭配使用。4、JSX,俗称JS里面写HTML,JavaScript语法的扩展。5、组件化,模块化。代码容易复用。6、单向数据流。没有实现数据的双向绑定。数据→视图→事件→数据。二、创建项目1、通过script引入使用,仅用于学习调试使用<script crossorigin src="https://unpkg.com/react@16/umd/reac.原创 2020-06-02 22:17:26 · 131 阅读 · 0 评论