qq_42309685的博客

出现依赖循环的代码function sum(a, b){ return { sum: a + b }}export const Test = () => { const obj = sum(a, b); // 不只是对象，数组也会出现这种情况 const [num, setNum] = useState(0); useEffect(()=>{ setNum(num + 1); }, [obj]) return ( <div>{ num }</di

安装以 create-react-app --template typescript 构建的项目模板;npm intsall react-router react-router-dom （此处为 v6 版本）基础使用路由的定义和跳转是分离的，此处直接将路由定义在了入口文件 index.tsx 里面import { BrowserRouter, Route, Routes } from 'react-router-dom';React.render( <React.StrictMode

方法一：使用 react-helmet 组件该组件可在任意组件里面管理文档头（head标签里面的内容）安装：yarn add react-helmet或者npm install --save react-helmet使用：import React from 'react';import { Helmet } from 'react-helmet';export function App(){ return ( <> <Helmet>

react 的 错误边界 是一个 class 组件作用：捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。使用：如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。案例import React, { Component } from 'react'typ

用自定义 hooks 管理请求状态创建 hooksinterface State<D> { data: D | null; error: Error | null; stat: 'loading' | 'success' | 'error' | 'idle';};const defaultState: State<null> = { data: null, // 数据 error: null, // 错误信息 stat: 'idle', // 状态}

前端实现登录、登出、请求数据的一些思路整理（基于React、JWT技术）登录、登出和数据请求是两种不同的数据交互方式，是互相独立的。登录、登出基于 JWT（JSON WEB TOKEN） 技术，通过请求后台的登录接口，由服务器生成一个 token 凭证返回给前台；前台拿到 token 之后存储到本地的 localStorage 里面，每次进行数据请求的时候都带上 token 传给后台，由后台决定根据 token 返回不同的数据和状态。根据以上思路整理出前端代码① 登录和登出// 获取当前

对 react 中 context 的理解使用 context 的大致目的：共享数据，避免数据的层层传递类组件中的 context步骤一：创建一个 context 对象，当加载到订阅这个 context 对象的组件的时候，会自动匹配下文 provider 中的 value 值。const AuthContext = React.createContext(undefined);步骤二：创建 provider，传递给消费组件，并订阅 conetext 的变化，即 value 值的变化，可以

防抖export const useDebounce = <T>(value: T, delay?: number) => { const [debounceValue, setDebounceValue] = useState(value); useEffect(()=>{ const debounceTimer = setTimeout(() => setDebounceValue(value), delay); return () => clear.

render propsrender props 实现组件state的复用目标：获取鼠标位置三个组件：Cat.js，Mouse.js，MouseTracker.js// Mouse.jsimport React, { useState } from 'react';export default function Mouse(){ const [ mousePosition, setMousePosition ] = useState[{ x: 0, y: 0 }]; f

函数组件和类组件中React.createContext的使用组成：两个页面文件 app.js 和 Tooltip.js；一个存放context的文件 indexContext.js// indexContext.jsimport React from 'react';export const windowProp = { width: window.innerWidth, height: window.innerHeight}export const WindowProps

react 中常见的 Hooks① useState：组件状态管理钩子- useState 使函数组件能够使用state基本使用const { state, setState } = usetState(initState);state 是要设置的状态setState 是更新 state 的方法，只是一个方法名，可以随意修改。initState 是初始的 state，可以是随意的数据，也可以是回调函数，但是函数必须是有返回值。import { useState } from 're

组件通信 - Contextcontext 有两个角色Provider 数据提供Consumer 数据消费使用 context 可以避免通过中间元素传递 props，context 设计的目的是为了共享对于同一个组件树而言的全局数据。// 普通传参class Info extends Component { render(){ return ( <div> <p>账号：{ t

React 之 组件复合React 官方说任何一个能用组件继承实现的，用组件复合都可以实现组件复合类似于在 Vue 里面使用的组件插槽import React from 'react';function PublicComponent(props){ return ( <div> {/*类似于vue中的匿名插槽*/} { props.children } {/*类似于vue中的具名插.

性能优化之 PureComponentPureComponent 是内部定制了 shouldComponentUpdate 生命周期的 Component它重写了一个方法来替换 shouldComponentUpdate 生命周期方法平常在开发过程中能使用到 PureComponent 的地方应该都尽量使用想要使用 PureComponent 特性需要记住两个小要求确保数据类型是只类型，因为只进行浅比较，复杂类型可能不会生效如果是引用类型，确保地址不变，同时不应当有深层次数据变化.

react 和 react-dom 库react 设计之初就是使用 JSX 来描述 UI，所以解耦了和 DOM 的操作react 只负责逻辑层。react-dom 负责渲染层，去渲染实际的 DOM。JSX 的实质JSX 语法即 JS 和 HTML 的混合体，实际的核心逻辑就是用 JS 实现的JSX 的实质就是 React.createElement 的调用DOM 结构的嵌套就是 React.createElement 的调用// react 中的写法class Hel.

react-redux<Provider store>使组件能够使用connect()方法连接到Redux store。connect()方法中常见的两个参数mapStateToProps和mapDispatchToProps。mapStateToProps允许将store中的state数据作为props绑定到组件上面。mapDispatchToProps允许将action作为props绑定到组件上面其他的流程和redux更新状态的方式差不多创建一个store存放state