![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
ikun不解释
前端开发
展开
-
react 中的依赖循环
出现依赖循环的代码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原创 2022-01-25 16:20:52 · 1298 阅读 · 0 评论 -
react-router 基础用法总结
安装以 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原创 2022-01-24 15:07:54 · 830 阅读 · 0 评论 -
react 项目中改变页面的标题
方法一:使用 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>原创 2022-01-23 11:31:36 · 2058 阅读 · 0 评论 -
react 的 错误边界
react 的 错误边界 是一个 class 组件作用:捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且,它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。使用:如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个(或两个)时,那么它就变成一个错误边界。案例import React, { Component } from 'react'typ原创 2022-01-10 22:16:25 · 460 阅读 · 0 评论 -
用自定义 hooks 管理请求状态
用自定义 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', // 状态}原创 2022-01-09 11:14:55 · 482 阅读 · 0 评论 -
前端实现登录、登出、请求数据的一些思路整理
前端实现登录、登出、请求数据的一些思路整理(基于React、JWT技术)登录、登出和数据请求是两种不同的数据交互方式,是互相独立的。登录、登出基于 JWT(JSON WEB TOKEN) 技术,通过请求后台的登录接口,由服务器生成一个 token 凭证返回给前台;前台拿到 token 之后存储到本地的 localStorage 里面,每次进行数据请求的时候都带上 token 传给后台,由后台决定根据 token 返回不同的数据和状态。根据以上思路整理出前端代码① 登录和登出// 获取当前原创 2021-12-26 21:44:14 · 1628 阅读 · 2 评论 -
context 在不同类型组件的使用理解
对 react 中 context 的理解使用 context 的大致目的:共享数据,避免数据的层层传递类组件中的 context步骤一:创建一个 context 对象,当加载到订阅这个 context 对象的组件的时候,会自动匹配下文 provider 中的 value 值。const AuthContext = React.createContext(undefined);步骤二:创建 provider,传递给消费组件,并订阅 conetext 的变化,即 value 值的变化,可以原创 2021-12-16 14:50:19 · 645 阅读 · 0 评论 -
记录学习过程中写的自定义hooks
防抖export const useDebounce = <T>(value: T, delay?: number) => { const [debounceValue, setDebounceValue] = useState(value); useEffect(()=>{ const debounceTimer = setTimeout(() => setDebounceValue(value), delay); return () => clear.原创 2021-12-13 21:58:23 · 409 阅读 · 0 评论 -
render props的基本理解
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原创 2021-07-23 16:38:25 · 1459 阅读 · 0 评论 -
函数组件和类组件中React.createContext的使用
函数组件和类组件中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原创 2021-07-22 15:21:15 · 793 阅读 · 0 评论 -
Hooks基础理解
react 中常见的 Hooks① useState:组件状态管理钩子- useState 使函数组件能够使用state基本使用const { state, setState } = usetState(initState);state 是要设置的状态setState 是更新 state 的方法,只是一个方法名,可以随意修改。initState 是初始的 state,可以是随意的数据,也可以是回调函数,但是函数必须是有返回值。import { useState } from 're原创 2021-07-06 11:52:58 · 465 阅读 · 3 评论 -
React之组件通信(context)
组件通信 - Contextcontext 有两个角色Provider 数据提供Consumer 数据消费使用 context 可以避免通过中间元素传递 props,context 设计的目的是为了共享对于同一个组件树而言的全局数据。// 普通传参class Info extends Component { render(){ return ( <div> <p>账号:{ t原创 2021-07-01 10:01:27 · 149 阅读 · 0 评论 -
react 基础理解3
React 之 组件复合React 官方说任何一个能用组件继承实现的,用组件复合都可以实现组件复合类似于在 Vue 里面使用的组件插槽import React from 'react';function PublicComponent(props){ return ( <div> {/*类似于vue中的匿名插槽*/} { props.children } {/*类似于vue中的具名插.原创 2021-06-25 17:17:29 · 54 阅读 · 0 评论 -
react 基础理解2
性能优化之 PureComponentPureComponent 是内部定制了 shouldComponentUpdate 生命周期的 Component它重写了一个方法来替换 shouldComponentUpdate 生命周期方法平常在开发过程中能使用到 PureComponent 的地方应该都尽量使用想要使用 PureComponent 特性需要记住两个小要求确保数据类型是只类型,因为只进行浅比较,复杂类型可能不会生效如果是引用类型,确保地址不变,同时不应当有深层次数据变化.原创 2021-06-25 16:24:40 · 53 阅读 · 0 评论 -
react 基础理解
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.原创 2021-06-25 16:23:59 · 75 阅读 · 2 评论 -
react-redux
react-redux<Provider store>使组件能够使用connect()方法连接到Redux store。connect()方法中常见的两个参数mapStateToProps和mapDispatchToProps。mapStateToProps允许将store中的state数据作为props绑定到组件上面。mapDispatchToProps允许将action作为props绑定到组件上面其他的流程和redux更新状态的方式差不多创建一个store存放state原创 2020-10-22 15:59:20 · 70 阅读 · 0 评论