React专栏
文章平均质量分 65
React专栏
城南的夏
不积跬步无以至千里
展开
-
React学习(路由封装和路由高级封装)
学习目标:提示:路由封装和路由高级封装(1) 路由封装将一级路由,通过router/RouterView.jsx组件进行封装新建router目录,在目录下新建RouterView.jsx/** * 路由封装 */import {lazy, Suspense} from "react"import {Redirect, Route, Switch} from "react-router-dom"//使用懒加载 导入一级路由const Layout = lazy(() =>im原创 2022-05-21 15:14:22 · 1510 阅读 · 4 评论 -
React学习(编程式导航)
学习目标:提示:这里可以添加学习目标(1) 编程式导航编程式导航,提供了通过脚本代码实现页面跳转的功能主要api函数包含在路由对象参数:history中this.props.historypush("/login"):跳转到登录路径,保留访问记录replace("/login"):跳转到登录路径,不保留历史记录go(n):跳转到历史某个访问记录goBack():后退goForward():前进import React, {Component} from 'react';im原创 2022-05-20 16:36:14 · 477 阅读 · 0 评论 -
React学习(懒加载)
学习目标:提示:10分钟学会组件懒加载(1) 路由懒加载SPA应用中,为了优化首页加载和渲染性能,让路由页面组件按需访问加载解决方案:路由懒加载代码操作:编辑App.jsximport './App.css';// 引入页面组件import Login from "./views/pages/Login"import Reg from "./views/pages/Reg"import {BrowserRouter as Router, NavLink, Redirect, Route,原创 2022-05-19 18:21:50 · 312 阅读 · 0 评论 -
React学习(高阶路由)
学习目标:提示:一小时学会高阶路由(1) 高阶路由多个页面组件,需要将一些公共部分拆分成功能子组件实现复用,如页头问题:页头 子组件中,是否可以访问路由数据?答案:路由对象参数history/location/match只能在路由组件中访问,路由页面组件的子组件中无法访问解决方案:子组件中要访问路由参数父子组件传值高阶路由:通过react-router-dom提供的高阶路由函数,可以将路由组件中的子组件添加相关路由属性1:父子组件传值的方式父组件 代码操作:在 Home.jsxi原创 2022-05-19 17:44:23 · 215 阅读 · 0 评论 -
React学习(嵌套路由)
学习目标:提示:一小时学会嵌套路由例如: 一小时学会嵌套路由学习内容:提示:一小时学会嵌套路由(7) 嵌套路由一个项目中除了一级路由的跳转,二级路由甚至更深层次的路由访问都是需要的!解决方案:嵌套路由代码操作:布局主页组件【主页、品牌列表、用户中心、关于我们】四个页面的跳转注意事项:React中对于路由的嵌套的概念很弱化,哪个组件需要切换页面就直接在组件内配置路由即可!在Layout.jsximport React, {Component} from 'react';im原创 2022-05-17 11:05:00 · 555 阅读 · 0 评论 -
React学习(路由)
学习目标:提示:这里可以添加学习目标例如: 一周掌握 Java 入门知识1、路由(1) 什么是路由路由Router,前端项目描述了根据用户的不同请求返回不同的页面视图的操作过程!注意:代码中操作的路由,本质上就是路由规则对象(2) 基础配置语法React中的路由,通过组件的形式完成了路由的定义,如图所示:创建项目:脚手架构建路由项目注意:默认构建的项目,基于react@18、react-dom@18版本,这个最新版本对应生态库兼容性并不好$ npx create-r原创 2022-05-11 14:01:51 · 242 阅读 · 0 评论 -
React学习(React生命周期)
学习目标:提示:React生命周期例如: 10分钟学会React生命周期学习内容:提示:学会React生命周期6、生命周期(1)什么是生命周期生命周期LifeCycle,描述了一个组件从创建、挂载、运行到销毁的全过程项目开发中,每个组件在不同的运行阶段需要执行不同的操作,需要针对组件的生命周期有比较深入的理解回顾Vue生命周期创建:beforeCreate() | created()加载:beforeMount() | mounted()运行:beforeUpdate()原创 2022-05-11 03:59:13 · 457 阅读 · 0 评论 -
React学习(ref)
学习目标:提示:ref例如: 10分钟掌握ref?学习内容:提示:学会ref5、refReact框架提供了一个ref引用组件,可以直接获取目标标签的DOM对象或者子组件的组件对象标签上:可以直接操作标签DOM对象子组件上:可以直接操作子组件对象,用于组件传值等各种操作① 通过ref属性字符串方式执行操作基本语法:<input type="text" ref="header"/>changeHeader() { this.setState({heade原创 2022-05-11 03:54:33 · 139 阅读 · 0 评论 -
React学习(数据双向绑定)
学习目标:提示:数据双向绑定例如: 10分钟学会数据双向绑定学习内容:提示:学会数据双向绑定4、表单处理(1) 表单中的单向数据流React框架中,出于对数据的保护,默认情况下使用单向数据流机制!数据模块和视图模块之间,数据模块可以将数据传递给视图模块进行渲染;视图模块执行数据更新时不会自动同步数据到数据模块,导致数据如果需要更新就需要通过自定义操作方式进行同步(2) 数据双向绑定表单元素(以文本输入框为例)渲染数据通过属性value属性展示输入数据通过事件event(o原创 2022-05-11 03:11:40 · 848 阅读 · 0 评论 -
React学习(组件之间传值)
学习目标:提示:组件之间传值例如: 十分钟掌握组件之间传值学习内容:提示:学会组件之间传值(3)组件之间传值解决方案:事件中心核心技术:第三方事件模块events事件中心:src/views/utils/eventsplugin.js// 引入依赖import Events from "events";// 导出事件对象export default new Events()组件Child.jsx发送数据import React, {Component} from 're原创 2022-05-11 02:47:27 · 249 阅读 · 0 评论 -
React学习(子父组件传参)
学习目标:提示:子父组件传参例如: 十分钟掌握子父组件传参学习内容:提示:掌握子父组件传参(2)子父组件传值解决方案:自定义属性、配合函数接受数据核心语法:this.props -> 传递了一个函数声明父组件:Parent.jsximport React, {Component} from 'react';import './Parent.css'import Child from "../child/Child";class MyComponent extends原创 2022-05-11 02:06:24 · 399 阅读 · 0 评论 -
React学习(父子组件传值)
学习目标:提示:React 父子组件传值例如: 半小时掌握React 父子组件传值学习内容:3、组件传值(1)父子组件传值解决方案:自定义属性核心语法:自定义属性、this.props-> 传递了一个变量数据父组件:Parent.jsximport React, {Component} from 'react';import './Parent.css'import Child from "../child/Child";class MyComponent exten原创 2022-05-11 01:44:43 · 291 阅读 · 0 评论 -
React学习(React高级)
学习目标:提示:这里可以添加学习目标例如: 一周掌握 Java 入门知识学习内容:提示:React实战二、React高级入门1、脚手架(1)什么是脚手架脚手架本质上就是一个工具插件,可以通过执行指定命令的形式完成项目文件的远程同步!备注:为什么要使用脚手架手工构建项目的方式效率太低,通过脚手架将项目按照固定的格式进行快速构建,提高开发效率!(2)React脚手架React提供了create-react-app脚手架,用于快速构建项目-- 执行命令,在指定目录中创建rea原创 2022-05-10 17:35:17 · 564 阅读 · 0 评论 -
React学习(状态数据更新)
学习目标:提示:两个小时学会React状态数据更新例如: 两个小时学会React状态数据更新学习内容:提示:学会React状态数据更新(6)状态数据更新React特性是单向数据流,也就是所谓的单向数据绑定,数据的更新包含数据模块更新以及视图更新两部分直接修改变量数据,变量数据更新,但是视图不会同步更新,这就是单向数据流推荐:更新变量数据,通过this.setState({key: value, key2: value, ...})的形式进行更新,既能更新变量数据,同时也会推送更新视原创 2022-05-10 16:54:41 · 2324 阅读 · 0 评论 -
React学习(组件入门)
学习目标:提示:一天内学会React的组件入门例如: 一天内学会React的组件入门学习内容:提示:React的组件入门5、组件化组件化开发是React框架一个重要的特性,在框架中处理任何数据视图的结构都称为组件!React是一个完全独立的组件化开发的重量级框架!(1) 什么是组件组件Component是一种封装了数据、样式、视图界面的结构!通过组件的复用可以让前端应用的开发达到高效、健壮、可扩展、高维护的目的(2) 组件声明-函数式组件React中提倡的一种组件实现方式:原创 2022-05-10 16:30:54 · 438 阅读 · 0 评论 -
React学习(项目入门-JSX)
学习目标:提示:一天内掌握React的项目的入门?例如: 一天内掌握React的项目的入门?学习内容:提示:今天开始学习React项目的入门(1)入门项目通过入门项目在script标签中直接编写带有结构的html代码,更加方便和灵活的控制数据和结构的关系学习时间:提示:这里可以添加计划学习的时间例如:周一至周五晚上 7 点—晚上9点周六上午 9 点-上午 11 点周日下午 3 点-下午 6 点学习产出:提示:这里统计学习计划的总量例如: 技术笔记 2 遍原创 2022-05-10 14:36:19 · 466 阅读 · 0 评论 -
React学习(初始React)
学习目标:提示:初步了解什么是React?例如: 一周掌握 React 入门知识学习内容:提示:React的入门学习1、React概述React是facebook公司研发的、以声明式UI视图为核心的、完全独立的组件化开发方式,通过单向数据流管理数据在DOM结构中的渲染,结合组件和视图快速构建前端应用的重量级开发框架!React框架的特性:声明式UI视图结构,本质上就是Vue虚拟DOM结构的前身完全组件化开发,React中所有的结构都是组件单向数据绑定 React有丰富的社区支原创 2022-05-10 01:12:30 · 396 阅读 · 0 评论