接受卍制裁-优快云博客

原创在react组件中获取DOM元素的三种方式

1, 给标签设置ref属性, 通过this.refs调用 (老版本语法,将要废除)2, 在构造器中创建ref全局变量, 在标签中ref属性动态绑定这个全局变量, 通过全局变量的current字段调用3, 在标签ref属性绑定函数, 在函数中定义全局变量赋值, 通过全局变量调用4, 使用hook语法查找DOM5, 使用hook语法查找DOM。

2023-07-02 19:04:12 1417 1

原创 react 高阶组件 hooks 状态管理虚拟DOM 组件库

hooks是react新版本提供的组合式API语法, 类似于vue3组合式API1, 从react中导入语法函数setState2, 在函数式组件中, 使用setState创建状态数据const [name, setName] = useState("名字")3, 在组件模板中, 直接调用状态名即可自定义状态name: {name}-{age}4, 使用setState函数返回的更新函数修改状态值, 参数是新值,修改后自动刷新界面setName("吴亦凡")

2023-07-02 19:03:49 515 1

原创 react路由切换动画

4, 路由组件中没有路由信息location.pathname, 需要使用withRouter导入。2, 在路由配置文件/src/router/index.js中导入动画组件。3, 在路由组件模板中,用动画组件包裹路由组件。1, 在react工程中下载安装过渡动画模块。5, 在组件的css文件中写路由切换动画过程。

2023-07-02 18:47:53 338 1

原创 react 过渡动画

2, 需要在index.js中关闭严格模式, 删除 <React.StrictMode>3, enter-active和exit-active中要写过渡结束状态才有效。1, 入场和出场的class样式要按顺序写,动画开始和结束顺序不能颠倒。3, 在需要过渡的标签外层添加CSSTranstion组件。4, 在组建的css中通过class设置入场和出场动画。1, 在react工程中下载安装过渡动画模块。2, 在需要执行过渡的组件中导入动画模块。

2023-07-02 18:44:04 175 1

原创 react 路由跳转与传值

路由控制跳转的组件中(一般是views目录下的页面组件),props会自动添加以下三个字段, (根组件和components中的组件没有路由信息)location: 主要显示路由信息, 可用于路由传值。react路由传值方式2: 动态路由(友好url)传值。match: 主要用于路由传值, 也可展示路由信息。react路由跳转方式1: 路由标签Link跳转。history : 主要用于路由跳转和路由监听。react路由传值方式1: url路径拼接传值。react路由传值方式3: 自定义对象传值。

2023-07-02 18:43:33 305 1

原创 react 路由监听

1.在路由跳转的组件中使用props.history.listen() 监听路由, 得到返回值cancle2.在组件的componentWillUnmount中取消路由监听, 调用 cancle函数, 以防止重复监听,浪费性能注: 局部监听只能监听此组件离开时的路由, 类似于vue中。

2023-07-02 18:42:46 1826 2

原创 react-router 6.4 版本 + hooks 语法实现

4, 在入口文件 src/main.jsx中,从路由模块导入工具组件RouterProvider 和路由对象, 并渲染到根标签root。2, 创建路由文件src/router/index.jsx, 导入根组件和需要路由跳转的组件。7, 在需要跳转的页面, 从路由模块导入工具组件 NavLink。5, 在app.jsx根组件中导入路由出口组件 Outlet。1, 下载react的路由模块(最新6.10.0)6, 在app.jsx根组件中渲染路由出口。8, 使用NavLink组件执行路由跳转。

2023-07-02 18:41:40 120 1

原创 react-router 6.3 版本 + hooks

3, 创建路由文件src/router/index.js, 导入需要路由跳转的组件, 并导出路由配置数组。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。4, 在app.js中导入路由配置函数useRoutes和路由配置数组routes。7, 在需要跳转的页面, 从路由模块导入工具组件 Link。1, 下载react的路由模块(默认最新6.3)6, 在函数式组件app模板中渲染路由出口。5, 在函数式组件app中创建路由出口。

2023-07-02 18:39:40 88 1

原创 react-router 6.3 版本实现

注意: 使用router6.0实现的路由跳转, 不会向组件中传入路由信息, 可以在组件中从路由模块导出useLocation和useNavigate函数以实现路由相关功能。3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。6, 在根组件app模板中添加路由组件,即路由出口。4, 创建路由组件,配置路由, 并导出。5, 在app.js中导入路由组件。

2023-07-02 18:35:50 135 1

原创 react-router 5.x路由配置

3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route。7, 在需要跳转的页面, 从路由模块导入工具组件 Link。6, 在根组件app模板中添加路由组件,即路由出口。4, 创建路由组件,配置路由, 并导出。5, 在app.js中导入路由组件。8, 使用Link组件执行路由跳转。1.下载react的路由模块。

2023-07-02 18:32:44 158 1

原创 1.2使用脚手架安装react ---webpack版本构建react项目配置代理图片懒加载-webpack React中如何实现样式隔离.

1.安装react代码行工具(脚手架), 基于webpack工具构建项目2.创建一个react应用程序, my-app是自定义项目名3.启动react项目 (需要cd进入项目my-app根目录)

2023-06-28 17:41:27 210 1

原创 1.1创建react脚手架项目构建react项目配置代理构建react项目配置代理(vite) 如何实现样式隔离.

1.安装vite构建工具。

2023-06-28 17:30:05 379 1

原创脚手架创建react

Redux-React-Starter-Kit：这是另一个基于 React 和 Redux 的脚手架，它提供了一些有用的工具和库，例如 Axios、Webpack、PostCSS 等等。React-Boilerplate：这是一个基于 React 的模板，它包含了一些最佳实践和建议，例如使用 Redux 管理状态、使用 Webpack 进行构建等等。create-react-app：这是一个非常流行的 React 脚手架，它提供了一个快速的启动方式，使您可以在几分钟内创建一个全新的 React 应用程序。

2023-06-28 17:12:20 136 1

weixin_54206707的博客