why404

Vue3路线：编译时骚操作+运行时精准打击，走的是手术刀路线React路线：虚拟DOM+Fiber调度器+不可变数据，走的是坦克碾压路线

React这逼就像拿着手术刀做微创，Vue这货直接上精确制导导弹。架构差异本质是命令式vs声明式的哲学互殴，没有谁更好，只有谁更配你项目的菊花需求！

React为什么早合成事件

TypeScript 为 React 开发带来了强大的类型安全保障，这里解析常见的一些TS写法

在 React 开发中，`setState` 是我们更新组件状态的核心 API。然而，`setState` 的行为因调用场景的不同而有所变化，这可能会让许多开发者感到困惑。特别是在 React 18 中，引入了自动批量更新机制，使得部分场景的行为发生了变化。本文将结合 React 17 和 React 18 的特性，对 `setState` 的行为和状态更新时机进行详细分析。

探索为什么 React 和 Vue 不采用像 Svelte 那样的编译方式

React Fiber 是 React 为了提升性能和用户体验而引入的一项重要技术。通过将渲染任务分解成更小的单元，React 可以更好地控制渲染过程，实现更流畅、更灵活的 UI 更新。

新版 React（v18） 改进了事件处理的顺序，使其更符合浏览器的标准事件流。这意味着事件处理会更准确地按照捕获和冒泡阶段来执行，并且在初始化阶段会更高效地绑定事件。这样做的好处是可以更一致地模拟浏览器的事件行为，确保事件处理的顺序和效果更加可靠。

为什么 React 需要自己实现事件系统

在编程的世界里，“Hooks”是一个你可能会经常听到的术语，特别是在前端开发中。它们为开发者提供了一种优雅且高效的方式来扩展和控制代码的执行流程。本文将深入浅出地介绍Hooks是什么，它们的作用是什么，以及如何在代码中使用它们，并结合React和Vue3这两个流行的前端框架来讲解。

memo、useMemo 以及 useCallback 是三个常用的 React Hooks，它们可以帮助您优化组件的性能。但是，过度使用这些 Hooks 可能会降低代码的可读性和可维护性。因此，在使用这些 Hooks 之前，需要仔细考虑组件的性能需求。只有在子组件渲染成本比较高的情况下，才考虑使用 memo 缓存组件。只有在函数的计算成本比较高的情况下，才考虑使用 useMemo 缓存函数的返回值。只有在函数需要在多个地方使用的情况下，才考虑使用 useCallback 缓存函数的引用。

学习了 history api 和 React Router 的实现原理。length：history 的条数forward：前进一个back：后退一个go：前进或者后退 n 个pushState：添加一个 historyreplaceState：替换当前 historyscrollRestoration：保存 scroll 位置，取值为 auto 或者 manual，manual 的话就要自己设置 scroll 位置了。

相比于其他状态管理库，Recoil采用了基于原子（Atom）和选择器（Selector）的模型，使开发人员能够以声明式的方式定义和使用状态，并自动处理状态之间的依赖关系。在过去的几年里，React社区中出现了许多状态管理库，其中Recoil凭借其独特的设计理念和强大的功能引起了广泛关注。Recoil还提供了许多其他功能，例如异步状态管理、状态快照和调试工具，以满足不同场景下的需求。在这个例子中，我们定义了一个名为doubledCount的选择器，它通过读取count状态的值并乘以2来计算派生状态的值。

React是不是MVVM架构吗？

Redux 的工作过程

React.memoComponent definition is missing display name

React15和React16生命周期对比，初识Fiber

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..

一、新建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.

Web 应用的轻量级状态管理工具 zustandWeb 网页向 Web 应用发展的过程中，势必会出现 Web 项目的复杂化问题，而在移动端场景，基于 React.js 的应用中如何管理状态？zustand 也许值得一试。基于 React.js 的 Web 应用如何完成状态管理？社区主流方案是 react-redux，其本质上基于 React 的 Context 特性实现，如果应用足够简单，实际上用 Context 手写一个简单的状态管理工具倒也并不难。不过，考虑到工具的完善性、项目的健壮性，通常采用.

一个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%;`..

一、安装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.

Rematch官网使用Rematch可以使全局状态管理更加的简单和方便这里只做基本使用介绍，具体可查阅官网这里的使用是在react hooks组件中一、安装rematchyarn add @rematch/core二、rematch使用新建文件models/count.jsexport const count = { state: 0, reducers: { // 用纯函数处理状态更改 setCountState(values, payload) {..

解决方法后面追加.default<img src={require('./cs.jpg').default}/>

npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE错误今天创建react项目的时候出现npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE 这个错误，查阅资料发现解决方法运行npm config set strict-ssl false可以解决上述问题

React展示html代码content是内容<p dangerouslySetInnerHTML={{ __html: content }}></p>

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.

React添加多个类名<button className={['withdrawBtnCancel', this.state.childVisible == false ? 'withdrawBtnClick' : null].join(' ')} onClick={this.withdrawBtnCancel}> 取消</button>

函数式组件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 .

获取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...

在 React 中正常来说只有在 包裹的组件中才能在 this.props 属性中找到 history 对象但有些情况下我们就是希望在一个没被 包裹的组件中用到 history 对象，比如：异步加载数据后跳转网上有些方法提到可以在 class 前加上 @withRouter 的修饰import { withRouter } from 'react-router-dom'@withRouterclass ...这种做法有时候会出现 Support for the e...

一、React-Router重定向-Redirect使用标签式重定向:就是利用<Redirect>标签来进行重定向，业务逻辑不复杂时候可以使用这种。编程式重定向:这种是利用编程的方式，一般用于业务逻辑当中，比如登录成功挑战到会员中心页面。重定向和跳转有一个重要的区别，就是跳转式可以用浏览器的回退按钮返回上一级的，而重定向是不可以的。1、标签重定向这个一般用在不是很复杂的业务逻辑中，比如进入Index组件，然后Index组件,直接重定向到Home组件。建立一个 Home.js组.

一、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.

一、正则匹配"centerp": "{\"x\":619826.0803465,\"y\":3183643.0874653,\"longitude\":106.22691945736472,\"latitude\":28.763216234382515}"匹配其中的经纬度，只要经纬度匹配后为字符串格式，要想得到数字格式，可以使用parseFloat转化，或者Number//经度centerp.match(/(?<="longitude\":).*?(?=,\"latitu.

1、数字类型import React, { useState } from 'react';const Index = ()=> { const [count, setCount] = useState(0); return ( <> <h2>{count}</h2> <button onClick={()=>(setCount(count+1))}>Add</button> .

条件渲染由于react的jsx语法在dom标签中无法写if判断语句，可以使用三元运算符或者&&来进行条件判断1、&&条件判断<div className="checkResult"> {this.state.messageContent['secondApproverStatus'] == 0 && ( <span style={{ color: 'rgba(207, 0, 0, 1)' }}>待处理</spa.

React是一款非常优秀的前端框架，但是我们不能说它是尽善尽美的。比如说React在做大型项目时，在处理状态管理的问题时就显得捉襟见肘。因此针对于状态管理的问题就衍生出了很多的技术，比如flux，redux等等。在这篇文章中我们只探讨redux，如果小伙伴们学会了redux，就不用再去学习redux，因为redux是flux的一个升级。当然有的小伙伴会问如果他用的是vue或者是angular可不可以用redux呢，这里明确的说明一下都是可以的，哪怕是原生的js也是可以的。在这篇文章中我将会分为七个步...

React开发环境搭建

一、注释注释：必须要用花括号括起来单行注释{//这里是单行注释}多行注释{/*这是多行注释*/}二、样式名称引入样式名称引入:将class改为className因为class这个和定义组件“类”有冲突<input className="inputClass" />三、表单label for属性的引用要将for改为htmlFor防止for和 js 中循环for引起冲突<label htmlFor="inputAr.

一、什么是AxiosAxios 是一个基于 promise 的 HTTP 库，类似 jQuery 中的 AJAX它可以用于浏览器和 node.js 中二、Axios 的特性支持 Promise API拦截请求和相应转换请求数据和相应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF三、Axios 方法的基本使用1、axios请求方法：get、post、put、patch、deleteget:获取数据post:提交数据（表单提交/文件上传）put:更新数据.