React
文章平均质量分 54
React全家桶教程:react18,react-router6,redux4
youhebuke225
这个作者很懒,什么都没留下…
展开
-
React之React相关目录
React基础React安装 点击React类组件与函数组件 点击原创 2022-04-22 20:00:00 · 1127 阅读 · 0 评论 -
React之this.setState方法
文章目录例子代码效果知识点应用场景需要注意的是this.setState方法,他是一个异步的方法例子代码import {Component, createRef} from 'react'export default class NameForm extends Component { inpEle = createRef() state = { value: "" } handleClick = () => { const value = th原创 2022-05-27 09:24:35 · 362 阅读 · 0 评论 -
redux之开发工具的使用
github原创 2022-05-27 09:21:59 · 944 阅读 · 0 评论 -
redux异步之redux-thunk
简介redux-thunk是redux官方退出的一个异步中间件,thunk表示延迟计算的意思使用中间件之后,我们可以再action构造器中返回一个函数,而不是一个对象使用下载npm install redux-thunk -S配置这里我们需要使用到redux的一个使用中间件的函数applyMiddlewareimport {createStore,applyMiddleware} from 'redux'import thunk from 'redux-thunk'impor原创 2022-05-26 19:15:00 · 980 阅读 · 0 评论 -
redux-toolkit之异步请求
我是使用axios来进行异步请求 ,安装请点击https://zhuanlan.zhihu.com/p/382487951// createAsyncThunk创建一个异步的action,这个方法被触发的时候会有三个状态// pending(进行中) fulfilled(成功) rejected(失败)原因:因为redux存储时是将数据序列化后存储的,并且@reduxjs/toolkit里面会默认检查是否序列化export default configureStore({ reduc.原创 2022-05-25 14:39:15 · 2227 阅读 · 4 评论 -
redux之redux-toolkit
由于redux的各种规范与插件异常繁琐,所以官方推出了redux-toolkit这个库来简化redux的使用https://zhuanlan.zhihu.com/p/382487951安装npm install @reduxjs/toolkit使用一般我们用configureStore来创建一个状态管理器...原创 2022-05-24 21:45:00 · 1222 阅读 · 0 评论 -
redux之简单使用
https://blog.csdn.net/lilygg/article/details/118256153原创 2022-05-24 09:07:17 · 192 阅读 · 1 评论 -
React之lazy与Suspense
原创 2022-05-21 10:03:59 · 338 阅读 · 0 评论 -
react-router之默认路由与多组路由
<Route>标签上有一个属性为index,他就是用来控制默认展示的子路由的import { Routes, Route, useNavigate, NavLink, Navigate, Outlet, } from "react-router-dom"; export default function App() { return ( <div className="App"> .原创 2022-05-20 09:18:18 · 2212 阅读 · 0 评论 -
reat-router之配置实现路由管理
useRoutes 可以将数组对象形式的路由,直接在页面上使用。// 入口文件,src/index.tsximport React from "react";import ReactDOM from "react-dom";import { BrowserRouter } from "react-router-dom";import App from "./App";import "./index";ReactDOM.render(( <BrowserRouter>原创 2022-05-20 09:03:17 · 183 阅读 · 0 评论 -
react-router之参数传递
https://blog.csdn.net/big_sun_962464/article/details/122462212例子import { Routes, Route, useNavigate, NavLink,useParams, Link,Outlet,useSearchParams,useLocation } from "react-router-dom";import React,{ useEffect } from "react";export default function A原创 2022-05-19 09:15:49 · 924 阅读 · 0 评论 -
react-router之路由定义
简介我们一般使用Route组件来定义路由,但是在定义的时候需要使用Routes组件类进行包裹点击,老版本应该是Switch组件原创 2022-05-17 13:34:00 · 475 阅读 · 0 评论 -
react-router之路由重定向
在老版本的使用中,我们一般都是用Redirect 进行重定向,在V6版本中,我们使用Navigate 组件例子export default function App() { return ( <div className="App"> <h1>Welcome to React Router!</h1> <Routes> <Route path="/" element={<Home />.原创 2022-05-16 09:35:15 · 1754 阅读 · 0 评论 -
react-router之路由跳转
以当前博客内容为例 点击基本语法一般有三种方式进行路由的跳转<Link>组件<NavLink>组件与<Link>组件功能相同但是他可以调整样式style或className可以接收一个函数useNavigate钩子函数<Link>组件在上面的例子中我们就使用了<Link>组件进行跳转,官网说明 点击 <Link to="/about">About</Link>官网中的参数说明 .原创 2022-05-16 09:27:54 · 1059 阅读 · 0 评论 -
react-router6.0的简单使用
https://blog.csdn.net/qq_45297578/article/details/116332601https://zhuanlan.zhihu.com/p/78176856原创 2022-05-14 13:44:35 · 254 阅读 · 0 评论 -
React之组件之间的通讯
文章目录父子通讯代码知识点子父通讯兄弟通讯https://blog.csdn.net/wanghaoyingand/article/details/122443720https://blog.csdn.net/qq_41809113/article/details/120980237https://baijiahao.baidu.com/s?id=1674880045858894330&wfr=spider&for=pc父子通讯代码import {Component} from原创 2022-05-11 09:15:31 · 283 阅读 · 0 评论 -
React之devtools的使用
安装官网https://www.cnblogs.com/xiaoxuStudy/p/13339641.html原创 2022-05-05 09:21:11 · 2148 阅读 · 0 评论 -
React之组件生命周期钩子
文章目录例子代码效果知识点挂载更新卸载图示应用场景概要例子代码效果知识点官网 点击,所谓声明周期钩子函数,也就是说当组件从实例化到卸载的时候,所触发的函数调用挂载当组件进行挂载的时候,会依次触发以下函数的调用constructor()static getDerivedStateFromProps()render()componentDidMount()更新当组件更新时,也就是当state或者props变化的时候,会依次触发一下函数static getDer原创 2022-05-04 10:48:55 · 314 阅读 · 0 评论 -
React之表单数据收集
官网一般React的唯一数据源就是state,只能用setState()来进行改变在HTML中表单元素一般会有自己维护的state,根据用户的输入自行改变受控组件将表单维护的状态放到React中的state中,这种就是受控组件也可以说是双向的数据绑定(表单维护的状态与React中的状态)import {Component} from 'react'export default class NameForm extends Component { state = { .原创 2022-05-01 09:06:11 · 234 阅读 · 0 评论 -
React之事件处理
事件处理在React中事件绑定的属性需要采取驼峰命名的写法,如onClickReact中的事件并不是DOM原生时间,而是经过React处理的事件原创 2022-04-28 22:17:06 · 772 阅读 · 0 评论 -
React值组件的三大特性
state在React中state的值是一个对象,他保存着当前组件所有的状态,只要state更新,页面就会更新初始化一般我们会在构造函数中对于state进行初始化constructor(props){ super(props) this.state = { stateProp1:value1, stateProp1:value1, ... }}读取this.state.statePropName更新状态一般我们使用this.setState() 来进行状态的原创 2022-04-24 09:19:55 · 1839 阅读 · 0 评论 -
React之类组件与函数组件
类组件所谓类组件,就是用ES6的class来定义组件定义类组件import React, { Component } from "react";export default class MyComponent extends Component { constructor(props) { super(props); this.state = { hello: "hello world", }; }原创 2022-04-22 20:00:00 · 1610 阅读 · 0 评论 -
React 之 React安装
安装使用create-react-app搭建项目使用vite搭建项目点击安装提示运行命令,我们就搭建起了一个简单的reactApp原创 2022-04-19 13:15:00 · 863 阅读 · 0 评论