实现效果 组件源码 SlideContainer.js import React, {useRef, useState} from "react"; export const SlideContainer = (props) => { const childrenArray = React.Children.toArray(props.children); const [left, setLeft] = u...

1.概念 说明：React中使用Mock数据主要是为了模拟后端接口和数据，以便前端开发可以在没有实际后端支持的情况下进行。 2.实现步骤 2.1安装   2.2准备json文件 { "list":[ { "name":"李四", "age":"12" },{ "name":"王二", "age":"15" } ]} 2.3添加起动命令 2.4页面显示    ...

 学习主要来源 React 教程 | 菜鸟教程  React 特点 1.声明式设计 −React采用声明范式，可以轻松描述应用。 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 5.组件 − 通过 Reac...

1.声明式路由导航 1.1概念 说明：声明式导航是指通过在模版中通过<Link/>组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行。 import {Link} from "react-router-dom"const Login=()=>{ return ( <div>我是登录页面 <Link to={"/home"}>跳转Home页</Link> </div> )}expo...

径在整个路由配置中都找不到对应的pth,为了用户体验，可以使用404兜底组件进行渲染。（兜底组件）    3.路由模式 说明：各个主流框架的路由常用的路由模式有俩种，history模式和hash模式，ReactRouter分别由createBrowerRouter和createHashRouter函数负责创建。 ...

value,toggle}=useToggle() 5.源码 //封装自定义Hook // 问题 ：布尔值的逻辑 当前组件耦合在一起的 不方便复用 import { useState } from "react"; function useToggle(){ const [value,setValue]=useState(true) const toggle=()=>{ setValue(!value) }...

方式导出reducerexport default reducer 3.app.js 说明： 导入函数进行调用。 import { useDispatch, useSelector } from "react-redux";import {addToNum} from "./store/modules/counterStore"function App() { const {count}=useSel...

1.概念 说明：用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送 A列AX请求，更改DOM等。 2.案例 // useEffect用于组件不是由事件引起的而是由渲染本身引起的操作，如ajax,更改Dom等。import { useEffect, useState } from "react"; const URL=`https://st2msh.laf.run/react_get...

参action 总结 前言 redux状态管理插件的使用 提示：以下是本篇文章正文内容，下面案例可供参考 redux状态管理 安装redux npm install @reduxjs/toolkit react-redux 创建文件 并使用 import { configureStore } from "@reduxjs/toolkit"; //子模块导入，可自定义多个import counterStor...

中通过Ctx.Provider组件提供数据// 3.在底层组件(B)中通过useContext钩子函数获取消费数据 import {createContext, useContext} from 'react'const MsgContext=createContext() function Son1() { return <div> this is son1 <Son2></Son2> </div>;...